段落可以是父元素吗？

Question

应该提到： 我不是最有经验的网络编码员。 尽管如此：目前处理一些前端的东西。

昨天我编写了一些JavaScript，结果并没有像我预期的那样。

我做了这个演示：

每个段落都包含标题和一些文字。这些段落包含在div容器中。

<div class="container">
  <p class="paragraph">
    <h3 class="headline">Some headline ...</h3>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
  </p>

  <p class="paragraph">
    <h3 class="headline">Another headline ...</h3>
    <span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</span>
  </p>

  <!-- More paragraph-container ... -->
</div>

让我们说我有第一个标题的引用，并希望得到第一个段落标记的类名。

我会这样：

// Get a reference to the first headline element.
var headline = document.getElementsByClassName('headline')[0];
// Access the parent of the headline element.
console.log(headline.parentNode.className);
// Result is: container

我期待作为回归＆＃39;段落＆＃39;因为该段包含标题。相反，我得到了div的类名。

任何人都可以解释这种行为吗？

Answer 1

将标题元素（<h1>，<h2>等）放在段落元素中是无效的html。

您的浏览器可能正在关闭<h3>元素之前的段落元素，因此<h3>的父级成为您的container <div>，

Answer 2

“我期待作为返回'段落'因为该段落包含标题。相反，我得到了div的类名。”

因为<p>和<h3>都是块元素。它们不是彼此放在一起的。就像您无法在<div>或<p>内添加<table>或<tr>。

要使<h3>内联，您必须设置css display: inline。

参考：Why <p> tag can't contain <div> tag inside it?

Answer 3

我相信你有无效的HTML。 你不应该把H3放在段落中，而是放在它上面。 浏览器会选择<div>作为父级，而不是<p>元素

Read this article: Should a heading be inside or outside a <p>?

Answer 4

您收到container而不是paragraph，因为网络浏览器正在更正您的格式错误的HTML代码结构：

错误是<p>元素应包含文本正文而不包含其他元素。

将<p>代码更改为<div>会使代码完全正常运行：

<div class="container">
  <div class="paragraph">
    <h3 class="headline">Some headline ...</h3>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </span>
  </div>

  <div class="paragraph">
    <h3 class="headline">Another headline ...</h3>
    <span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</span>
  </div>
</div>