操作dom

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-删除节点

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