DOM

最新推荐文章于 2024-05-29 14:49:47 发布

谭峰

最新推荐文章于 2024-05-29 14:49:47 发布

阅读量156

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_28292349/article/details/81463290

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

一、节点层次

1.Node类型

最常用的节点类型有：

节点类型	对应值
Node.ELEMENT_NODE	1
Node.TEXT_NODE	3

        var text = document.getElementById("text");
        var content = text.childNodes[0];

        console.log(text.nodeType == 1);  // true
        console.log(content.nodeType == 3);  // true

可以通过将节点的nodeType属性与类型值比较判断节点类型。

1.nodeName、nodeValue

对于元素节点，属性nodeName 返回标签名，nodeValue返回null

对于文本节点，属性nodeName 返回 "#text"，属性nodeValue返回文本内容

        console.log(text.nodeName);  // P
        console.log(text.nodeValue);  // null
        console.log(content.nodeName); // #text
        console.log(content.nodeValue);  // hello world!

2.节点间关系

childNodes：返回节点子节点集合的一个类数组对象，是基于DOM结构执行动态查询的结果，可以使用Array的原型方法slice转换为数组区别如下：

        var bodyNode = document.getElementById("box");
//        childNodes 是类数组对象，DOM动态查询结果
        var childList = bodyNode.childNodes;
//        第一次DOM查询结果的快照
        var childArr = Array.prototype.slice.call(childList, 0);

此后对于该节点的增删子节点操作会影响到 bodyNode，却不会影响 childArr

如果考虑到IE兼容性，可手动枚举nodeList的元素，将其添加到新数组来实现转换

parentNode：返回节点的父节点

nextSibling、previousSibling：返回节点的上/下一个同胞节点

3.操作节点

appendChild(node)：在子节点最后添加节点node

insertBefore(node, referenceNode)：在参考子节点referenceNode前添加节点node

replaceChild(node, replaceNode)：替换子节点 replaceNode 为节点node

注：以上方法如果node为文档中存在的节点，则这些方法相当于移动node至新位置

removeChild(node)：移除节点node

cloneNode(boolean)：拷贝节点，参数为true则为深拷贝，即拷贝以这个节点为初始节点的节点树，若参数为false，则只拷贝这层节点。这个方法只会拷贝节点的特性，并不会拷贝js属性（如某个节点的事件方法）