JavaScript
С JavaScript ( JS ) всё несколько сложнее. На момент написания статьи существовали две различных интерпретации стандарта (http://www.ecma-international.org/ publications/ standards/ Ecma-262.htm): это JavaScript , используемый в MZ , NN , Opera и JScript в IE . Внутренняя организация у них разная, но интерфейсы практически одинаковы. Примечательно, что Opera 7+, MZ и NN позволяют достаточно легко расширять интерфейс для реализации совместимости с IE .
В современных альтернативных пользовательских агентах проблема доступа к элементам страницы ушла на второй план, поскольку разработчики добавили в браузеры большинство специфичных для IE объектов. Тем не менее, мы рекомендуем для работы с элементами страницы использовать . На момент написания статьи, существовали три уровня этого стандарта: «DOM Level 1» описывает основные интерфейсы, «DOM Level 2» вводит дополнение XML Namespaces, «DOM Level 3» определяет методы Load и Save. Современными браузерами наиболее полно поддерживается «DOM Level 1».
Приведём простейший пример, когда DOM помогает сделать кросс-браузерную реализацию сворачивания/разворачивания определённого блока div :
<a href="javascript://" onclick="myShow();return false;">[+]</a> <a href="javascript://" onclick="myHide();return false;">[-]</a> <div id="myBlock" onclick="hideThis();" style="border: 1px #000 solid; width: 100%;"> Нажмите на «[+]» чтобы показать этот блок.< br /> Нажмите на «[-]» чтобы спрятать этот блок. </div> <script type="text/javascript"><!--//--><![CDATA[//><!-- // Метод неверен. Не будет работать в Mozilla и Netscape. function myHide() { myBlock.style.display = "none"; } function myShow() { myBlock.style.display = "block"; } //--><!]]></script>
Этот пример будет работать в IE и Opera , но не будет работать в Mozilla и NN . В окне «Консоль JavaScript » последних двух браузеров будет указана ошибка: «myBlock is not defined» (рис. 3). Дело в том, что мы обращаемся к элементу через коллекцию объектов по его идентификатору (id). Коллекция — это упорядоченный в порядке появления в HTML -коде набор свойств, представляющий собой набор элементов HTML-документа. К отдельным элементам коллекции можно обращаться по его индексу или имени. Для каждого браузера существуют разные представления этих коллекций.
Рис. 3. Консоль JavaScript в Mozilla 1.7.2.
Напротив, Document Object Model поддерживается всеми клиентами одинаково. При его использовании мы получим правильную работу нашего примера во всех браузерах:
<script type="text/javascript"><!--//--><![CDATA[//><!-- // Правильный метод: использование DOM. var el = document.getElementById( "myBlock" ); function myHide() { el.style.display = "none"; } function myShow() { el.style.display = "block"; } //--><!]]></script>
Microsoft использует в IE расширенную модель DOM , которая не полностью совместима со стандартом, определенным W3C. К счастью, эти расширения достаточно легко можно добавить самостоятельно. Следующий пример добавляет функцию RemoveNode из расширения IE в объектную модель MZ , NN и Opera:
<script type="text/javascript"><!--//--><![CDATA[//><!-- if (Node && !Node.prototype) { var node = document.createTextNode(''); var Node = node.constructor; } if (window.Node) { Node.prototype.removeNode = function(removeChildren) { var self = this; if (Boolean(removeChildren)) { return this.parentNode.removeChild(self); } else { var r=document.createRange(); r.selectNodeContents(self); return this.parentNode.replaceChild(r.extractContents(),self); } } } //--><!]]> </script>
