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

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

dom节点的基本属性

节点: nodeType nodeName nodeValue

元素节点 1 元素名 null

属性节点 2 属性名属性值

文本节点 3 #text 文本内容


<body>
    <ul id="list">
        <li id="con">列表1li>
        <li>列表2li>
        <li>列表3li>
    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">列表1li>
        <li>列表2li>
        <li>列表3li>
    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>列表1li>
        <li id="con">列表2li>
        <li>列表3li>
    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>
    
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(属性名)


    "box" a="10">hello world</div>
body>

3.节点克隆

克隆节点：

节点对象.cloneNode(参数)

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

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

插入节点：

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

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


<body>
 
    <div id="box">
        hello world
        <p>hhhhp>
    div>
    <span id="con">hello spanspan>
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 worlddiv>
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>

相关阅读:
从源码入手探究一个因useImperativeHandle引起的Bug
Qt 窗口与部署应用程序发布包 day6
微前端架构的理解
web server apache tomcat11-15-proxy
MATLAB实现卡尔曼滤波器仿真
node知识点（1）
axios的封装
腾讯云Java后端15连问（6年经验）：分布式+锁+MySQL+JVM+TCP
代码随想录算法训练营第三十七天| 860.柠檬水找零，406.根据身高重建队列，738.单调递增的数字
C++中sort()函数的greater＜int＞()参数

原文地址：https://blog.csdn.net/m0_51024444/article/details/126310005