`

HTML DOM -奇怪的childNodes

 
阅读更多

以下内容在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对象都写在一行上,免得出现诡异现象。

分享到:
评论

相关推荐

    js -- childNodes

    博文链接:https://skyofdawn.iteye.com/blog/208281

    JavaScript操作DOM元素的childNodes和children区别

    主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下

    PHP实现使用DOM将XML数据存入数组的方法示例

    本文实例讲述了PHP实现使用DOM将XML...$childs=$roots-&gt;childNodes;//获取根节点下所有子节点也就是 db smarty for($i=0;$i&lt;$childs-&gt;length;$i++){ //按照根节点下的子节点数量进行循环存入数组 $config_item=$c

    javascript对于DOM的操作

    document 树结点 parentElement 父元素 parentNode 父结点 childNodes 所有子结点 有s哦 firstChild 第一个子结点 lastChild 最后一个子结点 nextSibling 下一个兄弟结点 previousSibling 上一个兄弟结点

    DOM下的节点属性和操作小结

    属性: 1 .nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。...文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性,要

    Js操作DOM元素及获取浏览器高宽的简单方法

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的...

    childNodes 用法两例

    childNodes实现代码

    基本DOM节点操作

    element.childNodes:返回该元素的子节点数组。注意:换行在浏览器中作为text节点,需要进行过滤 element.firstChild:该元素的第一个子节点。 element.lastChild:该元素最后一个子节点。 3、父节点 element...

    asp中使用MSXML2.DOMDocument处理XML数据时的注意事项

    asp使用MSXML2.DOMDocument加载网络上的xml文件时,在调用load方法前需要注意设置: 代码如下: oXML.setProperty “ServerHTTPRequest”, true 即启用ServerHTTPRequest请求,要不会出现系统错误: -2146697209。 ...

    JavaScript操作HTML DOM节点的基础教程

    因为 DOM 的存在,这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE:下面提供的例子中的 element 均为元素节点。 获取节点 父子关系 element[removed] element.firstChild/element.lastChild ...

    使用 childNodes 和 rows,cells 操作表格列着色源代码

    本文包含两个源代码:使用 childNodes 操作表格列着色、使用 rows,cells 操作表格列着色。两种着色方式有什么区别?具体分析请参阅作者博客:http://blog.csdn.net/defonds/archive/2010/07/17/5741214.aspx。

    IE与FireFox中的childNodes区别

    但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构,建议在需要进行了遍历时首先使用childNodes!! 但是不幸的是,在IE和FireFox中childNodes有点细微的...

    ajax或者jquery操作xml相关源文件

    info[0].childNodes[0].childNodes[0].childNodes[0].nodeValue&#41;;//获取节点值 //alert&#40;info.getAttribute('type'&#41;); } catch (exception) { alert&#40;"The node is not exist"&#41;; } var str =...

    drag-resizer:为 dom 节点添加一个拖动手柄,使用 flexbox

    为 dom 节点添加一个拖动手柄,使用 flexbox。 const dragResizer = require ( 'drag-resizer' ) dragResizer ( '.container' ) // dragResizer(document.querySelector('.container')) 传递带有要由拖动手柄操作...

    childNodes.length与children.length的区别

    childNodes.length与children.length的值常不一样。

    PHP XML操作类DOMDocument

    DOMDocument相关的内容. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档...

    编译的 HTML 帮助文件 (.chm) DHTML手册

    childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 embeds 获取文档中所有 embed 对象的集合。 forms 获取以源顺序排列的文档中所有 form 对象的集合。 frames 获取给定文档定义或与给定...

Global site tag (gtag.js) - Google Analytics