Javascript 从innerHTML筛选HTML注释节点

我想知道是否有一种方法可以过滤DOM的innerHTML，只包含实际的HTML并丢弃所有注释节点

---

实际上，我正在与Angularjs合作，并用Selenium编写一些测试。Angular在呈现的HTML中添加了大量注释，例如：

<!-- ngSwitchWhen: join -->
<div data-ng-switch-when="leave">
  <!-- ngIf: isNow -->
  .
  .
  .
</div>

当我试图用Mocha测试返回的DOM结构时，这会产生一个大问题。我做什么测试？我不可能在我的期望值中重复所有无用的评论，那将是极大的浪费

---

有更好的方法吗？

如您所知，注释节点是DOM节点。您可以迭代所有节点，并按它们的：

（我没有包括

递归迭代

函数的代码，但编写一个应该很简单。）

---

---

或者，将它们保留为注释，不要使用DOM节点，而是使用DOM元素

getElementsByTagName

，

querySelectorAll

和friends.

注释节点是DOM节点，如您所知。您可以迭代所有节点，并按它们的：

（我没有包括

递归迭代

函数的代码，但编写一个应该很简单。）

---

---

或者，将它们保留为注释，不要使用DOM节点，而是使用DOM元素

getElementsByTagName

，

querySelectorAll

和朋友。

编写依赖

innerHTML

的测试根本不是一个好主意

获取

innerHTML

时，浏览器将DOM中的信息序列化为一个新的标记字符串，该字符串不一定与最初解析为生成DOM的标记相同

标记详细信息，例如：

<!-- ngSwitchWhen: join -->
<div data-ng-switch-when="leave">
  <!-- ngIf: isNow -->
  .
  .
  .
</div>

• 顺序属性是什么
• 箱子标签是什么
• 标签中有什么空白
• 哪些引号用于分隔属性值
• 哪些内容字符编码为实体或字符引用

不会存储在DOM信息集中，因此不会保留。不同的浏览器可以也将产生不同的输出。在某些情况下，IE甚至会返回无效的标记，或者在解析时不会返回到同一信息集的标记

+1 katspaugh的回答演示了从DOM中获取信息的方法，而不是依赖

innerHTML

，这避免了这个问题

然而，更一般地说，编写强烈依赖于应用程序使用的确切标记的测试通常不是一个好主意。这是测试中的需求和实现细节之间过于紧密的耦合。即使是出于一个微不足道的风格原因或文本更新，您对标记所做的任何微小更改都意味着您必须更新所有测试以匹配。测试是一个有用的工具，可以捕捉到你不想破坏的东西；每次更改都会中断的测试不会给你反馈你是否破坏了某些东西，因此是无用的

虽然通常不存在将测试与应用程序标记完全分离的灵丹妙药，但通常您应该将测试减少到满足用户需求的最低限度，并添加信号以捕获这些情况。我不知道你的应用程序到底在做什么，但我猜要求是这样的：“当用户单击“更多”按钮时，会出现一个繁忙的微调器，让他们知道正在获取信息”

---

要测试这一点，您可以执行类似“id为'log'的元素是否包含类为'icon refresh'的元素？”的检查。如果您想更具体地说，它是一个用于获取活动的微调器，您可以在“获取更多活动…”div中添加一个类似“刷新活动”的类，并使用该类检测元素，而不是依赖可能会更改的文本（尤其是在您翻译应用程序时）.

编写依赖

innerHTML

的测试根本不是一个好主意

获取

innerHTML

时，浏览器将DOM中的信息序列化为一个新的标记字符串，该字符串不一定与最初解析为生成DOM的标记相同

标记详细信息，例如：

<!-- ngSwitchWhen: join -->
<div data-ng-switch-when="leave">
  <!-- ngIf: isNow -->
  .
  .
  .
</div>

• 顺序属性是什么
• 箱子标签是什么
• 标签中有什么空白
• 哪些引号用于分隔属性值
• 哪些内容字符编码为实体或字符引用

不会存储在DOM信息集中，因此不会保留。不同的浏览器可以也将产生不同的输出。在某些情况下，IE甚至会返回无效的标记，或者在解析时不会返回到同一信息集的标记

+1 katspaugh的回答演示了从DOM中获取信息的方法，而不是依赖

innerHTML

，这避免了这个问题

然而，更一般地说，编写强烈依赖于应用程序使用的确切标记的测试通常不是一个好主意。这是测试中的需求和实现细节之间过于紧密的耦合。即使是出于一个微不足道的风格原因或文本更新，您对标记所做的任何微小更改都意味着您必须更新所有测试以匹配。测试是一个有用的工具，可以捕捉到你不想破坏的东西；每次更改都会中断的测试不会给你反馈你是否破坏了某些东西，因此是无用的

虽然通常不存在将测试与应用程序标记完全分离的灵丹妙药，但通常您应该将测试减少到满足用户需求的最低限度，并添加信号以捕获这些情况。我不知道你的应用程序到底在做什么，但我猜要求是这样的：“当用户单击“更多”按钮时，会出现一个繁忙的微调器，让他们知道正在获取信息”

为了测试这一点，您可以做一个类似于“doesheelementwithid”的检查