Question

HTML：

<div class="a">
    <p><p class="y"><p class="z"></p></p></p>
</div>

代码：

        console.log(document.getElementsByClassName('z')[0].parentNode)

返回div.a

帮助家伙，为什么会跳过

??如果将p.y更改为div.y则会返回div.y

Answer 1

无效的html是跳过的原因。段落中不能有段落。

HTML 4.01 specification: 9.3.1 Paragraphs: the P element

P元素代表一个段落。它不能包含块级元素（包括P本身）。

使用您的控制台检查HTML，您将看到浏览器将重写您的html以关闭第一个段落标记。这是浏览器将呈现的内容：

<div class="a">
    <p></p>
    <p class="y"></p>
    <p class="z"></p>
    <p></p>
    <p></p>
</div>

Answer 2

<p>不能是另一个<p>的父级。您的每个<p>标记都隐含地在下一个标记的开头结束;结束标记被忽略。

还有其他标记也是这样的：<td>和<li>会浮现在脑海中。（原因不同，但原因对标记外观有类似的影响。）

Answer 3

您的HTML无效。 p元素不能是另一个p元素的子元素，p元素的结束标记是可选的。

因此您的HTML被解释为：

<div class="a">
    <p></p>
    <p class="y"></p>
    <p class="z"></p>
    <!-- unexpected and therefore ignored </p> -->
    <!-- unexpected and therefore ignored </p> -->
</div>

不会忽略父节点。你正在编写的HTML只是没有生成你想象的DOM。

Answer 4

段落标记，<p>是HTML中的一个特例。以下是完全有效的HTML：

<p>this is a paragraph
<p>This is another paragraph, but notice I never closed the first one
<p>a third paragraph, also following another non-closed para
<p>a fourth one</p>

开始一个新段落而不关闭前一个段落执行前一个段落的隐含关闭。这意味着您不能将段落嵌套在彼此中。

为什么JS正在跳过parentNode这样的“<p>”</p>

4 个答案: