添加/替换元素内容

书写格式 ：元素节点.innerText

书写格式 ：元素节点.innerHTML

//替换内容 let divEle = document.querySelector("div"); divEle.innerText = "文本"; //无法识别标签 例如："<span>123</span>" 不会识别span 以字符串加入div divEle.innerHTML = "添加内容" //可以识别标签 可以识别到span //添加内容吧赋值符号“=”改为“+=”即可

添加元素节点

书写格式 ：元素节点.appendChild(被添加的节点);

注：（如果操作的节点是已经存在的，则会调整这个节点的位置）

let pEle = document.createElement("p"); //创建元素节点 let pText = document.createTextNode("f70") //创建文本节点 pEle.appendChild(pText); //讲文本节点添加到元素节点中 let footerEle = document.getElementsByTagName("footer")[0]; //获取被添加元素节点 footerEle.appendChild(pEle); //加入新元素

插入节点

书写格式 ：olEle.insertBefore（参1，参2）

参数1是要插入的节点 参数2是代表在参数2前面插入该节点

注：如果参数1是已经存在的标签，则功能就是调整标签的位置

let liEle = document.createElement("li");//创建插入元素节点（或者获取需要更改的元素） liEle.innerText= `a`; //添加插入元素节点的元素内容 let olEle = document.getElementsByTagName("ol")[0]; //获取插入父元素 let inEle3 = document.querySelector("ol>li:nth-of-type(3)"); //获取在谁前面插入 olEle.insertBefore(liEle,inEle3); //在父元素内，在参数2前面添加参数1

删除节点

书写格式 ： 节点.remove（）；

注：如果节点有子节点或后代元素会一同删除

spanEle.remove(); spanEle.parentNode.remove();

克隆节点

书写格式：节点.clone (T/F) ;

当参数是false 浅克隆 只拿标签

当参数是true 深克隆 拿到子节点

let spanEle = document.querySelectorAll("span")[1]; let pEle = spanEle.parentNode; let secEle = document.querySeletor("section");//需要添加的父元素 let newNode = spanEle.cloneNode(true);//克隆span 深克隆 secEle.appendChild(newNode); secEle.appendChild(spanEle.cloneNode(false));//克隆span 浅克隆

替换节点

书写格式：父节点.replace（替换节点，被替换节点）

注：如果参数1是已经存在的标签，则功能就是调整标签的位置

let pEle = document.getElementsByTagName("p")[1]; let spanEle = document.createElement("span"); let spanText = document.createTextNode("ABC"); spanEle.appendChild(spanText); pEle.parentNode.replaceChild(spanEle, pEle);

设置节点的样式

书写格式：元素节点.style.CSS属性名=“属性值”;

注：如果属性名有短横线链接 如font-size 需要写成小驼峰命名方式的属性名：fontSize

divEle.clientWidth;//内部样式 获取宽高 divEle.style.backgroundColor = `css属性值`;//设置、更改样式

属性节点

查找属性： 元素节点.hasAttribute(“属性名”); 返回T/F

获取属性节点值： 属性节点.getAttribute(“属性名”); 返回对应的属性值，若有多个值返回类数组

设置属性节点： 元素节点.setAttribute(“属性名”，“属性值”); 可以设置或者替换

删除属性节点： 元素节点.removeAttribute(“属性名”); 删除属性

属性节点的快速设置：

元素节点.属性名=“属性值”；

class属性快捷设置

divEle.className; //快速获得所有，可更改 返回string divEle.classList; //获得所有类名，以类数组返回 divEle.classList.add.add //快速在原有的类名上新增类名 可以多次添加 因为每次返回添加后的classList divEle.classList.contains //查找某个类名是否存在 `spanEle.classList.toggle("属性值");` //添加或者删除类名 如果该类名存在 则删除类名返回false 如果不存在，则添加这个类名返回true

自定义属性节点

`书写格式：html中：data-属性名=“属性值” JS中：节点名.dateset.自定义名字` divEle.dataset.abc = "123"; //html: data-abc="123"