码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-05-27 17:41:53      阅读:520      评论:0      收藏:0      [点我收藏+]

标签:style   c   class   blog   code   java   

Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE。很早之前,或者说现在最流行的方法可能是:

bubuko.com,布布扣
// 让我们假设要将它抽象出来,变成一个 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;
}
bubuko.com,布布扣

现在浏览器支持一个叫Element.firstElementChild 的属性,可以获取到第一个为元素的子节点。那么,我们的 API 可以变得更简单:

bubuko.com,布布扣
util.first = function(element) {
  if(!element) return;

// 刚好 IE8 以下支持直接拿 firstChild
  return element[element.firstElementChild ? ‘firstElementChild‘ : ‘firstChild‘];
}
bubuko.com,布布扣

另外的两个实现方法:

bubuko.com,布布扣
// 通过 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];
}
bubuko.com,布布扣

 

DOM: 如何获取元素下的第一个子元素,布布扣,bubuko.com

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

标签:style   c   class   blog   code   java   

原文地址:http://www.cnblogs.com/fengyuqing/p/js-firstChild.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!