day12

DOM节点

节点：页面上所有的内容都可以称为节点，DOM的最小就是节点

 （标签：元素节点：nodeType 1）

（属性：属性节点:  nodeType   2）

（文本：文本节点：nodeType  3）

（注释：注释节点：nodeType  8）

（文档：文档节点：nodeType  9）

如何获取节点：通过节点关系（父子关系，兄弟关系）来获取

 父节点.firstChild:获取父元素的第一个子节点

节点.nextSibling:节点的下一个兄弟节点

节点.perviousSibling:节点的上一个兄弟节点

父节点.lastChild:父节点的最后一个子节点

节点.parentNode:节点的父节点

父节点.childNodes:获取所有的子节点（伪数据）

获取元素节点：

父节点.firstElementChild:获取父元素的第一个元素节点

节点.nextElementSibling:节点的下一个兄弟元素节点

节点.previousElementSibing:节点的上一个兄弟元素节点

父节点.lastElementChild:父节点的最后一个子元素节点

节点.parentElement:节点的父元素节点（兼容性不好，不用这个）

父节点.children:获取所有的子元素节点（伪数组）

DOM节点的操作：

<div id="box">
         <p>嘻嘻</p>
         <p>哈哈</p>
    </div>

     1.创建节点：

                语法：document.creatElemnt(' 标签名 ')

                 返回值：创建好的元素节点

代码例子

 var oBtn = document.createElement('button');
    console.log(oBtn);
    oBtn.innerText = '我是按钮'

    var oBox = document.getElementById('box')

      2.追加节点：

                 语法：父节点.aappendChild

                 含义：将子节点追加到父节点的尾部

                 列子：document.body.appendChild(子节点)

代码例子

oBox.appendChild(oBtn);//把创建好的oBtn添加到oBox中

      3.插入节点

                语法：父节点.insertBefore(子节点，谁的前面的谁)

                含义：将子节点插入到父节点的指定位置

                例子:oBox.insertBefore(oBtn,oBox.firstchild);将button插入到oBox的头部

代码例子

 //需求：将创建好的button插入到哈哈和嘻嘻中间
插入节点
父节点.children: 数组，所有的标签
oBox.insertBefore(oBtn,oBox.children[1])

      4.替换节点

                 语法：父节点.replaceChild(新节点，旧节点（位置）)不常用

代码例子

 替换节点  需求：把哈哈替换成btn
oBox.replaceChild(oBtn,oBox.children[1])

      5.删除节点

                 语法：父节点.removeChild（子节点）

                          节点.remove（）最常用

  代码例子

 删除节点 删除嘻嘻节点
oBox.children[0].remove();
oBox.removeChild(oBox.children[0])

       6.克隆节点

                 语法：节点.cloneNode(true/false)

                 作用：克隆出来一个节点

                          true:代表克隆元素本身和元素的子元素以及后台

                          false:代表克隆元素本身

代码例子

console.log(oBox.cloneNode(false));
console.log(oBox.cloneNode(true));