【前端学习】前端学习第十三天：JavaScript中DOM技术介绍

DOM即文档对象模型，是一种与浏览器、编程平台和语言无关的应用程序接口，它提供了动态访问和更新文档的内容、结构和样式的基本方法。

下面是网页文档对象对应的节点树：

 

DOM中节点具有不同的类型，常见的节点类型有以下几种：

1、文档节点：整个文档是一个文档节点（Document（9））；

2、元素节点：每个HTML标记是一个元素节点（Element（1））；

3、文本节点：包含在HTML标记中的文本是文本节点（Text（3））；

4、属性节点：每一个HTML标记属性是一个属性节点（Attribute（2））；

节点的属性和方法：

1、节点属性：

nodeType：节点的类型，比如文档节点是9，元素节点是1；

nodeName：节点的名称；

nodeValue：节点的值；

attributes：返回当前节点的属性节点列表；

parentNode：指向当前节点的父节点；

childNodes：返回当前节点的所有子节点的列表；

firstChild：指向当前节点的子节点列表中的第一个节点；

lastChild：指向当前节点的子节点列表中的最后一个节点；

previousSibling：指向当前节点的前一个兄弟节点；

nextSibling：指向当前节点的下一个兄弟节点；

innerHTML：获取节点内容；

2、节点方法

appendChild：将子节点添加到当前节点的子节点列表的末尾；

cloneChild：克隆当前节点；

hasChildNodes：表示当前节点是否有子节点；

insertBefore：在另一个节点前插入新的子节点；

removeChild：移除一个子节点；

replaceChild：用新节点替换旧节点；

innerText和innerHTML的联系区别：

innerText和innerHTML都可以获取元素内容和改变元素内容，不同之处在于innerHTML可以识别HTML标签，且不去除换行和空格，而innerText不识别HTML标签，同时换行和空格会去除。