DOM的概念

DOM

DOM：文档对象模型

Web API：Javascript中的BOM和DOM就是典型的Web API

DOM的核心：document对象。在DOM中所有的标签，属性，标签都是文本节点

文档一个html页面就是一个文档

元素（element）页面中的标签

节点（rode）标签的属性，标签的文本等，所有的节点都是对象，都有自己的属性和方法

节点的类型：0（标签）1（属性），2（文本）

在Javascript中通过document获取页面元素

document.getElementBYid（’id‘）通过id属性值来获取页面中的元素

document.getelementBYClassName（’name‘）通过name属性值来获取。因为标签的class值可以重复，所以该函数的返回值是合集，可以将该集合当作数组来访问，但是它本质不是数组（伪数组），不能使用push添加元素

document.getelementBYTagName（“标签名”）：通过标签名获取标签，返回值也是集合

document.getelementBYName（“name”）：通过标签的name属性获取，返回值nodelist（集合）

H5中获取标签的方法：部分老版本浏览器不支持

通过id属性获取：document.querySelector（“#id”）

通过class属性获取：document.querySelector（“.class”）：class属性可以重复，和获取的是第一个值

document.querySelectorAll：来获取多个标签，返回值类型为NdeList

document.querySelectorAll（“.class”）获取所有class属性值相同的元素

document.querySelectorAll（“标签名”）：获取所有标签名相同的元素

document对象属性

document.body：返回文档的body元素

document.documentElement：返回的是html元素

document.froms：返回文档中的所有from，结果类型是HTMLCollction

document.images：返回稳定中所有的img，结果类型是HTMLCollction

页面元素的内容

innerHTML属性：用来设置或返回元素的开始标签和结束标签之间的html，可以识别标签

innerText属性：用来设置或返回元素中除了标签以外的文本，识别空格不识别回车换行

textContent：用来设置或返回元素中除了标签以外的文本，识别换行和空格

write（）：如： document.write('<p><h2>aaaaaa</h2></p>')。换行： document.write('<br><span>cccccc</span>')

元素的属性

attributes属性：返回元素的属性集合

setAttribute（属性名，属性值）：设置属性值

getAttibute：获取属性值

removeAttibute：移除元素的属性

hasAttribute:判断是否有某个元素

元素.dataset.abc=123

元素样式：CSS样式

设置方式：元素名.style.样式属性名=属性值

H5中给元素增加新的属性：classList（添加样式类。表示元素class属性值的列表）,classList（移除样式类）

add（‘字符串’）：给元素添加一个类名（class属性），类名表示class属性的值，一次添加一个

remove（‘类名’）：删除元素的类名（一次只能删除一个）

动态添加样式注意：（1）变量名或函数名不要使用‘name’，原因是常用于关键字.（2）input和button没有放在form中

节点操作

有3种节点类型操作

标准dom

xml dom

html dom

创建

可以创建文本节点，元素节点

列：var newNodae = document.createElement('li');

var txtNode = document.createTextNode('新的 ')

添加

insertBefore()必须有俩个参数,第二个参数可以使用Unll或未定义

列：

ul.insertBefore(newNode,ul.children[3]);

ul.insertBefore(newNode)

克隆

cloneNode（）参数是布尔值，默认是false，表示是否深度克隆。无论是否浅克隆或深克隆，事件都不会被克隆

newNode.cloneNode(ture)

浅克隆：元素自身，属性

深克隆：元素自身，属性，子孙节点

替换

大多数节点操作都是由父元素发起

replaceChild(new2,ul.children[3])

移除

标准dom：ul.removechild(ul.childen[3])

html dom：ul.childen[3].remove();

节点的遍历

向上遍历

parentElement //parentNode

同胞遍历

向前：preaviousElementSibling //prevSibling

向后：nextElementSibling //nextSibling

向下遍历

所有 childen //childNodes

第一个 firstElementChhild //firstChild

最后一个 lastElementChild //lastChild

元素节点属性操作

通用属性操作方法

设置属性：setAttribute(name,value)

读取属性的值：getAttribute(name)

移除属性的值：removeAttribute(name)

判断是否有某个属性的值（返回布尔值）：hasAttribute(name)

系统认可的（id , src ,title ,href）元素.id = ''

h5推荐属性操作

元素.dataset.abc = 123 //为元素添加属性为：tdata-abc,值为123

dataset基本可以替代通用属性操作（通用的属性操作不可控）

关于css的属性操作

class属性

元素.className = 'a b c'整体更新class属性的值

className是可读可写属性，他会将class的值当作字符串类型整体进行操作

元素.classList.add()//添加样式类

元素.classList.remove()//移除样式类

style属性

h1.style.cssText = '修饰的代码1；

h1.style.cssText = '修饰的代码2 '。修饰代码2会覆盖1的修饰

const h1 = document.querySelector('h1');

h1.style.cssText = 'colon:red;background-color:yellow'

h1.style.color = 'red';

h1.style.backgroundColor = 'blue';

//这种方式不会覆盖之前的样式

获取元素的渲染样式值（经过浏览器计算后的样式值）

操作元素内容

innerHTML：<h1>内容</h1>

outerHTML：内容

innerText： `<h1>内容</h1>`；//内容不经过html的解析；

outerTest： `内容`；//内容不经过html的解析；

获取元素的系统值

offset

尺寸：元素边框，内边距，自身的总尺寸

位置：假设元素绝对定位，相对于自身定位参照元素的偏移值

client

尺寸：元素的内边距、自身的总尺寸（元素可以显示内容的区域尺寸）

子主题 3

尺寸：元素内容实际占用的尺寸,还需要加入元素的内边距。

位置：元素内容被滚动出显示范围的尺寸

select下拉菜单

新建：new Option(txt,value)

插入：select.add(newOption)

移除：select.remove(index)或select[index].remove()

文档元素对内容的操作

事件对象：函数出发时，会向函数传递event对象

事件对象保存了事件发生时的状态，通过属性表现出来，事件对象还有一些方法可以起到控制事件的作用。

阻止事件的传递：event.stopPropagation()

阻止与事件关联的默认动作:event.preventDefault()

获取事件发生时鼠标相对浏览器窗口的偏移值（简写为e.x，e.y）:event.clientX event.clientY

获取事件发生时，鼠标相对文档的偏移值:event.pageX() event.pageY()

获取事件发生时鼠标相对触发事件的元素的偏移值:event.offsetX() event.offsetY()

取按键字符的编码:var code = e.charCode || e.keyCode || e.which

返回布尔值，事件发生时，对应的功能键是否被按下:event.ctrlKey event.altKey event.shiftKey

return false 即阻止事件传递又阻止与事件关联的默认动作的执行

DOM节点操作

获取节点遍历

firstChild:获取当前节点的第一个子节点

lastChild:获取当前节点的最后一个子节点

nodeName：访问当前节点名称

nodeType：当前节点的类型

nodeValue：当前节点的值

div.firstChild.nextSibling：同一层级中当前节点之后紧跟的节点

previousSibling:指定节点的前一个节点

parentNode：当前节点的父节点

childNodes：当前节点的所有子节点

children：返回当前节点的所有子元素的集合，属于元素操作

追加节点

创建元素节点：document.createElement(‘元素名/元素名’)

创建一个文本节点：document.creatTexNode(‘文本’)

添加子节点：节点名.appendChild（‘’）

在指定结点之前插入节点：insertBefore(‘节点名称’)

子节点删除：removeNodeChild()

添加

<script>

const table = document.createElement(`table`);

for (let x = 1; x <= 9; x++) {

const tr = document.createElement(`tr`);

table.appendChild(tr);

for (let y = 1; y <= x; y++) {

const td = document.createElement(`td`);

const tx = document.createTextNode(`${y}*${x}=${x*y}`);

td.appendChild(tx);

tr.appendChild(td);

}

}

document.body.appendChild(table);

格式：table.appendChild(tr)

事件对象

事件对象：事件触发时，会像函数传递一个event对象

事件冒泡：ture-->捕获，flas-->冒泡