document.normalize究竟做了什么？

Question

我读到document.normalize 删除空文本节点,并加入相邻节点.

这究竟是什么意思？

Answer 1

Text节点是这样的:

<p>
  <span>foo</span>
  bar
</p>

<p>是一个节点,<span>是一个节点,那是"bar"什么？→这是一个文本节点.

使用DOM API,可以创建空文本或两个相邻的文本节点:

var wrapper = document.createElement("div");

wrapper.appendChild(document.createTextNode("Part 1"));
wrapper.appendChild(document.createTextNode("Part 2"));

在HTML中<div>Part 1Part2</div>,但是对于DOM来说,它是两个独立的文本节点,这很奇怪.

Node.normalize 将其归一化以消除这种低效的异常现象; 它会将两个文本节点合并为一个,并删除完全为空的文本节点.

Answer 2

鉴于:

p element
   text node containing ""
p element
   text node containing "Hello, "
   text node containing "world"

它会将其转换为

p element
p element
   text node containing "Hello, world"

段落内的文本节点本身没有任何内容,将被完全删除.

两个相邻的文本节点通过组合文本连接在一起形成一个文本节点.