DOM节点
目录
nextSibling 与 nextElementSibling
previousSibling 与 previousElementSibling
firstChild 与 firstElementChild
DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
节点
节点类型
节点包括：标签节点，属性节点，文本节点和注释节点；
节点类型包括： nodeType , nodeName, nodeValue;
|
| nodeType | nodeName | nodeValue |
| 标签 | 1 | 标签名 | null |
| 属性 | 2 | 属性名 | 属性值 |
| 文本 | 3 | #text | 文本的内容 |
| 注释 | 8 | #comment | 注释的内容 |
节点设置与获取
children 与 childNodes
children:
- children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。
- 提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。
childNodes:
- childNodes 属性返回包含被选节点的子节点的 NodeList。
- 提示： 如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。如需循环子节点列表，使用 nextSibling 属性，要比使用父对象的 childNodes 列表效率更高。
children 属性与 childNodes 属性的差别：
- childNodes 属性返回所有的节点，包括文本节点、注释节点；
- children 属性只返回元素节点；
nextSibling 与 nextElementSibling
nextSibling:
- nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。
- 返回节点以节点对象返回。
- 注意： 如果元素紧跟后面没有节点则返回 null.
nextElementSiblings:
- nextElementSibling 属性返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
- nextSibling 属性与 nextElementSibling 属性的差别：
- nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
- nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
- nextElementSibling属性为只读属性。
previousSibling 与 previousElementSibling
previousSibiling
- previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）
- 返回节点以节点对象返回。
- 注意：如果没有此节点，那么该属性返回 null。
previousElementSibiling
- previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
- previousElementSibling 属性为只读属性。
previousSibling 属性与 previousElementSibling 属性的差别：
- previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
- previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；
firstChild 与 firstElementChild
firstChild
- firstChild 属性返回被选节点的第一个子节点。
firstElementChild
- 只读属性，返回对象的第一个子
元素, 如果没有子元素，则为null。 - 返回指定元素的第一个子元素
firstChild与firstElementChild之间的区别
- firstChild将第一个子节点作为元素节点，文本节点或注释节点（取决于哪个是第一个）返回
- firstElementChild将第一个子节点作为元素节点返回（忽略文本）和注释节点）。此属性是只读的。
lastChild 与 lastElementChild
lastChild
- 返回指定元素的最后一个子元素。
lastElementChild
- 返回指定元素的最后一个子元素。
lastChild与lastElementChild的区别
- lastChild将最后一个子节点作为元素节点，文本节点或注释节点（取决于哪个节点）返回
- lastElementChild将最后一个子节点作为元素节点返回（忽略文本和注释节点）。此属性是只读的。
操作节点API
cloneNode
- cloneNode() 方法可创建指定的节点的精确拷贝。
- cloneNode() 方法 拷贝所有属性和值。
- 该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点
<body>
<div class="box">
<div class="taizhou">NBA-湖人</div>
<ul class="liebiao">
<li>勒布朗</li>
<li>戴维斯</li>
<li>格林</li>
<li>布拉德利</li>
<li>麦基</li>
</ul>
</div>
</body>
</html>
<script>
var box = document.getElementsByClassName("box")[0];
var cloneNodeEl = box.cloneNode();
var cloneNodeElTrue = box.cloneNode(true);
var cloneNodeElFalse = box.cloneNode(false);
console.log("cloneNodeEl",cloneNodeEl);
console.log("cloneNodeElTrue",cloneNodeElTrue);
console.log("cloneNodeElFalse",cloneNodeElFalse);
</script>输出结果如下：
appendChild
- appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
- 你可以使用 appendChild() 方法移除元素到另外一个元素。
insertBefore
- insertBefore() 方法可在已有的子节点前插入一个新的子节点。
- 提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。
- 你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。
replaceChild
- replaceChild() 方法可将某个子节点替换为另一个。
- 新节点可以是文本中已存在的，或者是你新创建的。
removeChild
- removeChild() 方法可从子节点列表中删除某个节点。
- 如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
<body>
<div class="box">
<div class="taizhou">NBA-湖人</div>
<ul class="sflb">
首发
<li>勒布朗</li>
<li>戴维斯</li>
<li class="glin">格林</li>
<li>布拉德利</li>
<li>麦基</li>
</ul>
<ul class="tblb">
替补
<li>霍华德</li>
<li>朗多</li>
<li>库兹马</li>
<li>卡莱索</li>
<li>波普</li>
</ul>
<div>
<input type="button" value="appendChild" onclick="appendChildClick()">
<input type="button" value="insertBefore" onclick="insertBeforeClick()">
<input type="button" value="replaceChild" onclick="replaceChildClick()">
<input type="button" value="removeChild" onclick="removeChildClick()">
</div>
</div>
</body>
</html>
<script>
var box = document.getElementsByClassName("box")[0];
var tz = document.getElementsByClassName("taizhou")[0];
var glin = document.getElementsByClassName("glin")[0];
var sflb = document.getElementsByTagName("ul")[0];
var tblb = document.getElementsByTagName("ul")[1];
var bop = tblb.lastElementChild;
function appendChildClick(){
sflb.appendChild(bop)
}
function insertBeforeClick(){
sflb.insertBefore(bop,glin)
}
function replaceChildClick(){
sflb.replaceChild(bop,glin)
}
function removeChildClick(){
sflb.removeChild(glin)
}
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
