0

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

如果您查看此图像，您会看到当我查看 DOM 时，会出现奇怪的字符中断，并带有“作为评论者”的引号

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

知道这些是什么以及我如何将它们从 DOM 中剥离出来以获得干净、连续的文本吗？

谢谢！

4

3 回答 3

2

这就是 WebKit 检查器表示TextNode的方式

您会看到不止一个 textnode 环绕锚标记。

如果你childNodes为那个 div 转储，它看起来像这样：

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

于 2010-07-31T03:53:49.863 回答
0

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

<p>text</p>

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

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

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

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

基本上你有这个：

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

Chrome 把它变成

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

Firefox 让它逍遥法外

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

解决方案：验证您的 HTML，不要让span包含div：

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

正确标记后，​​您会看到文本节点应该位于p.

于 2010-07-31T03:46:32.097 回答
0

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

于 2010-07-31T03:51:37.467 回答