DOM初始化

dom节点对象

html标签元素

    <h2 id="title">元素一</h2>

dom节点对象

        => 从dom角度，整个html文档就是一个对象(document文档对象),
        文档中每个标签元素，以及元素的内容，属性，样式都是节点对象

        => 节点对象分类
            (元素节点    文本节点  属性节点 )  doucment文档节点 注释节点

        => html文档结构
             树型结构

        => 节点关系
             父子关系 兄弟关系

获取节点对象

节点分类

      元素节点  文本节点   属性节点

获取节点对象

        1.  getElement系列
          getElementById()
             元素节点

        2. querySelector系列
         ele.innerHTML 

        3. 层次结构

           父节点  -> 所有子节点   childNodes
                   -> firstChild
                   -> lastChild

                  -> 元素子节点  children
                  -> firstElementChild
                  -> lastElementChild

            兄弟  -> nextElementSibling
                  -> parentElement

        4. 非常规节点

节点属性

          nodeType     nodeName      nodeValue
 元素节点    1          标签名大写       null
 属性节点    2          属性名          属性值
 文本节点    3          #text          文本内容

动态操作节点属性

创建dom节点

       document.createElement('div')   // <div></div>
       document.createTextNode('元素一')

添加dom节点

       父节点.appendChild(子节点)
       父节点.insertBefore(新子节点，原子节点)

删除节点

       父节点.removeChild(子节点)
       节点.remove()

替换节点

       父节点.replaceChild(新节点，原节点)

克隆节点

       节点.cloneNode()  
           true|false
           =>返回克隆的新节点