DOM节点，DOM属性与DOM对象的样式

DOM节点，DOM属性与DOM对象的样式

Document Object Model 文档对象模型
DOM是针对HTML和XML文档的一个API
DOM描绘了一个层次化的节点树
定义了访问和操作HTML文档的标准方法

回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建过程叫做回流(reflow)。
重绘
当render tree中的一些元素发生变化，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流。

什么会引起回流
当页面的布局和几何属性发生变化的时候就会引起回流。
dom树结构变化，比如删除或者添加某个node.
元素几何属性变化，包括margin,padding,height,width,border等
页面渲染初始化
浏览器窗口发生变化-resize事件发生时

HTMLDivElement//接口，可以看做数据类型，基于HTMLElement创作出来的，可以称他是HTMLDivElement的父类（超类）
HTMLDivElement–>HTMLElement–>Element–>Node(节点，类别更为基础的)–>EventTarget–>Object
HTMLDocument–>Document–>Node–>EventTarget–>Object

Window
属于Browser Object Molder浏览器对象模型，window是最顶级的
window.location
window.history
window.screen
window.document,产生了DOM模型
window.navigator

DOM和BOM 最大特征：适配

节点
HTML 文档中的每个成分都是一个节点。基本上看到的所有东西都叫节点

节点属性：
nodeName（节点名称）
元素节点的 nodeName 是标签名称 大写字母
文本节点的 nodeName 永远是 #text
注释节点的 nodeName 永远是 #comment
可以用来判断元素类型div1.nodeName==="DIV"与constructor相似

nodeValue（节点值）
文本节点，nodeValue 属性包含文本。
元素节点nodeValue不可用
注释节点nodeValue包括注释内容

nodeType（节点类型）
元素—1
属性—2
文本—3
注释—8
文档—9

获取Dom元素
document.getElementById()，根据标签id获取DOM元素
document.getElementsByTagName()根据标签名获取一类DOM元素
document.getElementsByName()根据标签name获取DOM元素
document.getElementsByClassName(新) 根据标签class获取DOM元素
document.querySelector(新，ie8以下不支持) 根据标签名获取第一个元素
document.querySelectorAll(新，ie8以下不支持) 获取所有标签名的元素

HTMLCollection列表，HTMLCollection只能存储的是HTML标签
NodeList节点列表，可以存储任意节点，包括有HTML标签，文本，注释等等

节点遍历
childNodes：所有子节点 获取所有子节点（包括注释），NodeList节点列表
children：所有是标签类型的子节点 获取所有子元素，HTMLCollection列表
parentNode：获取已知节点的父节点
firstElementChild : 第一个子节点 （元素）
firstChild : 第一个子节点
previousElementSibling：上一个兄弟节点
lastElementChild：最后一个子节点（元素）
lastChild：最后一个子节点
nextElementSibling：下一个兄弟节点（元素）
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点

创建节点
document.createElement(“标签名”) : 创建新元素
document.createTextNode("") : 创建文本节点

插入节点
appendChild(node) : 向childNodes末尾插入一个节点node
insertBefore(newElement,targetElement) : 向targetNode之前插入节点node

替换节点
replaceChild(newNode,oldNode) : newNode替换oldNode

删除节点
removeChild(node) : 移除父节点的某个子节点
remove()：移除当前节点

复制节点
cloneNode(boolean) : 复制一个节点
如果是ture就是深复制，false就是浅复制
复制会将id等属性一起复制，需要复制后修改

案例：
// 碎片化处理添加DIV

<script>
      var div1 = document.getElementById("div1");
      var elem = document.createDocumentFragment(); //碎片容器,减少回流重绘
      for (var i = 0; i < 10; i++) {
        var div = document.createElement("div");
        div.innerHTML = i;
        elem.appendChild(div);
      }
      document.body.appendChild(elem);
    </script> 

// 工厂模式创建元素

<div id="div1"></div>

<script>
  function ce(type, style, parent, props) {
    var elem = document.createElement(type);
    if (style) Object.assign(elem.style, style);
    if (typeof parent === "string") parent = document.querySelector(parent);
    if (parent) parent.appendChild(elem);
    if (props) Object.assign(elem, props);
    return elem;
  }

  var div1 = document.getElementById("div1");
  var div = ce("div",
    {
      width: "50px",
      height: "50px",
      backgroundColor: "red",
    },
    div1,
    { id: "div1", className: "divs" }
  );

  var div = ce("div");
</script>