说不清的 childNodes

那份心谁懂

那份心谁懂

2016-01-29 11:22

说不清的 childNodes,说不清的 childNodes

以下内容在IE浏览器下测试:

firstChild 获取对象的 childNodes 集合的第一个子对象的引用。

<div onclick="alert(this.firstChild.tagName)"
<spanspan-cnbruce</span
<prepre-cnbruce</pre
</div


lastChild 获取该对象 childNodes 集合中最后一个子对象的引用。

<div onclick="alert(this.lastChild.tagName)"
<spanspan-cnbruce</span
<prepre-cnbruce</pre
</div

在<div标签内再加一行lastChild就找不到了

<div onclick="alert(this.lastChild.tagName)"
<spanspan-cnbruce</span
<prepre-cnbruce</pre
<fontfont-james</font
</div

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com)

那么用childNodes来测试

<div onclick="alert(this.childNodes[0].tagName)"
<spanspan-cnbruce</span
<prepre-cnbruce</pre
<fontfont-james</font
</div

childNodes[0]是表示span,而childNodes[1]表示的并非pre,childNodes[2]才是。

那么如果说childNodes[0]是span,childNodes[2]是pre,那么childNodes[1]则是这两个标签对象间的换行

但为什么childNodes[3]表示了font,而不是childNodes[4]的呢?

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com)

<div onclick="alert(this.childNodes[3].tagName)"
<spanspan-cnbruce</span
<prepre-cnbruce</pre
<fontfont-james</font
</div
再来一行,childNodes[4]表示的又即是换行,childNodes[5]才是标签p

<div onclick="alert(this.childNodes[5].tagName)"
<spanspan-cnbruce</span
<prepre-cnbruce</pre
<fontfont-james</font
<pp-jack</p
</div
根据这个规律,我可以断定childNodes[6]不是换行

<div onclick="alert(this.childNodes[6].tagName)"
<spanspan-cnbruce</span
<prepre-cnbruce</pre
<fontfont-james</font
<pp-jack</p
<aa-href</a
</div
那么对于对象的换行来说,首项是1,公差是3的等差数列?

此外,对于FF浏览器的测试结果表示满意:
childNodes[1]、childNodes[3]、childNodes[5]、childNodes[7]分别表示<span <pre <font <p

展开更多 50%)
分享

猜你喜欢

说不清的 childNodes

电脑网络
说不清的 childNodes

大姨妈来了话都说不清了 了解经期身体神奇变化

月经
大姨妈来了话都说不清了 了解经期身体神奇变化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JS教程:childNodes与parentNode

Web开发
JS教程:childNodes与parentNode

空调不清洗有哪些危害 空调不清洗的后果

空调 空调清洗 空调不清洗的危害
空调不清洗有哪些危害 空调不清洗的后果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

孩子说话吐字不清的原因

分娩
孩子说话吐字不清的原因

孩子说话“吐字不清”的原因

音乐 育儿知识 怀孕 孕妇
孩子说话“吐字不清”的原因

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

AJAX编程实践之与服务器通信

AJAX编程实践之与服务器通信

《生化危机 启示录2》快速收集各类武器技巧分享

《生化危机 启示录2》快速收集各类武器技巧分享
下拉加载更多内容 ↓