2010-07-31 86 views

回答

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

0

這些不是真正的元素,而是文本節點,因爲它們應該是。 HTML元素包含文本節點。

<p>text</p> 

paragraph元素不包含元素,它包含一個文本節點。

但我注意到的一件事是,您的標記無效,因此Firefox內的DOM樹與Chrome不一致。

該文本節點「作爲評註」應該是該段的含鉻的div是使它關閉p一個孩子,但span(本款擁有)的無效性,使文本節點成爲兄弟。當HTML解析器創建樹時,它會到達<div>並意識到它已經在pspan中,並且span不能包含div,因此它會關閉p並創建一個新元素div

Firefox的DOM樹是寬鬆的,實際上允許嵌套繼續。這是您所指的文本節點位置不一致的原因。

基本上,你有這樣的:

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

瀏覽器把它變成

<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內。

0

這可能是您的瀏覽器。 FireBug中沒有這種東西。