Думаю, пост будет интересен начинающим изучать JavaScript и DOM.
Недавно я провозился больше получаса пытаясь понять, почему приведенный ниже код возвращает «undefined» во всех браузерах кроме Internet Explorer'а.
Начинающему изучать JavaScript может показаться, что приведенный выше скрипт должен выводить строку «H1», т.к. логично предположить, что именно элемент
В приведенном ниже коде элемент
Вот эти узлы: «
Это будет так для всех браузеров совместимых со стандартами. Но Internet Explorer нарочно пропускает пустые текстовые узлы (empty text nodes), т.е. узлы содержащие только непечатные символы. Поэтому в InternetExplorer'е узел
На тестовой странице QuirksMode.org вы можете поэкспериментировать со свойством
Недавно я провозился больше получаса пытаясь понять, почему приведенный ниже код возвращает «undefined» во всех браузерах кроме Internet Explorer'а.
<html><br><br><head><br> <title></title><br></head><br><br><body><br><br><div><br> <h1>Header</h1><br> <p>Paragraph</p><br></div><br><br><script type="text/javascript"><br> alert(document.getElementsByTagName('div')[0].firstChild.tagName);<br></script><br><br></body><br><br></html><br><br>* This source code was highlighted with Source Code Highlighter.Начинающему изучать JavaScript может показаться, что приведенный выше скрипт должен выводить строку «H1», т.к. логично предположить, что именно элемент
H1 является первым дочерним узлом (node'ом) элемента DIV. Но это не так. Если следовать спецификации Document Object Model Core, то переносы строк, пробелы и прочие непечатные символы являются текстовыми узлами (text nodes). Таким образом, в приведенном выше коде строка document.getElementsByTagName('div')[0].firstChild возвращает текстовый узел, который не имеет свойства tagName (т.к. по сути тегом не является).В приведенном ниже коде элемент
DIV будет иметь не два дочерних узла, как может сначала показаться, а пять.<div><br> <h1>Header</h1><br> <p>Paragraph</p><br></div>Вот эти узлы: «
\n », «H1», «\n », «P», «\n». Из них три — текстовые узлы (text nodes), два — узлы-элементы (element nodes).Это будет так для всех браузеров совместимых со стандартами. Но Internet Explorer нарочно пропускает пустые текстовые узлы (empty text nodes), т.е. узлы содержащие только непечатные символы. Поэтому в InternetExplorer'е узел
DIV будет содержать не пять, а два дочерних узла.На тестовой странице QuirksMode.org вы можете поэкспериментировать со свойством
childNodes, и убедится в том, что IE не подсчитывает пустые текстовые узлы.