Question

<div>
   <h1>Heading

div之后的DOM中的第一件事是文本节点，而不是h1元素。为什么DOM包含这个？

（我知道我可以选择h1 firstElementChild而不是firstChild，我只是想知道为什么文本节点就在那里。）

如果我应用样式规则h1:first-child {font-size: 600%;}，它会影响标题，所以我假设“CSS DOM”（如果这是一件事）忽略了这个空格。

也许它与white-space: pre;有关 - 如果您动态应用此DOM必须准备好吗？但这似乎并没有完全解释它。

Answer 1

白空间处理的变化应该是足够的理由，但是既然你已经拒绝了那些令人不满意的东西，我会给你一个不同的例子。

假设标记是这样的：

<section class="test">
    <b>My</b><div>
        <h1>Heading</h1>
    </div>
</section>

如果我们假设<div>开始标记和<h1>开始标记之间的所有空白文本节点都被丢弃，那么它将与

相同

<section class="test">
    <b>My</b><div><h1>Heading</h1>
    </div>
</section>

现在看看如果我们添加这个CSS会发生什么：

.test * { 
   display:inline;
}

＆＃13;

.test * { 
   display:inline;
   
   /* The below property just helps 
      with visibility of the issue */
   font: 400 1em monospace;
}

＆＃13;

<section class="test">
    <b>My</b><div>
        <h1>Heading</h1>
    </div>
</section>

<section class="test">
    <b>My</b><div><h1>Heading</h1>
    </div>
</section>

＆＃13;

而不是

My Heading

我们得到了

MyHeading

很明显，所有空白文本节点都是必需的，不能被丢弃。

为什么DOM在标签之间包含空格？

1 个答案: