连children都不知道的前端

最近几天知乎上一个帖子火了: 怎么看待一个阿里工作四年出来的,但却连children()这样的方法都不知道是什么意思的前端?

大概意思是说:

我们公司新入职的一个大神,说是从阿里出来的,在阿里带了四年。可是在实际工作中却发现他连最基本的js从上往下的加载顺序都不知道,还有基础的ajax接口调用根本不会。现在连children也不知道是啥意思,不禁怀疑,这真的是阿里的水平吗

看热闹看吐槽的同时,我也赶紧复习复习children()的用法… 虽说做前端的不知道children()的用法情有可原,但作为BAT里的一枚垃圾前端,我也怕哪天被人鄙视啊…(因为我水平也渣)

介绍

然而发现在原生dom中,children是dom对象的一个属性,并不是方法。而知乎题主发帖中提到 children() 方法,有可能是指的jquery中的 $().children() 方法。

jquery中的 $().children 方法就比较先进了,他是返回匹配元素的所有孩子元素(不包括文本节点),且返回的类型是个jquery对象,所以可以直接链式调用jquery相应的其他方法。而且jquery中这个children还可以传递参数,从而在孩子中过滤出符合选择器参数的元素。jquery中的children方法可参考: http://www.css88.com/jqapi-1.9/children/

而在原生DOM操作中,一个dom元素有两个属性跟获取孩子有关,一个是childNodes,一个是children. 两者是有区别的:

  • 首先,两者的类型就不一样。childNodes返回的类型是NodeLists
  • children返回的类型是HTMLCollection
  • childNodes返回的节点里,包括了很多回车符的文本节点,这就不太好用啦
  • 而children返回的节点,都是元素节点,这就比较好用了。

他们的共同点是,都可以通过 [] 符号来获取对应索引的孩子节点。

childNodes属性

【w3c标准属性】
childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。

children属性

【非w3c标准属性】
children 属性,非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]。需注意children在IE中包含注释节点。

应用

获取元素的第一个子元素:

如果用 children[0] 是可以直接拿到第一个孩子元素的,但childNodes[0]就不行, 因为他可能是个回车符号组成的Text节点。

所以如果用childNodes获取第一个子元素,可能得for循环来找第一个节点。

1
2
3
4
5
6
7
8
// 这样死循环即可,满足直接return停止循环:
function getFirst(elem){
for(var i=0,e;e=elem.childNodes[i++];){
if(e.nodeType==1)
return e;
}
}

删除节点所有子元素

1
2
3
4
5
6
//下面的方法可以删除节点box的所有子节点
while (box.firstChild)
{
//box为LIVE类型的NodeList,所以firstChild属性每次会指向不同的子节点
box.removeChild(box.firstChild);
};

之所以能这样干(循环删除第一个子元素),是因为:该NodeList对象为LIVE类型的NodeList, 添加或删除子节点都会实时的改变整个NodeList对象.

Refer

http://www.cnblogs.com/snandy/archive/2011/03/11/1980085.html