Для добавления новых узлов в текущий документ используются следующие методы:
insertBefore(newChild, referenceChild);
appendChild(newChild).
Оба эти метода добавляют новый узел newChild к существующему в документе, appendChild() добавляет новый узел после всех дочерних, insertBefore() добавляет новый узел перед дочерним узлом, указанным
в параметре referenceChild.
Кроме этого, существует метод для копирования существующего узла. В качестве параметра можно указать, должны ли копироваться все дочерние узлы, по умолчанию значение параметра false:
cloneNode(deepСlone).
Удаление и замена узлов в документе
Для удаления узла используются методы:
currentNode. removeChild (child) – в качестве параметра принимает узел для удаления.
currentNode. replaceChild (newChild, oldChild) – заменяет узел oldChild на newChild.
Оба метода должны принадлежать узлу currentNode, у которого удаляются или заменяются дочерние узлы.
Использование каскадных таблиц стилей в DOM
Каждый узел DOM имеет объект style, который описывает применяемые стили. Например, можно изменить цвет шрифта тега <p>, document.getElementById("samplePtag").style.color = «red».
Более подробно обо всех свойствах можно узнать в спецификации CSS (http://www.w3.org/Style/CSS/#specs).
Свойство элемента innerHTML и outerHTML
Кроме методов, описанных выше, для изменения структуры документа испоьзуется более простой метод, основанный на использовании свойств элементов DOM – innerHTML и outerHTML. innerHTML содержит HTML-код между открывающим и закрывающим тегом. С помощью этого свойства можно работать с кодом внутри тега, как со строкой – считывать и записывать. Однако для следующей группы элементов это свойство доступно только для чтения: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
По определению свойство innerHTML не существует у элементов, которые не имеют одновременно открывающего и закрывающего тега (например <br>).
Отличие свойства outerHTML в том, что это свойство включает в себя HTML-код между открывающим и закрывающим тегом, а также открывающий
и закрывающий тег этого элемента.
Для следующих элементов это свойство доступно только при чтении: CAPTION, COL, COLGROUP, FRAMESET, HTML, TBODY, TD, TFOOT, TH, THEAD, TR.
Свойство outerHTML доступно для записи только после того, как весь документ будет загружен, т.е. произойдет событие window.onload.
Ниже приведен пример использования свойств innerHTML и outerHTML:
<!-- пример # 9: использование свойств -->
<html><head>
<script type="text/javascript">
function transformBody() {
var myPar = document.getElementById("myP");
myP.innerHTML = "<i>Hello World!</i>";
myP.outerHTML = "<strong>" + myP.innerHTML
+ "</strong>";
}
</script>
</head>
<body onload="transformBody();">
<p id="myP">sample text</p>
</body>
</html>
<!-- после выполнения функции структура элемента body будет:
<BODY><STRONG><I>Hello World!</I></STRONG></BODY>
-->
Свойства innerHTML и outerHTML не являются официально поддерживаемыми стандартами, однако они поддерживаются всеми современными браузерами. Свойством outerHTML следует пользоваться с большой осторожностью, так как оно поддерживается в меньшем количестве браузеров (например, оно не работает в браузере Firefox).
Event Model
Event Model, или модель событий – это способность языка JavaScript реагировать на изменение состояния документа в браузере, например нажатие на ссылку или отправка заполненной формы.
Ниже приведены основные события, которые поддерживаются всеми современными браузерами:
onblur – происходит, когда пользователь убирает фокус с элемента, например элемента формы;
onchange – происходит, когда элемент формы теряет фокус, и его значение при этом изменилось;
onclick – происходит, когда пользователь нажимает на любой визуальный элемент;
ondblclick – аналогично предыдущему, но при двойном нажатии;
onfocus – происходит, когда элемент получает фокус, то есть пользователь выбирает этот элемент;
onkeydown – происходит, когда пользователь нажимает клавишу на клавиатуре;
onkeypress – происходит, когда пользователь нажимает и отпускает клавишу на клавиатуре;
onkeyup – происходит, когда пользователь отпускает нажатую клавишу;
onload – происходит, когда документ (или фрейм) загружен;
onmousedown – происходит, когда пользователь нажимает клавишу мыши;
onmousemove – происходит, когда пользователь двигает курсором мыши над элементом;
onmouseout – происходит, когда указатель мыши покидает область элемента;
onmouseover – происходит, когда указатель мыши попадает в область элемента;
onmouseup – происходит, когда пользователь отпускает нажатую клавишу мыши;
onreset – происходит, когда значения элементов формы сбрасываются;
onselect – происходит, когда пользователь выделяет текст в элементе формы;
onsubmit – происходит, когда пользователь отсылает форму;
onunload – происходит, когда пользователь покидает текущий документ, то есть закрывает браузер или переходит к другой странице.
События в HTML прописываются следующим способом:
<a href=”sample.html”
onclick=”alert(‘Links clicked’)”>click me</a>
<!-- пример # 10: получение типа броузера -->
<html> <head>
<title>Test of Browser name</title>
</head>
<body>
<h1 align=center>Проверка типа браузера</h1>
<hr>
Чтобы получить имя вашей программы просмотра, следует выбрать кнопку "Browser"
<P><hr><form name=fr>
<input type=button name=browser value=Browser
onClick="window.alert(window.navigator.appName)">
</form>
</body> </html>
