firstElementChild与firstChild区别

Element Traversal规范中的firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount属性

Element Traversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素（element）节点，而不包含元素节点之外的其他节点，如注释节点、文字节点等。这个规范给我们提供了快速、方便的方法来访问元素节点。在以前的方法中，我们使用firstChild、nextSibling、childNodes、childrem等方法来进行遍历，但要得到元素节点，我们还需要来判断节点的类型。

注意：children属性中，IE里面包含注释节点，而其他浏览器则不包含。

ElementTraversal接口定义了5个属性，是元素节点必须要实现的，这5个属性的原始定义如下，这些属性，看名字就不难明白它的含义，再次不进行翻译成中文了：

firstElementChild：Returns the first child element node of this element. null if this element has no child elements.
lastElementChild：Returns the last child element node of this element. null if this element has no child elements.
previousElementSibling：Returns the previous sibling element node of this element. null if this element has no element sibling nodes that come before this one in the document tree.
nextElementSibling：Returns the next sibling element node of this element. null if this element has no element sibling nodes that come after this one in the document tree.
childElementCount：Returns the current number of element nodes that are children of this element. 0 if this element has no child nodes that are of nodeType 1.

现在，IE9，Firefox3.5+，Safari，Opera，Chrome浏览器都已经实现该接口。下面就是利用这些属性的一个简单的例子：

HTML 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
</head>
<body>
<div id="container">
这里是文字节点。
<br/>

<div>这个是真正的节点。</div>
<mxh>自定义标签被认可吗？</mxh>
</div>
<input type="button" value="点击这里进行测试" οnclick="showChildNodes()" />
<script>
function showChildNodes()
{
var container = document.getElementById("container");
var out = "";
out += "<li>浏览器类型是：" + navigator.userAgent;
out += "<li>childNodes.length = " + container.childNodes.length;
out += "<li>children.length = " + container.children.length;
out += "<li>childElementCount = " + container.childElementCount;
document.getElementById("debug").innerHTML = out;

var child = container.firstElementChild;
while (child) {
alert (child.nodeName + ":" + child.innerHTML );
child = child.nextElementSibling;
}
}
</script>
<br/>
<div id="debug" style="border:1px solid red"></div>
</body>
</html>

DOM规范中定义的nodeType类型：
ELEMENT_NODE = 1;
ATTRIBUTE_NODE = 2;
TEXT_NODE = 3;
CDATA_SECTION_NODE = 4;
ENTITY_REFERENCE_NODE = 5;
ENTITY_NODE = 6;
PROCESSING_INSTRUCTION_NODE = 7;
COMMENT_NODE = 8;
DOCUMENT_NODE = 9;
DOCUMENT_TYPE_NODE = 10;
DOCUMENT_FRAGMENT_NODE = 11;
NOTATION_NODE = 12;

firstElementChild与firstChild区别相关推荐

js下firstElementChild以及firstChild，Children的用法
一. <div><p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementBy ...
兼容firstChild和firstElementChild
1.nextSibling和nextElementSibling 顾名思义,就是找下一个节点 nextSibling在低版本浏览器中可以顺利找到下一个元素节点,而在正常浏览器中找到的包含中间空格. n ...
firstChild和firstElementChild兼容
firstChild,在现代浏览器中会选中空格文本节点.而IE8及以下的IE浏览器不会选中空白文字节点.现代浏览器运行如下: <ul> <li></li> ...
firstChild,lastChild,NextSibling,previousSibling的使用
元素.firstChild:只读属性,第一个子节点在标准下:firstChild会包含文本,类型的节点非标准下:只包含元素节点元素.firstElementChild : 只读属性标准下获取 ...
JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling
<body><ul id="ul1"><li>11111</li><li>22222</li><li& ...
原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）
原生js firstChild 获取元素的第一个节点问题 firstChild 获取当前元素节点下的第一个子节点. 获取到的子节点可能是元素节点,但编程中更可能是注释节点或文本节点. 没有子节点则返回 ...
Javascript使用三大家族和事件来DIY动画效果相关笔记（一）
1.offset家族 ◆offsetWidth和offsetHeight表示盒子真实的宽度高度,这个真实的宽度包括四周的边框.四周的padding.及定义的宽度高度或内容撑开的高度和宽度,可以用来检 ...
js DOM Element属性和方法整理
js DOM Element属性和方法整理节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介我们知道,三大家族包括:offset/scroll/c ...

firstElementChild与firstChild区别

firstElementChild与firstChild区别相关推荐

最新文章

热门文章