2. nextSibling vs nextElementSibling
{
//FF
{
在Firefox中,link2的nextSibling并不是link3,因为两者之间有一个换行符.
这被认为是一个空格, 所以link2的nextSibling就是这个空格,即一个text node,IE不存在这个问题。
<a href="link2" id="link2"></a>
<a href="link3" id="link3"></a>
}
//IE
{
IE不存在这个问题。
}
//solution
{
//cause
{
DOM标准明确说了nextSibling返回当前元素的下一个Node,而<a>元素后的Node明显是一个TextNode,
其nodeValue是'
',而IE竟然没有返回一个TextNode,跳过了一个Node
}
//不支持version
{
FireFox(版本号:3.5.11)中不支持JavaScript的previousSibling属性。
IE(版本号:8.0.6001.18702)中不支持JavaScript的previousElementSibling属性。
用jQuery可以达到跨浏览器的支持。
}
//solution
{
/最新的浏览器确实已经已经支持如下的DOM标准
{
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 3.5 9 (IE6-8 incl commend nodes) 10 4
//childElementCount
{
属性返回当前元素的子元素个数,而不是子节点个数.
只有当一个节点的nodeType属性为1(Node.ELEMENT_NODE==1)时,它才是元素节点.
文本节点和注释节点不属于元素节点.
//注意
{
另外,由于IE9之前的版本不支持childElementCount属性, 所以如果考虑兼容性的话,
请使用element.children.length(并且需要判断nodeType是否为1)
来代替childElementCount属性.
}
}
//children vs childNodes
{
children:获取一个元素的【子元素节点】集合
childNodes:获取一个元素的【子节点】集合
(/注意:IE10支持nextSibling.children|childNodes/)
(/ FF23支持netxElementSibling.children|childNodes/)
//注意
{
在IE9之前,element.children会包含一个元素的子元素节点和子注释节点.
在IE9之后或者其他浏览器中, 只包含子元素节点.
}
}
//一般人使用nextSibling是不会期望去得到一个换行符的,
//所以新版的DOM标准提供了nextElementSibling来跳过这些【空白符和文本节点】
{
nextElementSibling
firstElementChild
lastElementChild
childElementCount
children
previousElementSibling
}
}
//example
{
var cusName = e.parentNode.previousElementSibling.children[1].value;
}
}
}
}
}
参考链接
http://ricoyu.iteye.com/blog/940760
https://developer.mozilla.org/zh-CN/docs/DOM/element.childElementCount
我在IBM工作,可以为大家内部推荐IBM各种职位
IBM全球职位尽在以下链接(请在浏览器中打开,QQ/微信 会阻止):
http://ibmreferrals.com/
很乐意为感兴趣的小伙伴分享:我的面试经验^_^
如需咨询,请邮件发送以下邮箱,有问必回
1026096425@qq.com