js操作DOM

javascript 有三部分构成，ECMAScript，DOM和BOM

DOM

JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
元素上的属性是属性节点
文档中的注释是注释节点

DOM本质 dom树

DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。
它很容易表明家族成员之间的关系，把复杂的关系简明地表示出来

DOM的操作

获取

通过id：getElementById
通过name：getElementByName
通过标签名：getElementByTagName
通过类名：getElementByClassName
通过选择器获取一个元素：querySelector
通过选择器获取多个元素：querySelectorAll
获取html标签：document.documentElement
获取body标签：document.body

创建

创建一个节点：document.createElement()；
创建一个文本节点：document.createTextNode()
创建一个DOM片段：createDocumentFragment() 飞哥门特

删除

只能通过父节点删除子节点
vnode.parentElement.removeChild(vnode);

修改

(只能父元素调用)
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

关系

childNodes // 获取所有的子节点
children // 获取所有的子元素节点 (常用)
firstElementChild 获取第一个元素
lastElementChild 获取最后一个元素
parentNode 获取当前节点的父节点
previousElementSibling 获取当前节点的前一个兄弟元素
nextElementSibling 获取当前节点的后一个兄弟元素