连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