如何获取元素下的第一个子元素

element.firstChild

这个方法可能取到的应该是TEXT_NODE。

var util = {};

util.first = function(element) {
    if (!element) return;

    var first = element.firstChild;
    // 处理 w3c 浏览器中第一个子元素是 TEXT_NODE
    // 并且需要考虑到有没有 COMMENT_NODE 的情况
    while (first && first.nodeType !== 1) first = first.nextSibling;
    return first;
}

element.firstElementChild

util.first = function(element) {
    if(!element) return;

    // 刚好 IE8 以下支持直接拿 firstChild
    return element[element.firstElementChild ? "firstElementChild" : "firstChild"];
}

element.querySelector and element.getElementsByTagName

// 通过 HTML5 的 querySelector，及 getElementsByTagName
util.first = function(element, tag) {
    if(!element) return;
    tag = tag || "*";;
    return element.querySelector ? element.querySelector(tag) : element.getElementsByTagName(tag)[0];
}

// IE6 支持的 children
util.first = function(element) {
    return element && element.children[0];
}

References

1. 如何取到ul下第一下li