javascript - 为什么获取Element的childNodes结点时找不到span？
本文介绍了javascript - 为什么获取Element的childNodes结点时找不到span？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在学习ELement结点的childNodes的方法时测试一下代码
<html>
<body>
<span id="Span"></span>
<a id="a"></a>
<div id="div"></div>
<p id="p">
<span id="span">
<div></div>
</span>
</p>
<script type="text/javascript">
var allElement=document.body.childNodes;
for(var i=0;i<allElement.length;i++)
console.log(allElement[i].nodeName);
</script>
</body>
</html> 控制台输出结果却是
#text
SPAN
#text
A
#text
DIV
#text
P
DIV
#text
P
#text
SCRIPT为什么找不到嵌套的span标签呢？开头的span标签明明可以被检测到啊？若是说孙子结点不能被检测到，那么为什么span嵌套的div却能被列举出来呢？
解决方案
childNodes只能返回子代节点
span是内联元素，内联元素是不能嵌套块级元素的，你强行嵌套的结果是这样的：
div变成p的兄弟节点，所以返回到的结果就如题中所示-
嵌套规则：
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
块级元素不能放在p里面。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。
这篇关于javascript - 为什么获取Element的childNodes结点时找不到span？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
