本文详细介绍了DOM（文档对象模型）中的节点类型，包括元素节点、属性节点和文本节点，并讲解了如何获取和操作这些节点。通过示例展示了如何使用如childNodes、children、firstChild等属性来遍历和操作DOM树。同时，还阐述了节点的属性，如nodeType、nodeName和nodeValue，以及创建、删除、替换和克隆节点的方法。此外，还提及了获取元素样式、偏移量等相关知识。
DOM节点
DOM节点就是DOM中所有的内容
元素节点
通过getElementBy.../getElementBys...获取的（标签）都是元素节点
属性节点
通过getAttribute获取的（标签内的属性）都为元素的属性节点
文本节点
innerText获取的为文本节点（文本内容、空格、换行）
获取节点
注意：一个标签到另一个标签之间存在有回车或者空格都会算作一个text文本节点
-
childNodes:获取某一节点下所以的子一级节点
<body> <!-- 注意下面输出的 text,li,text， text是ul到li之间的回车或空格算为一个text文本节点 li是元素节点 所以输出才会得到text,li,text， --> <ul> <li>子一级</li> </ul> <script> var ul = document.querySelector('ul') console.log(ul.childNodes) /*Nodelist(3)[ text, li, text] 0: text 1: li 2: text length: 3 [ [Prototype]]: NodeList*/ </script></body> -
children：获取某个节点下的所以子一级的元素节点
-
firstChild：获取某节点下的子一级的第一个节点
-
lastChild：获取某节点下子一级的最后一个节点
-
firstElementChild：获取某节点下子一级的第一个元素节点
-
lastElementChild：获取某节点下子一级的最后一个元素节点
-
nextSibling：获取某节点下的下一个兄弟节点
-
previousSibling：获取某节点下的上一个兄弟节点
-
nextElementSibling：获取某节点的下一个元素节点
-
previousElementSibling：获取某节点的上一个元素节点
-
parenNode：获取某节点的父节点元素
-
attributes：获取某元素节点的所有属性节点
节点属性
nodeType
nodeType：获取节点的节点类型
1表示元素节点、2表示属性节点、3表示文本节点、8表示注释节点
nodeName
nodeName：获取节点名称
元素节点（大写标签）、属性节点（属性名）、文本节点（#text）、注释节点（#comment）
nodeValue
nodeValue：获取节点值
元素节点：null、属性节点：属性值、文本节点：文本内容、注释节点：注释
总结
| nodeType | nodeName | nodeValue | |
|---|---|---|---|
| 元素节点 | 1 | 大写标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
| 注释节点 | 8 | #comment | 注释内容 |
操作DOM节点
创建一个节点
| 语法 | 返回值 | |
|---|---|---|
| 创建元素节点 | document.createElement(标签名) | DOM元素节点 |
| 创建文本节点 | document.createTextNode(文本内容) | 文本内容 |
向页面中加入一个节点
向节点内的后面位子插入节点
父节点.appendChild(要插入的子节点)
向一个节点前插入一个节点
节点.insertBefore(要插入的节点，节点A)在节点A前面插入一个节点
删除页面中的某一个节点
父节点.removeChild(要删除的元素节点)
修改页面中的某一个节点
父节点.replaceChild(新节点，旧节点)
克隆页面中的节点
节点.cloneNode(参数)
参数默认为false，返回值为克隆的节点（不包含该节点的子节点）
当参数为true时，返回值为克隆的节点（包含子节点）
获取元素的非行间样式
getComputedStyle()
/所有样式都能获取(不兼容低版本IE)
语法：window.getCoputedStyle(元素，参数).样式名
参数可以不写、参数：after/brfore，可获取元素伪类的样式
currentStyle
与getComputedStyle作用相同，区别在于能否currentStyle能兼容低版本IE
语法：元素.currentStyle.样式
获取元素的偏移量
offsetLeft和offsetTop
分别是获取左边和上边的偏移量
没有定位的时候时相对页面偏移的。
在定位的时候是相对父级元素的偏移
offsetWidth和offsetHeight
获取元素的宽高，为内容宽高+padding+border
扫一扫
2058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
