(这个问题与上面的类似问题不同,因为它是关于附加和分离的DOM树之间的差异.)

一小段包含DIV的简单的HTML,元素之间没有空格:

<!DOCTYPE html>
<html>

  <body>
    <div><h1>The Title</h1><p>A paragraph.</p><p>A second paragraph.</p></div>
  </body>

  <script type="text/javascript">

   const div = document.querySelector("div");

   console.log(div.innerText);

   const clone = div.cloneNode(true);
   console.log(clone.innerText);

   document.body.appendChild(clone);
   console.log(clone.innerText);

  </script>
</html>

我将innerText输出到控制台三次.

第一次是原来的DIV:

The Title

A paragraph.

A second paragraph.

第二个是克隆的DIV,我预计它是相同的,但实际上是:

The TitleA paragraph.A second paragraph.​

第三个也是克隆的DIV,但在将其添加到文档后,现在我预计它是:

The Title

A paragraph.

A second paragraph.

如果不是文档的一部分,为什么间距会有所不同?

推荐答案

这是detached个DOM node 的innerText:

如果元素本身不是being rendered(例如,从文档分离或从视图中隐藏),则返回值与Node.textContent属性相同.

这是因为innerText考虑了CSS(在本例中,插入新行的标签的display: block属性(\n)).

algorithm for computing innerText开始,第9步说:

如果 node ‘Display’的Use值是块级或‘TABLE-CAPTION’,则在项的开头和结尾处追加1(必需的换行数).

如您所见,在将克隆的 node 插入到DOM中之后,innerText将返回原始 node 所做的操作,因为它能够计算这些CSS属性:

const div = document.querySelector("div");

console.log("Original, innerText:", JSON.stringify(div.innerText));
console.log("Original, textContent:", JSON.stringify(div.textContent));

const clone = div.cloneNode(true);
console.log("Detached clone, innerText:", JSON.stringify(clone.innerText));
console.log("Detached clone, textContent:", JSON.stringify(clone.textContent));

document.body.appendChild(clone);

console.log("Attached clone, innerText:", JSON.stringify(clone.innerText));
console.log("Attached clone, textContent:", JSON.stringify(clone.textContent));
<div><h1>The Title</h1><p>A paragraph.</p><p>A second paragraph.</p></div>

Javascript相关问答推荐

按下同意按钮与 puppeteer 师

React 17与React 18中的不同setState行为

为什么我的列表直到下一次提交才更新值/onChange

为什么promise对js中的错误有一个奇怪的优先级?

如何使onPaste事件与可拖动的HTML元素一起工作?

对网格项目进行垂直排序不起作用

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

当我点击一个按钮后按回车键时,如何阻止它再次被点击

如何修复使用axios运行TSC index.ts时出现的错误?

Socket.IO在刷新页面时执行函数两次

如何压缩图像并将其编码为文本?

调用特定数组索引时,为什么类型脚本不判断未定义

我在哪里添加过滤器值到这个函数?

JavaScript:多个图像错误处理程序

将字体样式应用于material -UI条形图图例

如何创建一个for循环,用于计算仪器刻度长度并将其放入一个HTML表中?

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)

使用onClick单击子元素时,使用交点观察器的关键帧动画意外运行

CSS网格使页面自动滚动

try 导入material 时出现错误NG0203