DOM节点

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

document表示每个文档的根节点，根节点中有一个子节点，称为文档元素（documentElement），每个文档只能有一个文档元素。

在HTML页面中，文档元素始终是<html>元素。在XML文档中，任何元素都可能称为文档元素。

nodeName 和 nodeValue

保存着有关节点的信息。

childNodes

每一个节点都有一个childNodes属性，其中包含一个NodeList的实例。NodeList是一个类数组对象，用于存储可以按位置存取的有序节点，并且NodeList是实时获取的。

// 两种访问方式
el.childNodes[0];
el.childNodes.item(0);
// 可以获取长度
el.childNodes.length;

将类数组转变为数组：

// 第一种
Array.prototype.slice.call(el.childNodes, 0);
// 第二种（ES6）
Array.from(el.childNodes);

parentNode

每个节点都有一个parentNode属性，指向其DOM树中的父元素。

<div>文本</div>
<script>
    console.log(document.querySelector('div').nodeName) // DIV
    // 对元素而言，nodeName始终等于元素的标签名，而nodeValue则始终为null。
    console.log(document.querySelector('div').nodeValue) // null
    console.log(document.querySelector('div').childNodes[0].nodeName) // #text
    console.log(document.querySelector('div').childNodes[0].nodeValue) // 文本
</script>

previousSibling 和 nextSibling

使用previousSibling和nextSibling可以在childNodes节点列表间导航。节点列表中第一个节点的previousSibling属性是null，最后一个节点的nextSibling属性也是null。

firstChild 和 lastChild

firstChild和lastChild分别指向childNodes中的第一个和最后一个子节点。

hasChildNodes()

改方法检查是否包含子节点。

ownerDocument

指向document。

appendChild()

用于在childNodes列表末尾添加节点。如果把文档中已经存在的节点传给appendChild()，则这个节点会从之前的位置被转移到末尾。

el.appendChild(newEl);

insertBefore()

接收两个参数：要插入的节点和参照节点。作用是把要插入的节点放到参照节点之前，如果参照节点是null，则insertBefore()与appendChild()效果相同。

el.insertBefore(newEl, el.firstChild);

replaceChild()

接收两个参数：要插入的节点和要替换的节点。

el.replaceChild(newEl, el.firstChild);

removeChild()

移除节点。

el.removeChild(el.firstChild);

cloneNode()

返回与调用它的节点一模一样的节点。接收一个布尔值参数，表示是否深复制。在传入true参数时，会进行深复制，即复制节点及其整个子DOM树。如果传入false，则只会复制调用该方法的节点。默认false。

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>
<script>
	// [text, li, text, li, text, li, text]
    console.log(document.querySelector('ul').cloneNode(true).childNodes)
    // []
    console.log(document.querySelector('ul').cloneNode().childNodes)
</script>