javascript - 如果两个 DOMString 在 JavaScript 中表示相同的 DOM 节点，则最有效的方法是比较它们

Question

我使用 ReactJs 函数 renderToStaticMarkup 创建 HTML 标记。标记位于应用程序中的另一个位置，设置为其他 DOM 节点的 innerHTML 属性。因为我想防止images 和iframes 重新变红，所以我想比较一下，如果当前的innerHTML 与它应该被设置为那个。

if (!domNode.innerHTML !== newMarkup);
    domNode.innerHTML = newMarkup;
}

出于某种原因，Reacts renderToStaticMarkup 为图像 创建了 HTML 标记:

<img src="https://placebeard.it/200x150" alt="" class="content-media-image-linked"/>

但是 DOM innerHTML 的值为

<img src="https://placebeard.it/200x150" alt="" class="content-media-image-linked">

所以基本上区别在于尾随 /(但这不需要是经验法则)

我想知道确定这两个 DOMString 是否代表相同的 DOM 节点的最有效/最快速的方法是什么。

1。字符串比较

可能足以替换/删除所有出现的 />

2。解析/转换为 DOMNode

这是更安全的方法，但也更昂贵。我将不得不使用类似 document.createRange().createContextualFragment 的东西(参见 this post )，而不是使用 isEqualNode 方法。

有人有更好的建议吗？

Answer 1

我想你知道，标签末尾 /> 中的 / 在 HTML 中没有任何意义(在 XHTML 和 JSX 中)，所以我的诱惑是

1. 将/>改成>并比较；如果它们匹配，则它们是相同的。

2. 如果不匹配，解析并使用isEqualNode

在我认为大多数情况下，第一个让您快速获胜。第二种工作速度较慢但更健壮的方式，允许属性以不同的顺序排列而不会引入差异(除非它产生差异)等。

当用 > 替换 /> 时，当然要确保只在正确的地方这样做，这可能会也可能不会很棘手，具体取决于你使用的字符串'正在处理(例如，它们包含嵌套的 HTML 等)。 (如果 HTML 不是像您的 img 示例那样的单个元素，则“您不能只使用简单的正则表达式”中的“棘手”。)