isEqualNode 因 html 空白不同而失败

当我使用使用不同空格的 html 字符串时，我发现 Node.isEqualNode() 方法出现意外行为。无论有或没有空格，html 结构都是等效的，但 innerText 属性具有不同的值。

这仅用于测试目的，因此不要对 html 字符串投反对票！

var html = `<table>
              <tbody>
                <tr>
                  <td>a</td>
                  <td>b</td>
                </tr>
              </tbody>
            </table>`

var div_1 = document.createElement('div')
div_1.innerHTML = html

var div_2 = document.createElement('div')
div_2.innerHTML = html.replace(/ |\n/g, '')  // removes whitespace

console.log(div_1)
console.log(div_2)
console.log(div_1.isEqualNode(div_2)) // false

div_1.innerText 包含所有空白以及 a 和 b，而 div_2.innerText 仅包含 a 和 b。

这看起来很奇怪，我想知道这是否是有意的行为。

我认为这是有道理的。在 html 中，元素之间的空格是有意义的。不在您提供的特定表格中，但通常/经常是这样。

但还要注意非词汇空白is期间被忽略isEqualNode检查一下，这很好！

这是一个例子（和a fiddle）演示这两种情况：

var html = [
    `<span>hello</span> <span>world</span>`,
    `<span>hello</span><span>world</span>`,
    `<span
   >hello</span><span
>world</span>`,
];

var divs = [];
html.forEach((x) => {
    var div = document.createElement('div');
    div.innerHTML = x;
    divs.push(div);
});

divs.forEach((x, i) => {
    console.log(i);
    divs.forEach((y, j) => {
        if (j !== i) {
            console.log(`${i}:${j} -- ${x.isEqualNode(y)}`);
        }
    });
});

该代码是边缘时髦与所有i and y and forEach，但我认为仍然是一个有用的演示。

前两个是不同的——我们可以看到这一点。如果是html则显示would be不同的。

第三个有空格但以某种方式评估与第二个完全相同的含义.

<span
   >hello</span><span
>world</span>

第二个和第三个产生helloworld and helloworld（无空格）渲染时！

这就是我们得到的输出：

0
"0:1 -- false"
"0:2 -- false"
1
"1:0 -- false"
"1:2 -- true"
2
"2:0 -- false"
"2:1 -- true"

^{Guess I didn't need to compare half of those as they're repeats, but you get the point.}

还有另一个例子展示了如何DOMParser将这种情况下的内容拆分为文本节点在这个答案.

现在令我烦恼的是，同样的事情也发生在 XML 中，我认为，甚至 Oracle 所说的无关紧要的空白仍然产生一个错误isEqualNode.