操作dom

news/2024/10/31 3:20:43/

1-获取元素

通过id、name、className属性获取，通过tagName获取；
通过id获取的是元素列表第一个；通过name属性获取的是NodeList；通过className和tagName获取的是HTMLCollection

let son1 = document.getElementById("son")
let son2 = document.getElementsByName("son")[0]
let son3 = document.getElementsByClassName("son")[0]
let son4 = document.getElementsByTagName("son")[0]

通过querySelector和querySelectorAll获取

let son = document.querySelector("#son")
let son = document.querySelectorAll(".son")
let son = document.querySelectorAll("div .son")

NodeList和HTMLCollection的区别

元素的children属性和childNodes属性的区别根本上也是这两个的区别；
NodeList和HTMLCollection不是文档树历史状态的快照，而是反映DOM树的实时状态；
而这两个都是类数组结构，不能直接使用数组的函数；可以通过
1-Array.from2-扩展运算符3-call和bind
转换为数组元素后，使用对应的函数；但是这样它们也就记录的是DOM树历史状态，无法实时反映DOM树状态；
相同点：都是类数组对象，具有length属性，可以通过call、bind转换成真正的数组；
都有一个item函数，通过索引获取节点；
DOM树的状态会实时反映到这些类数组对象中，只是在一些函数返回结果中有差异；比如querySelector返回的NodeList是DOM树的历史状态快照；所以

let list1=querySelector("li");
console.log(list1.length)//5
let list2=querySelector("li");
let text=querySelector("p");
list2.appendChild(text)
console.log(list1.length)//5

区别：
HTMLCollection还有一个namedItem函数，传入idname或者className可以获取对应的元素；只包括有标签名的元素节点，NodeList还包括文本节点；

2-向文档中添加元素

DOM文档树中存在三种节点，元素节点（有标签名的节点）、文本节点、属性节点；

1-添加节点

获取元素——》新建节点（元素、属性、文本）——》添加节点到指定元素位置

//获取元素let root = document.querySelector("#root")//新建节点//新建元素节点let newDiv1 = document.createElement("div")//为元素新增属性方法1：create+set//新建属性节点let attr = document.createAttribute("class")attr.value = "son"//将属性节点和元素节点绑定newDiv1.setAttributeNode(attr)//为元素新增属性方法2:set(key,value)newDiv1.setAttribute("name", "root")//新建文本节点let text = document.createTextNode("hello,i am yyy")//为元素节点新增文本节点，是父子关系newDiv1.appendChild(text)//将新增节点加入元素里面root.appendChild(newDiv1)let newDiv2 = document.createElement("span")let text2 = document.createTextNode("我是老大")newDiv2.appendChild(text2)//使用appendChild默认添加到NodeList末尾；//使用insertBefor会添加到NodeList某个节点前面；root.insertBefore(newDiv2, newDiv1)

2-删除节点

//删除节点//删除属性节点removeAttributeconsole.log(root.children[1])root.children[1].removeAttribute("name")//删除元素节点1-获取节点2-removeChild(节点)//root中第二个元素节点let div01 = root.children[1];console.log(div01)//divlet son = div01.firstElementChild;console.log(son)//null：没有元素节点let son1 = div01.childNodes[0];div01.removeChild(son1);//删除文本节点1-同元素节点2-设置父节点.innerHTML=""