0

ページの HTML レンダリングをチェックしています: http://gothamist.com/2010/07/18/wikileaks_founder_no-show_at_nyc_ha.php

この画像を見ると、DOM を見るとわかるように、「 As a commenter 」による引用符で奇妙な文字区切りが表示されます。

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

それらが何であるか、そしてDOMからそれらをどのように取り除き、きれいで連続したテキストにするか考えていますか?

ありがとう！

4

3 に答える 3

2

これは、WebKit インスペクターが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

于 2010-07-31T03:53:49.863 に答える
0

これらは実際には要素ではなく、本来あるべきテキスト ノードです。HTML 要素にはテキスト ノードが含まれます。

<p>text</p>

paragraph要素は要素を保持するのではなく、テキスト ノードを保持します。

ただし、マークアップが無効であるため、Firefox 内の DOM ツリーが Chrome と一致していないことに気付きました。

「As a commentor」のテキスト ノードは段落の子である必要がありますが、Chrome でspanを含む (段落が所有する) が無効であるため、テキスト ノードが兄弟になります。HTML パーサーがツリーを作成すると、 に到達し、それが既に and 内にあり、 aは aを含むことができないため、 を閉じて新しい要素である を作成します。divp<div>pspanspandivpdiv

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=(検出+自動)&doctype=Inline&group=0

適切にマークアップすると、テキスト ノードがp.

于 2010-07-31T03:46:32.097 に答える
0

それはおそらくあなたのブラウザです。FireBug ではそのようなことはありません。

于 2010-07-31T03:51:37.467 に答える