Некоторые свойства элементов, полезные при работе с DOM:
1. tagName - содержит имя тега в верхнем регистре, только для чтения;
2. style - управляет стилем. Оно аналогично установке стиля в CSS;
3. innerHTML - содержит весь HTML-код внутри узла, и применяется, в основном, для динамического изменения содержания страницы;
4. className - задает класс элемента, аналогично html-атрибуту «class»;
5. onclick, onkeypress, onfocus и др. - хранят функции-обработчики соответствующих событий.
В следующем примере в цикле перебираются все дочерние элементы элемента body и формируется текстовая строка, содержащая последовательно номера элементов, имена их тэгов и HTML-код узла. Из результатов работы программы видно, что текстовые узлы (текст вне элементов HTML) не имеют свойства innerHTML.
<html>
<head>
<script>
function go() {
var S = "";
for(var i=0; i<document.body.childNodes.length; i++) {
var child = document.body.childNodes[i];
//alert(child.tagName);
S=S+i+"-"+child.tagName+"="+child.innerHTML+" ";
}
alert(S);
}
</script>
</head>
<body>
<div id="dataKeeper">Заголовок</div>
<ul>
<li>Тескт 1</li>
<li>Тескт 2</li>
</ul>
<div id="footer">Конец документа</div>
<input type="button" onclick="go()" value="Go"/>
Текст
</body>
</html>
