adong搬砖

导航

dom操作

节点类型

元素类型 元素节点 属性节点 文本节点 注释节点
nodeName 大写标签名 属性名 #test #comment
nodeType 1 2 3 8
nodeValue null 属性值 文本内容 注释内容

获取节点

<body>
    <ul>    
        <!-- 注释 -->
        <li>1</li>
        <li id="i1" class="c1">2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var ul = document.querySelector("ul")
        var li = document.querySelector("ul>li:nth-child(3)")
        var l1 = document.querySelector(".c1")
        //获取元素的所有子节点 childNodes
        console.log(ul.childNodes);
        //获取元素的所有子元素节点 children
        console.log(ul.children);
        //获取第一个子节点 firstChild
        console.log(ul.firstChild);
        //获取第一个子元素 firstElementChild
        console.log(ul.firstElementChild);
        //获取最后一个子节点 lastChild
        console.log(ul.lastChild);
        //获取最后一个子元素节点 ul.lastElementChild
        console.log(ul.lastElementChild);
        //获取哥哥节点 previousSibling 
        console.log(li.previousSibling);
        //获取哥哥元素 previousElementSibling
        console.log(li.previousElementSibling);
        //获取弟第节点 nextSibling
        console.log(li.nextSibling);
        //获取弟弟元素 nextElementSibling
        console.log(li.nextElementSibling);
        //获取所有的属性节点
        console.log(l1.attributes);
        //获取父节点
        console.log(l1.parentNode);
        //获取父元素
        console.log(l1.parentElement);
    </script>
</body>

操作节点1

<body>
    <ul>
        <li>111</li>
    </ul>
    <script>
        var ul = document.querySelector("ul")
        //创建文本节点
        var res = document.createTextNode("你好!")
        console.log(res);
        //创建元素节点
        var li = document.createElement("li");
        li.innerHTML = "张三"
        console.log(li);

        //添加节点
        ul.appendChild(li) //让你刚刚创建li节点,变成ul的孩子,appendChild => 追加,就是放在最末尾


        var l1 = document.createElement("li")
        l1.innerHTML = "我是捡来的,但是我是老大"
        //插入节点
        ul.insertBefore(l1,ul.firstElementChild)


        // 获取节点
        var l2 = document.querySelector("ul>li:nth-child(2)")
        // console.log(l2);
        l2.remove();

        // console.log(document.documentElement);
        // 让HTML自杀
        // document.documentElement.remove();
        
        // 让body删除
        // document.body.remove()

        //删除 父节点.removeChild(子节点)
        ul.removeChild(ul.firstElementChild)
    </script>
</body>

操作节点2

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector("ul")
        var li = document.createElement("li")
        li.innerHTML = "张三"

        //使用replaceWith进行替换节点
        // ul.firstElementChild.replaceWith(li)

        //使用replaceChild替换元素
        // ul.replaceChild(li,ul.lastElementChild)

        var res = ul.cloneNode() //只能克隆自己
        var res1 = ul.cloneNode(true) //可以克隆自己包含子节点
        console.log(res);
        console.log(res1);

        //将ul有子元素的克隆一份,扔到body里面去
        document.body.appendChild(res1)
    </script>
</body>

posted on 2026-02-04 20:39  adong搬砖  阅读(0)  评论(0)    收藏  举报