js document 增加、删除、操作节点和子节点_html代码笔记

首页 > js/css/html > 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("div);//创建一个div节点

//除此之外还可以创建文本节点和属性节点：

let text3= document.createTextNode("hello world");//创建一个文本节点

div1.appendChild(text3);//给节点添加文本子节点

let attributeEle= document.createAttributeNode("align");//创建一个align属性节点

attributeEle.value = 'center';//给属性节点赋值，align:center

div1.setAttributeNode(attributeEle);//给节点添加属性节点

二、查找节点

使用document.getElementById、document.getElementsByTagName、document.getElementsByClassName、document.getElementByName、document.querySelector和document.querySelectorAll来查找节点。

<div>

</div>

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

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

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

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

//通过属性名查找：

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

//querySelector选择器：

let element2=document.querySelector("#myId");//静态查找id名为myId的节点元素，若不存在返回null

let element3=document.querySelector(".my-class");//静态查找类名为myClass的节点元素，若查找道则返回第一个

let elements3 =document.querySelectorAll(".my-class");//静态查找类名为myClass的节点元素，返回节点数组

注意关于querySelector与querySelectorAll 和getElementByxx 的主要区别是前者是静态获取，后者是动态获取，例如：

<div>

</div>

let ul1 = document.getElementsByTagName('ul');
let ul2 = document.querySelectorAll('ul')
ul1[0].appendChild(document.createElement('li'));
ul2[0].appendChild(document.createElement('li'));
console.log(ul1.length); // 输出0
console.log(ul2.length); // 输出2

</script>

当然querySelctor选择器参数需要加.或#

所以当我们不再动态修改document时候，推荐使用querySelector选择器，效率更高，否则则使用document.getElementByxx选择，保证每次操作都能被更新到文档

querySelector还有更多选择器

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

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

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

三、添加节点 ddocument.appendChild()、document.insertBefore()、document.preppend()

div1.appendChild(div2);//在div节点下尾部添加1个子节点，类似于css伪类:after

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

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

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

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

<div>

<p></p>

</div>

四、删除节点 document.removeChild()，document.remove()

div1.removeChild(document.getElementById("myId"));//从div1这个节点下删除ID为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="<span>abc</span>";//设置新的元素内部html内容

七、元素样式 style

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

let ele =document.getElementById("myId);

ele.style.width="200px";

ele.style.backgroundColor="red";

ele.style.textAlign="center";