3.4 JS 排他思想&&节点&&dom 的节点操作

排他思想

 <script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++)
        {
            btns[i].onclick = function(){
                //清除所有人的 类名   只能用 for 遍历
                for(var j=0;j<btns.length;j++)
                {
                    btns[j].className = "";
                }
                //就剩下自己 就是一个 而且是点击那个
                this.className = "damao";
            }
        }
    }
</script>

节点

父节点

 父 ：  parentNode         亲的  一层 

兄弟节点

nextSibling  下一个兄弟    亲的       ie 678 认识
nextElementSibling   其他浏览器认识的     

previousSibling   同理  上一个兄弟   
previousElementSibling
我们想要兼容    我们可以合写     
var div = one.nextElementSibling || one.nextSibling;

必须先写 正常浏览器 后写 ie678

子节点

算换行
firstChild    第一个孩子  ie678
firstElementChild  第一个孩子   正常浏览器  
var one.firstElementChild || one.firstChild;   

lastChild
lastElementChild

孩子节点

childNodes    选出全部的孩子
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点     （嫡出）
火狐 谷歌等高本版会把换行也看做是子节点

利用  nodeType == 1   时才是元素节点     来获取元素节点
标签  元素  

children   重要  选取所有的孩子 （只有元素节点）
这个更好 跟喜欢它  。 （庶出） 
ie 678  包含 注释节点     这个要避免开。 

dom 的节点操作

创建节点

var div = document.creatElement(“li”);

上面的意思就是 生成一个新的 li 标签

插入节点

  1.  appendChild();    添加孩子     append 添加的意思
   意思：  添加孩子   放到盒子的 最后面。
  2. insertBefore(插入的节点，参照节点)   子节点  添加孩子
    写满两个参数  
    demo.insertBefore(test,childrens[0]);
   放到了第一个孩子的前面  
  如果第二个参数  为 null  则 默认这新生成的盒子放到最后面。
  demo.insertBefore(test,null);

移除节点

removeChild()    孩子节点       
var da = document.getElementById("xiongda");
demo.removeChild(da);

克隆节点

 cloneNode(Boolean clone);

 复制节点 
 括号里面可以跟参数  ， 如果 里面是 true  深层复制， 除了复制本盒子，还复制子节点  
 如果为 false (默认) 浅层复制   只复制   本节点  不复制 子节点。