JS-Dom节点，父子节点

Posted 2020-06-14

childNodes:只读 属性 自己欸但列表集合
    标准下（ff,chrome等）包含了文本和元素类型的节点，也会包含非法嵌套的子节点
    非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点
            
            childNodes只包含一级子节点，不包含后辈孙级以下的节点
        
        DOM节点的类型有很多种    12种
        
        元素.nodeType : 只读 属性 当前元素的节点类型
        
        元素节点    :    1
        属性节点    :    2
        文本节点 :    3
    
    // 元素.attributes : 只读 属性 属性列表集合
    
    //alert( oUl.attributes.length );
    
    //alert( oUl.attributes[0].nodeType );
    
    for (var i=0; i<oUl.childNodes.length; i++) {
        
        if ( oUl.childNodes[i].nodeType == 1 ) {
            oUl.childNodes[i].style.background = ‘red‘;
        }
        
    }

改进：用children代替childNodes
    /*
        元素.children : 只读 属性 子节点列表集合
            标准下：只包含元素类型的节点
            非标准下：只包含元素类型的节点
    */
    
    //alert( oUl.children.length );
    
    for (var i=0; i<oUl.children.length; i++) {
        
        oUl.children[i].style.background = ‘red‘;
        
    }

 firsChild：
    标准下（ff,chrome等）:firstChild
    非标准下：firstElementChild
    var oFirst = oUl.firstElementChild || oUl.firstChild;

  与child有同样的问题，改进：children[0];

 lastChild
    标准下（ff,chrome):lastChild
    非标准下：lastElementChild
    var oFirst = oUl.lastElementChild || oUl.lastChild ;

元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
    
    var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
    oNext.style.background = ‘blue‘;
    

元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点
    
    var oPrev = oLast.previousElementSibling || oLast.previousSibling;
    oPrev.style.background = ‘orange‘;

元素.parentNode : 只读 属性 当前节点的父级节点
    无兼容问题

offsetParent: 只读 属性 当前有定位属性的 父节点
    如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
    如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
    
    ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
    ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
    
元素.offsetLeft[Top] 、offsetWidth[Top]:
    详细解释：
    http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

获取元素到Body/html的距离：
    function getPos(obj) {
        var pos = {left:0, top:0};
        while (obj) {    //一层层向上获取offsetParent
            pos.left += obj.offsetLeft;
            pos.top += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return pos;
    }

创建元素：
    var a=createElement(‘li‘);
    a.innerHTML=‘aaaaaa‘;
    父级.appendChild(a);     //在原li之后插入；
    
    父级.insetBefore(a,父级.children[0]) //IE6 7报错
    //父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
    //在ie下如果第二个参数的节点不存在，会报错
    //在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
    
     改进：
    if ( oUl.children[0] ) {
        oUl.insertBefore( oLi, oUl.children[0] );
    } else {
        oUl.appendChild( oLi );
    }
删除元素：
    父级.removeChild(要删除的元素); 删除元素
    父级.removeChild( this.parentNode );
    
替换元素
    父级.replaceChild(新节点，要替换的节点)；