DOM节点操作

最新推荐文章于 2024-07-11 17:17:41 发布

FG.

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量164

点赞数 1

分类专栏： Web APIs 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_54418006/article/details/122451895

版权

Web APIs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

节点概述

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeValue 为 3（文本节点包含文字、空格、换行等）
主要操作是元素节点

2. 节点层级

利用DOM树可以把节点划分为不同层级关系，常见的是父子兄层级关系。
1. 父级节点

nodeparentNode

parentNode属性可返回某结点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

    <div class="demo">
        <div class="box">
            <span class="fg">x</span>
        </div>
    </div>
    <script>
        //1. 父节点 parentNode
        var fg = document.querySelector('.fg');
        //得到的是离元素最近的父级节点 如果找不到就返回为null
        console.log(fg.parentNode);
    </script>

2. 子节点

1. parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以一般不提倡使用childNodes

var ul = document.querySelector('ul');
for (var i = 0; i < ul.childNodes.length; i++) {
      if (ul.childNodes[i].nodeType === 1) {
           //ul.childNodes[i]是元素节点
           console.log(ul.childNodes[i]);
      }
}

2. parentNode.children (非标准)

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此可以使用。

<body>
    <div>div</div>
    <span>span</span>
    <ul>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
    </ul>
    <ol>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
    </ol>
    <div class="demo">
        <div class="box">
            <span class="fg">x</span>
        </div>
    </div>
    <script>
        //2.子节点 所有子节点包含元素节点 文本节点等
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        //children 获取所有的子元素节点
        console.log(ul.children);
    </script>
</body>

在这里插入图片描述

3. parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null，同样也是包含所有的节点

4. parentNode.lastChild

5. parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null。

6. parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null。
这两种方法有兼容性问题，ie9以上才支持。

<body>
    <ol>
        <li>1i</li>
        <li>1i</1i>
        <li>1i</1i>
        <li>1i</1i>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        //1.firstChild第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        //2.firstElementChild返回第一个子元素节点
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        //3．实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

在这里插入图片描述

3. 兄弟节点

1. node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。

2. node.previousElementSibling

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
注意：ie9以上才支持

<body>
    <div></div>
    <span></span>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>

在这里插入图片描述
可以封装一个函数解决兼容性问题

function getElementSibling(element) {
     var el = element;
     while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
     }
     return null;
}

4. 创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
5. 添加节点

1. node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的 after 伪元素

2. node.insertBefore(child,指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        //1.创建节点元素节点
        var li = document.createElement('li');
        //2.添加节点  node父级  child子级 后面追加元素 类似于数组的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        //3. 添加节点
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
    </script>
</body>

在这里插入图片描述

6. 删除节点

node.removeChild(child)

node.removeChild() 方法从DOM中删除一个子节点并返回删除的节点。

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        //1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //2.删除元素
        // ul.removeChild(ul.children[0]);
        //3.点击按钮依次删除里面的孩子
        btn.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

在这里插入图片描述
7. 复制节点

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本，也称克隆节点/拷贝节点。
注意：
1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2.如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点。

   <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

8. 三种动态创建元素区别

document.write()
element.innerHTML
document.createElement()

<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        /*   window.onload = function () {
              document.write('<div>123</div>');
          } */
        //三种创建方式的区别
        /*       //1.document.write()
              var btn = document.querySelector('button');
              btn.onclick = function () {
                  document.write('<div>123</div>');
              } */
        //2.innerHTML
        var inner = document.querySelector('.inner');
        //inner.innerHTML = '<a href="#">百度</a>';
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>';
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        //3.document.createElement()
        var create = document.querySelector('.create');
        //  var a = document.createElement('a');
        //  create.appendChild(a); 
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>
</body>

在这里插入图片描述

区别：

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高(不要拼接字符，采取数组形式拼接)，结构稍微复杂
createElement() 创建多个元素效率稍微低一点，但是结构更清晰

不同浏览器下，innerHTML 效率比 createElement 高

FG.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM节点操作

节点概述一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeValue 为 3（文本节点包含文字、空格、换行等）主要操作是元素节点2. 节点层级利用DOM树可以把节点划分为不同层级关系，常见的是父子兄层级关系。1. 父级节点nodeparentNodeparentNode属性可返回某结点的父节点，注意是最近的一个父节点如果
复制链接

扫一扫