JavaScript DOM基础(3)

层次节点属性
    属性                         说明
childNodes             读取当前元素节点的所有子节点;
firstChild             读取当前元素节点的第一个子节点;
lastChild              获取当前元素节点的最后一个子节点;
ownerDocument          获取该节点的文档根节点,相当于document;
parentNode             获取当前节点的父节点;
previousSibling        获取当前节点的前一个同级节点;
nextSibling            获取当前节点的后一个同级节点;
attributes             获取当前元素节点的所有属性节点集合;

(1).childNodes属性

属性获取某一个元素节点的所有子节点,这些子节点包含元素节点和文本节点;
 PS:使用childNodes[n]返回子节点对象的时候,有可能返回的是元素子节点,比如:HTMLElement;
 也可能返回的是文本子节点,比如:Text;
 元素子节点可以使用nodeName或者tagName获取标签名称;而文本子节点可以使用nodeValue获取;
    var box = document.getElementById('box');
    for(var i=0; i<box.childNodes.length; i++){
         判断是元素节点,输出元素标签名;
        if(box.childNodes[i].nodeType === 1){
            console.log('元素节点:'+box.childNodes[i].nodeName);
         判断是文本节点,输出文本内容;
        }else if(box.childNodes[i].nodeType ===3){
            console.log('文本节点:'+box.childNodes[i].nodeValue);
        }
    }
     PS1:在获取到文本节点(重点在于已经不是元素节点)的时候,是无法使用innerHTML这个属性输出文本内容的;
     这个非标准的属性必须在获取元素节点的时候,才能输出里面包含的文本;
        alert(box.innerHTML);                                     innerHTML和nodeValue第一个区别;

PS2:innerHTML和nodeValue在赋值的时候,nodeValue会把包含在文本里的HTML转义成特殊的字符,从而达到形成纯文本的效果;
     而innerHTML会解析文本里的特殊字符;
        box.childNodes[0].nodeValue = '<strong>abc</strong>';     =><strong>abc</strong>;
        box.innerHTML = '<strong>abc</strong>';                   =>abc(样式加粗);

(2).firstChild和lastChild属性
 firstChild = childNodes[0];获取当前元素的第一个子节点;
 lastChild = childNodes[box.childNodes.length-1];获取当前元素最后一个子节点;

(3).ownerDocument属性
 返回该节点的文档对象根节点,返回的对象相当于document;
   alert(box.ownerDocument === document);                        // =>true;根节点;

(4).parentNode/previousSibling/nextSibling属性

parentNode:返回该节点的父节点;
 previousSibling:返回该节点的前一个同级节点;
 nextSibling:返回该节点的后一个同级节点;
    alert(box.parentNode.nodeName);                      // 获取父节点的标签名;
    alert(box.firstChild.nextSibling);                   // 获取第二个节点;
    alert(box.lastChild.previousSibling);                // 获取倒数第二个节点;