操作DOM 和节点Dom

Dom
--父节点：parentNode

--子节点：
childNodes:  所有子节点
children: 所有事标签类型的子节点
firstChild: 第一个子节点
lastChild: 最后一个子节点

--兄弟节点：
nextSibling: 下一个兄弟节点
prevousSibling: 上一个兄弟节点

--属性节点
attributes
document.body.attributes[0];
document.body.attributes.color;
document.body.attributes["onload"];


DOM方法
--创建节点：
creatElement() 创建标签
createTextNode() 创建文本
creatAttribute() 创建属性节点
--插入节点
appendChild()在末尾插入  //box.appendChild(p);
insertBefore(new,xx) 在xx的前面插入  // box.insertBefore(p,last)
--删除：
 remove()直接删除
 removeChild()删除父节点的某子元素

 //let last = document.getElementById("last");
 //box.removeChild(last)

 --替换：
replaceChild(new,old）将谁的子节点old替换成new

 cloneNode ;克隆元素;

 接收一个布尔类型的参数；true,false ;如果不传参数，默认是false；

 // 浅克隆
 // 深克隆
 //console.log(box.cloneNode(true));
 //a.appendChild(box.cloneNode(true))


DOM属性
offsetHeight:带边框的高度
clientHeight:可视高度（不包含滚动条）
offsetTop/Left:相对于定位父级的距离
clientTop/Left:指边框的大小（上/左）
scrollTop:滚动上去的距离
scrollHeight:可以滚动的距离



window属性
innerWidth：不包含工具栏
outerWidth:包含工具栏



getAttribute   获取行间自定义属性

// setAttribute : 设置行间属性
// removeAttribute: 删除行间属性；
// console.log(box.getAttribute("flag"));
// box.setAttribute("o",1)
// box.removeAttribute("flag");

案例：
//<div id="box" index="1" xiaopipi="皮皮虾"></div>
    const box = document.getElementById('box');
    /*
    getAttribute（获取获取行间自定义属性）的实现原理 ：循环一下obj的自定义属性，
    找到自定义属性的时候，获取属性的value值。如果没有找到这个属性，就返回null。
    */
    function getAttribute(obj, attr) {
      let attrs = obj.attributes;
      for (let i = 0; i < attrs.length; i++) {
        if (attrs[i].nodeName === attr) {
          return attrs[i].nodeValue;
        }
      }
      return null;
    }
    console.log(getAttribute(box, 'xiaopipi')); //皮皮虾
    // setAttribute 使用方法
    document.getElementById("demo").setAttribute('style','color:red');
    
    
    
    以下代码是获取其中div的display的样式属性值：
    <div id="div">div节点</div>

      <script>
        var div = document.getElementById("div");
        var style = getCurrentStyle(div);
        var display = style["display"];
        
        alert(display);    // 输出：block
      </script>
操作DOM 和 节点

操作DOM 和节点
