JavaScript 中的 dom 操作

        页面加载，Html 会通过html 编译器，将HTML编译成DOM tree， Css  同样通过css 编译器将css编译成css语法，两者通过结合，生成文档layout，生成渲染形成页面。HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

---

DOM树（一切都是节点）：DOM的数据结构如下：

DOM tree

S中的父子兄访问关系：

dom 之间关系

DOM节点操作（重要）：

插入节点： 父节点.appendChild(新的子节点);

删除节点： 父节点.removeChild(子节点);

复制节点（clone 节点）： 复制节点.cloneNode(true/false) // false 只复制节点本身，true 复制子节点。

获取节点属性：获取元素+属性、素节点.getAttribute("属性名称"); 

设置节点属性：获取元素+属性 = “属性值”  、元素节点.setAttribute("属性"， 属性值)

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