firstElementChild与firstChild区别

最新推荐文章于 2022-12-13 17:48:32 发布
最新推荐文章于 2022-12-13 17:48:32 发布
阅读量1.3w 收藏 1
点赞数 1
分类专栏： html

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;

灵影
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
webchang的博客
02-19 2396
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
:first-child 和 :first-of-type的区别
weixin_46215920的博客
10-12 389
:first-child 和 :first-of-type 的区别 xxx:first-child 指 css 选择器匹配到 xxx 的元素中位于其父元素第一位的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
浅谈childNodes和children以及firstChild和firstElementChild
筱葭的博客
05-06 1828
1、childNodes属性： 返回指定元素的子节点集合，包括元素节点和文本节点。 除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。   2、children属性： 返回指定元素的子元素集合，只包括元素节点，不包括文本节点。 除了IE9和Firefox，其他浏览器都支持通过children[i]获取第i个子节点。 注意：children在I
firstChild和firstElementChild的区别
learner_boy的博客
05-15 3732
firstChild可以获取文本元素而firstElemenChild不能 . 它们的共同点都是获取父节点下第一个节点对象。 .但是firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。
巧用 firstElementChild
liuzijiang1123的专栏
04-24 2432
firstElementChild：是用于返回DOM对象的第一个子元素。 举个小例子了解一下： &lt;div&gt; &lt;p&gt;123&lt;/p&gt; &lt;p&gt;456&lt;/p&gt; &lt;/div&gt; var oDiv=document.getElementsByTagName("div")[0]; cons
C++ tinyxml TiXmlElement->FirstChildElement()读不到数字节点
qq_30722721的博客
11-30 3371
场景描述： 环境：VS2015 使用tinyxml读取xml时，某一级节点名为3Axis,发现读取不到。 原因： 查找许久仍找不到问题所在，最后怀疑是数字开头的问题。 于是把3改成three后，就能读取到节点！ 经过多次测试，TiXmlElement节点的值不能是数字开头，其他中文，英文都可以..... 但为什么不能是数字呢，敬请大家解答。 ...
FirstChildElement() http://baike.baidu.com/link?url=VdlvQlGU-NGLshFepuft_u3MRdjZ9CAfGhOYuL915Oo-9pb
诺尔曼
07-28 1247
FirstChildElement()编辑 本词条缺少概述、信息栏、名片图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！ FirstChildElement()用来获取子节点的元素。 对于XML文件,获取根元素： TiXmlElement* pTiXmlRootElem = pTiXmlDoc->RootElement(); TinyXML是基于树状结构
javascript-获取parentNode-firstChild-lastChild的方法及案例
以后的23,725天，每一天都是精彩的，现在做，一切还来的及，相信自己！
10-27 1186
dom4.html window.onload = function() { //根据id获取指定的节点 var divNode=document.getElementById("xy"); //获取父节点 //"xy"的divNode.parentNode是body,divNode.parentNode.parentNode是html var pNode=di
DOM节点中元素节点与文本节点操作方法.pdf
12-16
//</div><div>b</div>`注意：`firstChild`可能返回文本节点，因此在处理元素节点时，通常使用`firstElementChild`。同样，`lastChild`可能返回非元素节点，因此使用`lastElementChild`确保获取最后一个元素节点。6....
javascript替换已有元素replaceChild()使用介绍
12-10
replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点 代码如下: var oDiv = document.... oDiv.firstElementChild : oDiv.firstChild var returnNode = oDiv.replaceChild(oSpan, f
javascript移出节点removeChild()使用介绍.docx
01-18
var firstChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstChild; var returnNode = oDiv.removeChild(firstChild); // 移除第一个元素，并返回被移除的元素 alert(returnNode.innerHTML); //...
js Element Traversal规范中的元素遍历方法.docx
01-19
这与`firstChild`不同，因为`firstChild`可能返回的是一个文本节点或者注释，而不是元素节点。 3. **lastElementChild**： 类似地，`lastElementChild`属性指向元素的最后一个子元素。这在遍历元素子集时非常有用...
关于firefox的ElementTraversal 接口 使用说明
09-05
这不同于`firstChild`属性，因为`firstChild`可能返回任何类型的节点（元素、文本、注释等），而`firstElementChild`只关注元素节点。 2. `lastElementChild`: 类似于`firstElementChild`，但返回的是最后一个子...
js和jQuery知识点
m0_45252287的博客
12-13 148
JS和JQuery基础
JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）
小帅的编程笔记
10-19 1687
今天我们来复习DOM中的获取父元素、子元素和兄弟元素的API，它们主要有parentNode、firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children、nextElementSibling、nextSibling、previousElementSibling、previousSibling等。 目录 获取父元素 - parentNode 获取子元素 -firstChild、firstElementChild
js中firstChild与firstElementChild及childNodes与children的区别
qq_44731369的博客
02-17 2363
firstChild： 获取指定元素的第一个子节点 (包括元素节点和文本节点) 。 若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met
18. Element firstChild 属性
enlyhua的专栏
08-06 791
实例返回文档的首个子节点：document.firstChild;<!DOCTYPE html> <html> <body><p id="demo">请点击按钮来获得文档首个子节点的节点名。</p><button onclick="myFunction()">试一下</button><script> function myFunction() { var x=document.getElementB
C++使用TinyXML解析XML
weixin_42975610的博客
11-18 1042
C++解析XML简介TinyXML包含的对象及方法使用步骤 C++解析XML(Win10-x64+VS2015) 简介 ​ 使用开源库TinyXML解析XML文件，TinyXML能够在windows或linux中编译，使用TinyXML只需要将其中的6个文件拷贝到项目中就可以直接使用了，这六个文件是:tinyxml.h、tinystr.h、tinyxml.cpp、tinystr.cpp、tinyxmlerror.cpp、tinyxmlparser.cpp。 TinyXML包含的对象及方法 1.
[毕业设计]VB+ACCESS高校班级日常管理系统(源代码+论文).zip
最新发布
08-07
[毕业设计]VB+ACCESS高校班级日常管理系统(源代码+论文)
js firstchild
05-31
JavaScript中的`firstChild`属性返回指定节点的第一个子节点，如果指定节点没有子节点，则返回`null`。需要注意的是，`firstChild`属性返回的子节点可能是一个元素节点、文本节点或注释节点。如果要获取第一个元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值