Question

我正在查看网页的HTML呈现：http://gothamist.com/2010/07/18/wikileaks_founder_no-show_at_nyc_ha.php

如果你看一下这张图片，你可以看到当我看到DOM时，有一些奇怪的字符符号被“作为评论者”引用

http://img153.imageshack.us/f/screenshot20100730at840.png/

知道这些是什么以及我如何将它们从DOM中删除以获得干净，连续的文本？

谢谢！

Answer 1

这就是WebKit检查器如何表示TextNode

您正在看到多个textnode环绕锚标记。

如果您为该div转储childNodes，它看起来像这样：

0: Text
1: HTMLParagraphElement
2: HTMLDivElement
3: Text
4: Text
5: HTMLAnchorElement
6: Text
7: HTMLAnchorElement
8: Text
9: HTMLParagraphElement
10: Text
11: HTMLParagraphElement
12: Text
13: HTMLParagraphElement
14: Text

在元素检查器的旁边，标记为Text的节点将用引号括起来。这只是元素检查器的一个功能。

知道这些是什么以及我如何将它们从DOM中删除以获得干净，连续的文本？

有些浏览器支持innerText

例如，在该网站上运行：

document.querySelector('.asset-body').innerText

Answer 2

这些不是真正的元素，而是应该是文本节点。 HTML元素包含文本节点。

<p>text</p>

paragraph元素不包含元素，它包含文本节点。

但有一件事我注意到，你的标记无效，因此，Firefox中的DOM树与Chrome不一致。

“作为评论员”的文本节点应该是该段落的子节点，但Chrome中包含span的{{1}}（由段落拥有）的无效性使其关闭div因此文本节点成为兄弟节点。当HTML解析器创建树时，它会到达p并意识到它已经在<div>和p之内且span不能包含span所以它会关闭div并创建一个新元素p。

Firefox的DOM树很宽松，实际上允许嵌套继续。这是您所指的文本节点放置不一致的原因。

基本上你有这个：

div

Chrome将其转换为

<p><span><div>blah</div></span>As a commentor</p>

Firefox让它侥幸成功

<p><span></span></p><div>blah</div>As a commentor

解决方案：验证您的HTML并且不要让<p><span><div>blah</div></span>As a commentor</p>包含span：

http://validator.w3.org/check?uri=http://gothamist.com/2010/07/18/wikileaks_founder_no-show_at_nyc_ha.php&charset=(detect+automatically)&doctype=Inline&group=0

正确标记后，您会看到文本节点应该位于div内。

Answer 3

这可能是你的浏览器。在FireBug中没有这样的东西。

这是什么样的HTML元素？报价？

3 个答案: