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屋!
查看全文