Что это за элемент HTML? цитаты?

Question

Я проверяю HTML-рендеринг страницы: http://gothamist.com/2010/07/18/wikileaks_founder_no-show_at_nyc_ha.php

Если вы посмотрите на это изображение, вы увидите, что когда я смотрю на DOM, появляются странные разрывы символов с кавычками "Какcommenter "

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

Есть идеи, что это такое, и как бы я убрал их из DOM, чтобы получить чистый, непрерывный текст?

спасибо!

Answer 1

Именно так инспектор WebKit обозначает 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

Answer 2

Это, вероятно, ваш браузер.В FireBug такого нет.

Answer 3

На самом деле это не элементы, а текстовые узлы, какими они и должны быть. Элементы HTML содержат текстовые узлы.

<p>text</p>

Элемент paragraph не содержит элемент, он содержит текстовый узел.

Однако я заметил, что у вас неверная разметка, и поэтому дерево DOM в Firefox несовместимо с Chrome.

Этот текстовый узел для «Как комментатор» должен быть дочерним по отношению к абзацу, но недействительность span (принадлежащего абзацу), содержащего div в Chrome, заставляет его закрывать p, поэтому текстовый узел становится родным братом. Когда HTML-парсеры создают дерево, оно достигает <div> и понимает, что оно уже находится внутри p и span, а span не может содержать div, поэтому оно закрывает p и создает новый элемент, div.

Дерево DOM Firefox мягкое и фактически позволяет продолжать вложение. Это является причиной несогласованности размещения текстового узла, на который вы ссылаетесь.

В основном у вас есть это:

<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.