以下内容在IE浏览器下测试:
firstChild 获取对象的 childNodes 集合的第一个子对象的引用。
<div onclick="alert(this.firstChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>
lastChild 获取该对象 childNodes 集合中最后一个子对象的引用。
<div onclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>
在<div>标签内再加一行lastChild就找不到了
<div onclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>
那么用childNodes来测试
<div onclick="alert(this.childNodes[0].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>
childNodes[0]是表示span,而childNodes[1]表示的并非pre,childNodes[2]才是。
那么如果说childNodes[0]是span,childNodes[2]是pre,那么childNodes[1]则是这两个标签对象间的换行
但为什么childNodes[3]表示了font,而不是childNodes[4]的呢?
<div onclick="alert(this.childNodes[3].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>
再来一行,childNodes[4]表示的又即是换行,childNodes[5]才是标签p
<div onclick="alert(this.childNodes[5].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
</div>
根据这个规律,我可以断定childNodes[6]不是换行
<div onclick="alert(this.childNodes[6].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
<a>a-href</a>
</div>
那么对于对象的换行来说,首项是1,公差是3的等差数列?
此外,对于FF浏览器的测试结果表示满意:
childNodes[1]、childNodes[3]、childNodes[5]、childNodes[7]分别表示<span> <pre> <font> <p>
一个很笨拙的解决办法:我一般对需要通过dom获取的html对象都写在一行上,免得出现诡异现象。
分享到:
相关推荐
博文链接:https://skyofdawn.iteye.com/blog/208281
主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下
本文实例讲述了PHP实现使用DOM将XML...$childs=$roots->childNodes;//获取根节点下所有子节点也就是 db smarty for($i=0;$i<$childs->length;$i++){ //按照根节点下的子节点数量进行循环存入数组 $config_item=$c
document 树结点 parentElement 父元素 parentNode 父结点 childNodes 所有子结点 有s哦 firstChild 第一个子结点 lastChild 最后一个子结点 nextSibling 下一个兄弟结点 previousSibling 上一个兄弟结点
属性: 1 .nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。...文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性,要
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的...
childNodes实现代码
element.childNodes:返回该元素的子节点数组。注意:换行在浏览器中作为text节点,需要进行过滤 element.firstChild:该元素的第一个子节点。 element.lastChild:该元素最后一个子节点。 3、父节点 element...
asp使用MSXML2.DOMDocument加载网络上的xml文件时,在调用load方法前需要注意设置: 代码如下: oXML.setProperty “ServerHTTPRequest”, true 即启用ServerHTTPRequest请求,要不会出现系统错误: -2146697209。 ...
因为 DOM 的存在,这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE:下面提供的例子中的 element 均为元素节点。 获取节点 父子关系 element[removed] element.firstChild/element.lastChild ...
本文包含两个源代码:使用 childNodes 操作表格列着色、使用 rows,cells 操作表格列着色。两种着色方式有什么区别?具体分析请参阅作者博客:http://blog.csdn.net/defonds/archive/2010/07/17/5741214.aspx。
但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构,建议在需要进行了遍历时首先使用childNodes!! 但是不幸的是,在IE和FireFox中childNodes有点细微的...
info[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//获取节点值 //alert(info.getAttribute('type')); } catch (exception) { alert("The node is not exist"); } var str =...
为 dom 节点添加一个拖动手柄,使用 flexbox。 const dragResizer = require ( 'drag-resizer' ) dragResizer ( '.container' ) // dragResizer(document.querySelector('.container')) 传递带有要由拖动手柄操作...
childNodes.length与children.length的值常不一样。
DOMDocument相关的内容. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档...
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 embeds 获取文档中所有 embed 对象的集合。 forms 获取以源顺序排列的文档中所有 form 对象的集合。 frames 获取给定文档定义或与给定...