1

HTML：

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

代码：

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

返回 div.a

求助大佬，为什么会跳

?? 顺便说一句，如果将 py 更改为 div.y 那么它将返回 div.y

4

4 回答 4

6

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

HTML 4.01 规范：9.3.1 段落：P 元素

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

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

<div class="a">
    <p></p>
    <p class="y"></p>
    <p class="z"></p>
    <p></p>
    <p></p>
</div>
于 2013-02-01T14:46:31.737 回答
4

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

还有其他类似的标签：<td>请<li>记住。（不同的原因，但这些原因对标记外观有相似的影响。）

于 2013-02-01T14:46:23.917 回答
2

您的 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。

于 2013-02-01T14:47:03.997 回答
1

段落标签<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>

在不关闭前一个段落的情况下开始一个新段落执行了对前一个段落的隐式关闭。这意味着您不能将段落相互嵌套。

于 2013-02-01T14:47:16.887 回答