面试题十一：说说你对DOM的理解，常见的操作有哪些？常见的dom事件有哪些？

什么是dom？

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
DOM是针对HTML和XML文档的一个API（应用程序程序接口）。
DOM描绘了一个层次化的节点树（节点关系）。
它允许开发人员查找、添加、修改、删除页面的某一部分。

常见的操作主要有：

1.创建节点 
a.创建元素节点：createElement

let div = document.createElement("div");

b.创建文本节点：createTextNode

let txt = document.createTextNode("content");

c.创建属性节点：createAttribute
le

t attr = document.createAttribute("data-id");

d.创建文档片段对象：createDocumentFragment

let frag = document.createDocumentFragment();

2.查询节点

a.单节点选择器：querySelector，可以选择任意元素、class、id等选择的匹配到的第一个节点，有且只会选择一个，没有找到元素返回 null;

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

b.节点列表选择器:querySelectorAll，选择一个节点序列
    

 let pList = document.querySelectorAll("p")

c.ID选择器：getElementById
    

 let id = document.getElementById("box")

d.Class选择器：getElementsByClassName

let cla = document.getElementsByClassName("box")

e.元素选择器：getElementsByTagName

let pp = document.getElementsByTagName("p")

f.html文档选择：
 

document.documentElement

g.body选择器：

document.body

...

3.更新节点

a.innerHTML方法更新，可以修改节点内容，或添加新的html片段

document.getElementById("box").innerHTML = "节点更新"; 

b.innerText方法更新

document.getElementById("box").innerText = "节点更新";

c.textContent法更新
     

document.getElementById("box").textContent = "节点更新";

d.style更新节点样式

document.getElementById("box").style.color = "red"; 

4.添加节点

a.innerHTML新增节点

document.getElementById("box").innerHTML = "<p><a href="">节点更新</a></p>";

b.appendChild最后位置新增节点

let red = document.getElementById("red");
let blue = document.getElementById("blue");
blue.appendChild(red);  

c.insertBefore 已有子节点之前插入新的子节点

let node = document.getElementById("pp"); 
let list = document.getElementById("box");
list.insertBefore(node,list.childNodes[0]);

d.setAttribute 新增属性节点

document.getElementById('box').setAttribute('class', 'big');

5.删除节点

removeChild，通过父节点删除子节点

let node = document.getElementById("pp"); 
let list = document.getElementById("box");
list.removeChild(node);

DOM事件都有哪些？

1.onclick 当用户点击时执行
2.onload 当用户进入时执行
3.onunload 用用户离开时执行
4.onmouseover 鼠标指针移入时执行
5.onmouseout 鼠标指针移出时执行
6.onmousedown 鼠标摁下时执行
7.onmouseup 鼠标松开时执行
8.onblur 失去焦点时发生
9.onchange 值被改变时发生
...