DOM节点（节点查找、节点创建、节点克隆、节点删除）

最新推荐文章于 2023-03-22 14:24:33 发布

白泽的笔记

最新推荐文章于 2023-03-22 14:24:33 发布

阅读量258

点赞数

文章标签： java 前端 javascript html

本文链接：https://blog.csdn.net/m0_51024444/article/details/126310005

版权

文档中所有的内容都是节点，节点是dom的最小组成单元

dom节点的基本属性

节点: nodeType nodeName nodeValue

元素节点 1 元素名 null

属性节点 2 属性名属性值

文本节点 3 #text 文本内容

<body>
    <ul id="list">
        <li id="con">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("list");//元素节点对象
    var oLi = document.getElementById("con");//元素节点对象
    var oAttr = oUl.getAttributeNode("id");//属性节点对象
    // alert(oAttr)
    // console.log(oAttr.nodeType);//2
    // console.log(oAttr.nodeName);//id  属性节点的名称 属性名
    // console.log(oAttr.nodeValue);//list  属性节点的值 属性值


    // alert(oLi.firstChild);//文本节点
    console.log(oLi.firstChild.nodeType);//3  文本节点 
    console.log(oLi.firstChild.nodeName);//#text  文本节点 
    console.log(oLi.firstChild.nodeValue);//列表1


    // alert(oUl)
    // console.log(oUl.nodeType);// 1   节点类型
    // console.log(oUl.nodeName);// UL  节点名称
    // console.log(oUl.nodeValue);// null  节点值

</script>

1.节点查找

父子之间（parentNode）

<body>
    <ul id="list">
        <li id="con">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("list");
    console.log(oUl.firstChild);//ul里第一个子节点  可能会遇到文本节点
    console.log(oUl.firstElementChild);//ul的第一个元素节点

    console.log(oUl.lastChild);//ul里最后一个子节点  可能会遇到文本节点
    console.log(oUl.lastElementChild);//ul的最后一个元素节点

    console.log(oUl.childNodes);//查找ul里的所有的子节点  7
    console.log(oUl.childNodes.length);// 7  子节点的个数

    console.log(oUl.children);//查找ul里的所有的子元素节点
    console.log(oUl.children.length);//3

    console.log(oUl.parentNode);//查找ul的父节点
    console.log(oUl.parentElement);



</script>

兄弟之间（同级间查找）

同级间查找

节点.nextSibling 查找下一个兄弟节点可能会查找到文本节点

节点.nextElementSibling 查找下一个元素兄弟节点

节点.previousSibling 查找前一个兄弟节点可能会查找到文本节点

节点.previousElementSibling 查找前一个元素兄弟节点

<body>
    <ul id="list">
        <li>列表1</li>
        <li id="con">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oLi = document.getElementById("con");
    // console.log(oLi.nextSibling);
    // console.log(oLi.nextElementSibling);

    console.log(oLi.previousSibling);
    console.log(oLi.previousElementSibling);

</script>

2.节点创建

创建元素节点：

document.createElement(标签名)

创建文本节点：

document.createTextNode(文本内容)

在父节点的内部最后追加子节点对象

父节点对象.appendChild(子节点对象)

父节点对象.append(参数)

参数：节点对象或字符串

<script>
    var oDiv = document.createElement("div");//创建了一个div元素对象
    // oDiv.innerHTML = "hello";
    var oText = document.createTextNode("hello");
    oDiv.appendChild(oText);
    // console.log(oText);
    // console.log(oDiv);
    // alert(oDiv);

    // document.body.appendChild(oDiv);

    // document.body.append(oDiv)
    document.body.append("hdhhdhdhdh")

</script>

<body>
    <ul id="list"></ul>
    <!-- <div id="box">
        hello world
    </div>
    <span id="con">hello span</span> -->
</body>
<script>
    var oUl = document.getElementById("list");
    var frag = document.createDocumentFragment();//创建一个文档片段
    // console.log(frag.nodeType);//11
    for (var i = 0; i < 3; i++) {
        var oLi = document.createElement("li");
        frag.appendChild(oLi);
    }
    oUl.appendChild(frag)


    // 创建文档片段
    // document.createDocumentFragment() 
</script>

    属性操作：
    查看属性值   dom对象.getAttribute(属性名)
    设置属性     dom对象.setAttribute(属性名, 属性值)
    删除属性     dom对象.removeAttribute(属性名)

<body>
    <div id="box" a="10">hello world</div>
</body>
<script>
    var oDiv = document.getElementById("box");
    // console.log(oDiv.getAttribute("id"));//通过属性名 获取 属性值
    // console.log(oDiv.id);//通过属性名 获取 属性值

    // console.log(oDiv.getAttribute("a"));//
    // console.log(oDiv.a);//undefined

    // oDiv.setAttribute("title", "这是一个div");
    // oDiv.title = "hhhhhh";
    // oDiv.setAttribute("b", "100");
    // oDiv.b = "hhhhhh";

    oDiv.removeAttribute("a")

    // <ul>
    //     <li>12</li>
    //     <li>33</li>
    //     <li>344</li>
    //     。。。。
    // </ul >

    // 点击li 显示 点击的是第几个li


</script>

3.节点克隆

克隆节点：

节点对象.cloneNode(参数)

参数：可选布尔值默认false 是否克隆后代

若省略则为false，仅克隆元素本身，不克隆后代，若为true，会克隆自身与后代

插入节点：

父节点对象.insertBefore(新节点, 老节点)

在父节点的内部把新节点插入到老节点的前面

<body>

    <div id="box">
        hello world
        <p>hhhh</p>
    </div>
    <span id="con">hello span</span>
</body>
<script>
    var oDiv = document.getElementById("box");
    var oSpan = document.getElementById("con");
    var oP = oDiv.lastElementChild;//查找div里的最后一个子元素 p

    //克隆span
    // var c = oSpan.cloneNode(false);
    var c = oSpan.cloneNode(true);
    c.setAttribute("id", "con2")
    // console.log(c);

    oDiv.insertBefore(c, oP);

</script>

4.删除节点

<body>
    <div id="box">hello world</div>
</body>
<script>
    var oDiv = document.getElementById("box");

    // var oImg = document.createElement("img");
    // oImg.src = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";

    // document.body.replaceChild(oImg, oDiv);

    // document.body.removeChild(oDiv);

    oDiv.remove();

</script>