DOM的节点操作

一、DOM：

文档对象模型。核心对象是document

document.body

二、DOM树：

浏览器的JavaScript引擎（谷歌的V8引擎）在解析页面时，采用树形结构来存放页面元素

三、DOM操作元素的样式:

1、元素对象名.style.样式属性名 = 属性值

2、HTML5对象样式的操作”

（1）一个元素的class属性可以有多个值

（2）如何在js程序运行过程中动态

clsaaList属性：是元素的class属性的列表

四、classList属性提供的方法和属性

1、属性：length--某个标签的class属性值的个数（即多少个类名）

2、方法：

（1）add（"字符串"）：给元素添加类名。一次只能添加一个

（2）remove（"字符串"）：将元素的类名删除。一次只能删除一个

（3）toggle（"字符串"）：若类名存在则删除，不存在则添加

（4）item（index）：根据index，来获取元素的类名

（5）contains（"类名"）：判断元素是否含有给定的类名，若有返回true，没有返回false

五、DOM中节点的操作：采用操作节点的方式来操作页面中的元素

1、获取节点时使用的属性：

（1）firstChild：获取当前节点的首个子节点。

注意：换行符、空格也是节点（类型时#text）

（2）nextSibiling：返回同一层级中指定节点之后紧跟的节点

（3）lastChild：访问当前节点的最后一个子节点

（4）previousSibiling：返回同一层级中指定节点的前一个节点

（5）nodeName：节点的名称

（6）nodeValue：节点的值

（7）nodeType：节点类型

1：表示当前节点的类型时标签（元素）

2：表示属性节点

3：表示文本节点

（8）parentNode：访问当前元素节点的父节点

（9）childNodes：当前节点的所有子节点

强调：childNodes属性和children属性的区别

（1）相同点：都可以获取子元素

（2）不同点

childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

children返回的元素节点（即标签），返回值类型是HTMLCollection

getAttribute(‘id’)：用来获取元素的id属性值

getAttributeNode(‘id’)：用来获取元素的id属性（属性节点）

六、追加节点

1、创建元素节点

document.createElement()

2、在指定节点的末尾追加节点

appendChild(newNode)

3、在指定节点之前添加节点

insertBefore(newNode,node)：将节点newNode插入到节点node之前

该方法需要通过插入节点（node）的父节点来调用

4、创建文本节点：

document.createTextNode()

七、复制节点

cloneNode(deep)

参数deep是boolean型。true/false

true：表示深刻复制（将节点及其子节点都进行复制）--深拷贝

false：表示浅复制（只负责节点而不复制子节点）--浅拷贝

八、删除子节点

removeChild(node)

1、参数node为要删除的节点

2、前提：被删除的节点必须为空（无子节点）

三、hasChildNodes()：判断当前节点是否有子节点

返回值为false：表示没有子节点

返回值为true：表示有子节点

九、替换节点

replaceChild(newNode,oldNode)：用newNode节点替换oldNode节点