【脚本化文档】——文档结构和遍历

——作为节点树的文档
作为节点树的文档是要考虑空格和文字的，要明确这一点

1、parentNode ——该节点的父节点，或者针对类似document对象应该是null，因为它没有父节点
2、childNodes——只读的类数组对象，它是该节点的子节点的实时表现
3、firstChild、lastChild——该节点的子节点中的第一个和最后一个，没有则返会null
4、nextSibing、previoursSibling——该节点的兄弟节点中的前一个和后一个
5、nodeType——节点类型
6、nodeValue——Text节点或Comment节点的文本内容
7、nodeName——元素的标签名，以大写形式表现

补充一下节点类型

• 9——document节点
• 1——element节点
• 3——text节点
• 8——comment节点（注释节点）
• 11——DocumentFragment节点(文档碎片)

——作为元素树的文档
不考虑空格和文本

1、firstElementChild、lastElementChild——该节点的子节点中的第一个和最后一个，没有则返会null
2、nextElementSibing、previoursElementSibling——该节点的兄弟节点中的前一个和后一个
3、childElementCount——子元素的数量，返回值和children.length值相等

由于逐个元素的文档遍历API并未完全标准化，所有我们需要对这些API进行移植,主要是为了处理低版本的IE

返回元素e的第n层祖先元素

/** * 返回元素e的第n层祖先元素，如果不存在此祖先或祖先不是Element，则返回null * 如果n为0，则返回本身。如果n为1（或省略），则返回其父元素 * 如果n为2，则返回其祖父元素，依此类推 */

 function parent(e, n) {
    if (n === undefined) n = 1;  
    while(n-- && e) e = e.parentNode;
    if (!e || e.nodeType !== 1) return null;
    return e;
}

返回元素e的第n个兄弟元素

/** * 返回元素e的第n个兄弟元素 * 如果n为正，返回后续的第n个兄弟元素 * 如果n为负，返回前面的第n个兄弟元素 * 如果n为0，返回e本身 */
 function sibling(e,n) {
    while(e && n !== 0) {  // 如果e未定义，即刻返回它
        if (n > 0) {  // 查找后续的兄弟元素
            if (e.nextElementSibling) e = e.nextElementSibling;
            else {
                for(e=e.nextSibling; e && e.nodeType !== 1; e=e.nextSibling)
                    /* 空循环*/ ;
            }
            n--;
        }
        else {        // 查找前面的兄弟元素
            if (e.previousElementSibing) e = e.previousElementSibling;
            else {
                for(e=e.previousSibling; e&&e.nodeType!==1; e=e.previousSibling)
                    /* 空循环*/ ;
            }
            n++;
        }
    }
    return e;
}

返回元素e的第n代子元素

/** * 返回元素e的第n代子元素，如果不存在则返回null * 负值代表从后往前计数，0代表第一个子元素 * 而-1代表最后一个元素，-2代表倒数第二个，依此类推 */
 function child(e, n) {
    if (e.children) {  // 如果children数组存在
        if (n < 0) n += e.children.length; // 转换负的n为数组索引
        if (n < 0) return null;// 如果它仍然为负，说明没有子元素
        return e.children[n];// 返回指定的子元素
    }
    // 如果e没有children数组，找到第一个子元素并向前数，或找到最后一个子元素往回数
    if (n >= 0) { // n非负，从第一个子元素向前
        // 找到元素e的第一个子元素
        if (e.firstElementChild) e = e.firstElementChild;
        else {
            for(e = e.firstChild; e && e.nodeType !== 1; e = e.nextSibling)
                /* empty */;
        }
        return sibling(e, n); // 返回的第一个元素的第n个兄弟元素
    }
    else { // n为负，从最后一个子元素往回数
        if (e.lastElementChild) e = e.lastElementChild;
        else {
            for(e = e.lastChild; e && e.nodeType !== 1; e=e.previousSibling)
                /* empty */;
        }
        return sibling(e, n+1); // +1来转化最后一个子元素为最后一个兄弟元素
    }
}

期待你阅读下一篇博文【脚本化文档】——属性&元素的内容

点击这里下载思维导图——思维导图文件下载