JS 节点关系以及节点操作

最新推荐文章于 2024-03-17 21:53:33 发布

原创最新推荐文章于 2024-03-17 21:53:33 发布 · 543 阅读

1 ·

CC 4.0 BY-SA版权

大前端专栏收录该内容

88 篇文章

订阅专栏

本文详细介绍了DOM中节点关系的获取方法，包括父节点、兄弟节点、子节点的选取，并对比了childNodes与children属性的不同。此外，深入探讨了节点操作如创建、插入、删除、复制节点的具体实现，以及如何进行属性的获取、设置与删除。这些知识点对于前端开发者理解和操作网页结构至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.节点关系

<script>
    window.onload = function () {
        var a = document.getElementsByTagName("a")[0];
        // 获取父节点
        var parentNode = a.parentNode.parentNode;




       var span = document.getElementById("span");
        // 下一个兄弟节点
        var next = span.nextElementSibling || span.nextSibling; //兼容性写法，一般用后者
        // 上一个兄弟节点
        var previous = span.previousElementSibling || span.previousSibling; //兼容性写法，一般用后者




        var box = document.getElementById("box");
        // 获取第一个子节点
        console.log(box.firstElementChild || box.firstChild);//兼容性写法，一般用后者

        // 获取最后一个子节点
        console.log(box.lastElementChild || box.lastChild);//兼容性写法，一般用后者
       // 获取所有子节点
        var allNodeList = box.childNodes;//获得一个数组
        var nodeList = box.children;//获得一个数组
        
    }
</script>

childNodes和children的区别：

childNodes：获取节点，不同浏览器表现不同；

　　IE：只获取元素节点；

　　非IE：获取元素节点与文本节点；

children：获取元素节点，浏览器表现相同。

　　因此建议使用children

二.节点操作

增删改查：

<script>
      window.onload = function () {
       var box = document.getElementById("box");

       // 1. 创建节点
       var img = document.createElement("img");
       img.src = "img/img1.jpg";

        //1.1插入节点（直接插入到末尾）
        box.appendChild(img);

        //1.2插入到指定位置
        var btn = document.getElementsByTagName("button")[0];
        box.insertBefore(img, btn);//插入到btn所对应节点前面



        // 2. 删除节点
        var btn = document.getElementById("btn");
        word.parentNode.removeChild(word); // 自杀
         btn.remove();

        //3.复制节点 新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
        var box = document.getElementsByClassName("box")[0];
        var newTag = box.cloneNode(true); 
        document.body.appendChild(newTag);
    }
</script>

属性操作：

<script>
    window.onload = function () {
        // 节点属性（节点.属性）
        var img = document.getElementsByTagName("img")[0];

        // 1. 获取：getAttribute(名称)
        console.log(img.getAttribute("src"));
        console.log(img.getAttribute("alt"));
        console.log(img.src);
        console.log(img.alt);

        // 2. 设置：setAttribute(名称, 值)
        img.setAttribute("src", "img/img2.jpg");
        img.setAttribute("alt", "图片");
   
       

        // 3. 删除：removeAttribute(名称)
        img.removeAttribute("src");
        img.removeAttribute("aaaa");
        img.removeAttribute("bbbb");
    }