Почему я получаю [текстовый объект] вместо ожидаемого объекта TR с предыдущей настройкой в javascript?

#javascript

Вопрос:

Итак, если у меня есть HTML-код, подобный этому:

 <HTML>
  <HEAD>
    <TITLE>This is a test</TITLE>
  </HEAD>
  <BODY>
    <TABLE>
      <TR>
        <TD>First Cell</TD>
      </TR>
      <TR>
        <TD>Second Cell</TD>
        <TD><A href="#" onclick="alert(this.parentNode.parentNode.previousSibling.childNodes[0].innerHTML); return false;">Click Here</A></TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

Это работает для Internet Explorer, но не для Firefox и, вероятно, других существующих браузеров. По-видимому, Firefox интерпретирует пробел между TR (отступ) как предыдущую настройку родительского TR для ‘this’ в моем коде выше. Таким образом, вместо получения желаемого объекта TR он выдает мне [Текстовый объект].

Итак, теперь мой вопрос в том, почему Firefox не игнорирует пробелы между TR, как это делает Internet Explorer. Я знаю, что могу использовать previousElementSibling, чтобы обойти это, но я хочу знать, почему Firefox делает это и есть ли логическое объяснение или применение для этого. Я пытался найти его в Интернете, но безрезультатно. Итак, если кто-нибудь может сказать мне или дать ссылку, где я могу найти эту информацию, я был бы признателен!

Ответ №1:

Да, вы правы. На самом деле IE принципиально неверен. Вот взгляд Mozilla на это

Вы можете

а) используйте parentNode.getElementsByTagName
б) сглаживайте dom, выполняя цикл loop, пока nodeType не станет тем, что вы искали: Вот более простой сценарий, чем тот, который Mozilla предоставила по ссылке выше:http://blog.tegneblokken.net/2009/08/counting-childnodes-with-javascript-the-whitespace-incident /
c) используйте jQuery

1. 1) не могли бы вы уточнить «сгладить dom», я не совсем понимаю, что вы имеете в виду. 2) Я не собираюсь использовать jQuery, поскольку его библиотека огромна, и просто использовать ее для этого крошечного фрагмента кода бесполезно. 3) Мне не интересно, как решить эту проблему, потому что у меня уже есть. Вопрос в том, почему Firefox интерпретирует пробел как [Текстовый объект]

2. Я думаю, что собираюсь использовать a), поскольку это короткий фрагмент кода, который будет работать для всех браузеров. Спасибо!

Ответ №2:

Пробелы между элементами важны в HTML и во многих ситуациях влияют на рендеринг, даже в IE, поэтому IE здесь странный.

Вы могли бы написать простые функции, чтобы замаскировать это различие:

 function previousSibling(node) {
    while ( (node = node.previousSibling) amp;amp; node.nodeType == 3 amp;amp; /^s*$/.test(node.data));
    return node;
}

function nextSibling(node) {
    while ( (node = node.nextSibling) amp;amp; node.nodeType == 3 amp;amp; /^s*$/.test(node.data));
    return node;
}