首页 > js代码 > js document 增加、删除、操作节点和子节点

js document 增加、删除、替换节点和子节点

DOM（Document Object Model）文档对象模型，是HTML和XML文档的编程接口，文档树可以快捷方便的操作整个html页面

一、创建节点

document.createElement()

使用document.createElement可以创建一个节点。注意此节点只在script上下文中生效，必须经过新增节点之后才会在页面中生效。

                 
                let div1=document.createElement("div);//创建一个div节点
                let div2 =document.createElement("p");//创建一个p节点
                //除此之外还可以创建文本节点和属性节点：
                let text3= document.createTextNode("hello world");//创建一个文本节点
                div1.appendChild(text3);//给节点添加文本子节点
                let attributeEle= document.createAttributeNode("align");//创建一个align属性节点
                attributeEle.value = 'center';//给属性节点赋值，align:center
                div1.setAttributeNode(attributeEle);//给节点添加属性节点

二、查找节点

document.getElementByxx选择器

`document.getElementById：id选择器，返回至多一个元素`

`document.getElementsByTagName：标签选择器，返回至htmlcollection`

`document.getElementsByClassName：class选择器，返回至htmlcollection`

`document.getElementByName：属性选择器，返回至htmlcollection`

                 
    //查找id为myId的节点元素，若不存在返回null
    let element=document.getElementById("myId);

    //使用children可以获取节点所有子节点
    let eleSons = element.children();

    //.查看标签为div的节点元素，返回节点数组
    let elements =document.getElementsByTagName("div);

    //如果上一条获取多个元素，找到第一个条里面id=myId的元素时，需要分开写
    let elements2=elements[0].getElementById("myId);

    //查找类名为myClassde节点元素，返回节点数组
    let elements1=document.getElementsByClassName("my-class");

    //通过属性名查找：
    //查找所有具有goods属性的节点，返回节点数组。属性查看下方节点内部属性
    let elements2=document.getElementsByName("goods");

2)、querySelctor选择器

querySelector/querySelctorAll参数需要加.或#，支持css选择器，常规用法：

                 

            //静态查找id名为myId的节点元素，若不存在返回null
            let element2=document.querySelector("#myId");
              
            //静态查找类名为myClass的节点元素，若查找到则返回第一个
            let element3=document.querySelector(".my-class");
              
            //静态查找类名为myClass的节点元素，返回节点数组
            let elements3 =document.querySelectorAll(".my-class");

            //返回具有name属性的第一个div
            let ele1= document.querySelector('div[name]');

            //返回class=my-class的第一个div
            let ele2= document.querySelector('div.my-class');
        
            //返回id=myId的第一个div
            let ele3= document.querySelector('div#myId');

嵌套使用：当我们需要获取某个元素下的某系子元素时

       
      //获取id=right-menu-new下所有标签为h2、h3的元素，注意这里不能使用 > 但是可以嵌套使用
       let nodes = document.querySelector("#right-menu-new").querySelectorAll(" h2,h3");

3)、docuement.getElementByxx 与querySelector选择器对比

主要区别是前者是静态获取，后者是动态获取，例如：

         
         let ul1 = document.getElementsByTagName("ul");
         //返回所有ul标签元素
let ul2 = document.querySelectorAll("ul"); 

ul1[0].appendChild(document.createElement("li"));

ul2[0].appendChild(document.createElement("li"));

let li1 = document.getElementsByTagName("ul li");

//返回所有ul标签元素
let li2 = document.querySelectorAll("ul li"); 

// 输出2 会获取最新的
console.log("ul1.length::" + li1.length); 

// 输出0 dom变化不会更新
console.log("ul2.length::" + li2.length);

因此只是获取不会去修改dom建议使用querySelector，如果需要操作dom，则使用getElementbyxx

4)、节点遍历

当页面有三个class=name的元素，分别使用以下几种方式进行遍历：

         
            let es = document.getElementsByClassName("name");
            let es1 = document.querySelectorAll(".name");
      
            try {
              //1、会出现异常
              es.forEach((element) => {
                console.log("11::::" + element.innerHTML);
              });
            } catch {}

            //2、可以进行遍历
            for (let i = 0; i < es.length; i++) {
              console.log("22::::" + es[i].innerHTML);
            }

            //3、不会出现异常
            es1.forEach((element) => {
              console.log("33::::" + element.innerHTML);
            });

            //4、不会出现异常
            for (let i = 0; i < es1.length; i++) {
                console.log("44::::" + es1[i].innerHTML);
            }

tips:当一次获取多个节点时候，我们需要逐个遍历，注意这时候的遍历方式。使用querySelector选择器不会出现异常，而getElementsByClassName 选择器使用forEach遍历则会出现异常，

因为getElementsByClassName返回的不是数组而是nodeList对象

三、添加节点

掌握以下常用的即可：

append

appendChild

insertBefore

prepend

                 

//承接上面的新增节点，在div2节点下尾部添加1个子节点div1，类似于css伪类:after
div1.appendChild(div2);

//与appendChild作用类似，但是append可以添加内容更多，appendChild只能添加dom节点
div1.append(div2);

let ele3 =document.createElement("p");

//在div1节点下的指定节点ele3的前面添加一个节点div2
div1.insertBefore(ele3,div2);

let ele4 =document.createElement("span");

//与appendChild/append相反，在div节点下头部添加1个子节点，类似于css伪类:before
div1.prepend(ele4);

四、删除节点

document.removeChild

document.remove

                   
//从div1这个节点下删除ID为myId的子节点 
div1.removeChild(document.getElementById("myId"));

或者

let ele = document.getElementById("myId");

ele.remove();//直接删除这个节点

五、操作节点内部属性

setAttribute

getAttribute

removeAttribute和attributes

                  
            let ele =document.querySelector("div");

            ele.setAttribute("class","abc");//添加class
            
            ele.setAttribute("id","myId");//添加ID
            
            ele.setAttribute("style","font-size:24px;border:1px solid grey");//添加样式属性
            
            ele.getAttribute("id");//获取id的属性值
            
            ele.removeAttribute("id");//去掉ID
            
            let eleArrtibures = ele.attributes;//返回节点的所有属性集合

六、节点内容

innerHTML

innerTEXT

                  
            let ele =document.getElementById("myId);

let html = ele.innerHTML;//返回节点开始和结束标签内部的所有html内容，包括标签；

let text = ele.innerTEXT;//返回节点中去除所有标签后的内容

ele.innerHTML="abc";//设置新的元素内部html内容，可以包含html内容

七、元素样式 class style

注意要将css中的样式由下划线改成驼峰形式

classList

style

                  
 
let ele =document.getElementById("myId);

console.log(ele.classList);//返回该元素的所有class

ele.classList.add("new-class");//给该元素新增一个class，如果没有也会新增一个

ele.classList.remove("new-class");//移除掉一个样式

ele.style.width="200px";//直接添加style

ele.style.backgroundColor="red";

ele.style.textAlign="center";

document更多操作：document操作大全