DOM（一）

最新推荐文章于 2022-03-12 15:41:17 发布

程序员青戈

最新推荐文章于 2022-03-12 15:41:17 发布

阅读量348

点赞数

文章标签： dom JavaScript

本文链接：https://blog.csdn.net/xqnode/article/details/55271218

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

节点层次

node类型

nodeType：每个节点都有一个nodeType 属性，用于表明节点的类型。

元素的nodeType为1。
属性的nodeType为2。
文本的nodeType为3。

if (someNode.nodeType == 1){ //适用于所有浏览器
    alert("Node is an element.");
}

nodeName 和nodeValue 属性
对于元素节点，nodeName 中保存的始终都是元素的标签名，而nodeValue 的值则始终为null。

if (someNode.nodeType == 1){
    value = someNode.nodeName; //nodeName 的值是元素的标签名
}

节点关系

每个节点都有一个childNodes 属性，其中保存着一个NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

将NodeList 对象转换为数组：

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

每隔节点都有parentNode 属性，该属性指向文档树中的父节点。通过使用列表中每个节点的previousSibling和nextSibling 属性，可以访问同一列表中的其他节点。

<body>
    <div>
        <p></p>
        <img src='...'/>
    <div>
</body>

p和img就是同胞元素。通过p的previousSibling是文本节点，因为空白属于文本节点。

父节点的firstChild 和lastChild属性分别指向其childNodes 列表中的第一个和最后一个节点。

节点关系图：

节点关系图

ownerDocument：每个元素的ownerDocument属性指向表示整个文档的文档节点，即document对象。

操作节点

appendChild()：用于向childNodes 列表的末尾添加一个节点。

insertBefore()：把节点放在childNodes 列表中某个特定的位置上。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。

replaceChild()：替换节点，接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

removeChild()：移除节点。

cloneNode：。复制节点，cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false 的情况下，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。例如：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

 var oU = document.getElementsByTagName('ul')[0];
 alert(oU.childNodes.length);//7
 var deepClone = oU.cloneNode(true);
 alert(deepClone.childNodes.length);//7
 var shallowClone = oU.cloneNode(false);
 alert(shallowClone.childNodes.length);//0