С javascript ( JS ) всё несколько сложнее. На момент написания статьи существовали две различных интерпретации стандарта ECMA-262 : это javascript , используемый в MZ , NN , Opera и JScript в IE . Внутренняя организация у них разная, но интерфейсы практически одинаковы. Примечательно, что Opera 7+, MZ и NN позволяют достаточно легко расширять интерфейс для реализации совместимости с IE .

В современных альтернативных пользовательских агентах проблема доступа к элементам страницы ушла на второй план, поскольку разработчики добавили в браузеры большинство специфичных для IE объектов. Тем не менее, мы рекомендуем для работы с элементами страницы использовать DOM. На момент написания статьи, существовали три уровня этого стандарта: «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-документа. К отдельным элементам коллекции можно обращаться по его индексу или имени. Для каждого браузера существуют разные представления этих коллекций.

Напротив, 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>