DOM: 如何獲取元素下的第一個子元素

Element.firstChild ?，是的，這是第一種方法，當然，通常來說支持 W3C 規范的瀏覽器，如 Firefox 等取到的應該是 TEXT_NODE。很早之前，或者說現在最流行的方法可能是：

// 讓我們假設要將它抽象出來，變成一個 util 對象的方法
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 的屬性，可以獲取到第一個為元素的子節點。那么，我們的 API 可以變得更簡單：

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

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

另外的兩個實現方法：

// 通過 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];
}