4.3.4.Свойства элементов dom
Некоторые свойства элементов, полезные при работе с DOM:
tagName - содержит имя тега в верхнем регистре, только для чтения;
style - управляет стилем. Оно аналогично установке стиля в CSS;
innerHTML - содержит весь HTML-код внутри узла, и применяется, в основном, для динамического изменения содержания страницы;
className - задает класс элемента, аналогично html-атрибуту «class»;
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>
4.3.5.Атрибуты элементов dom
Являясь элементом HTML, DOM-элемент может иметь любое количество атрибутов.
В следующем примере элемент div имеет атрибуты id, class и нестандартный атрибут alpha:
<div id="MyElement" class="big" alpha="omega"></div>
Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:
setAttribute(name, value) – устанавливает значение атрибута;
getAttribute(name) – получить значение атрибута;
hasAttribute(name) – проверить, есть ли такой атрибут;
removeAttribute(name) – удалить атрибут.
Имя атрибута является регистронезависимым.
В некоторых случаях между понятием «свойство» и «атрибут» имеется связь – браузер синхронизирует значения стандартных свойств с атрибутами. Если меняется атрибут, то меняется и свойство с этим именем, и наоборот. Такая синхронизация гарантируется для всех основных стандартных атрибутов. При этом атрибуту с именем class соответствует свойство className, т.к. ключевое слово class зарезервировано в javascript.
Следующий пример показывает идентичность атрибута и свойства с именем id:
<html>
<head>
<script>
function go() {
document.body.setAttribute('id', 'NewId'); //устанавливаем атрибут
alert(document.body.id) //читаем его значение как свойство
}
</script>
</head>
<body>
<input type="button" onclick="go()" value="Go"/>
</body>
</html>
4.3.6.Добавление и удаление элементов dom
Чтобы создать новый элемент - используется метод document.createElement(тип). Для того, чтобы элемент увидеть на странице, его необходимо добавить в дерево DOM. Это можно сделать методом appendChild, который в DOM есть у любого элемента.
В следующем примере в конец дерева DOM (в конец страницы) добавляется строка текста:
<html>
<head>
<script>
function go() {
var newDiv = document.createElement("div"); //создание элемента
newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элента
newDiv.style.backgroundColor = "red";
document.body.appendChild(newDiv) //добавление нового элемента в дерево
}
</script>
</head>
<body>
Текст
<input type="button" onclick="go()" value="Go"/>
</body>
</html>
Новый элемент можно добавить не в конец детей, а перед нужным элементом. Для этого используется метод insertBefore родительского элемента. Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять.
<html>
<head>
<script>
function go() {
var newDiv = document.createElement("div"); //создание нового элемента
var oldDiv = document.getElementById("id1"); //получение существующего элемента
newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элемента
newDiv.style.backgroundColor = "blue";
document.body.insertBefore(newDiv,oldDiv) //добавление нового элемента перед существующим
}
</script>
</head>
<body>
<div id="id1">Текст</div>
<input type="button" onclick="go()" value="Go"/>
</body>
</html>
Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя. Если родитель элемента неизвестен, то его легко получить при помощи функции parentNode. Следующий пример реализует добавление элемента и его удаление двумя способами.
<html>
<head>
<script>
function add() {
var newDiv = document.createElement("div"); //создание нового элемента
newDiv.innerHTML = "Привет, мир!"; //установка свойств нового элемента
newDiv.style.backgroundColor = "green";
newDiv.id="id1";
document.body.appendChild(newDiv) //добавление нового элемента
}
function del1() {
var toDel = document.getElementById("id1"); //получение элемента для удаления
document.body.removeChild(toDel) //удаление элемента как потомка body
}
function del2() {
var toDel = document.getElementById("id1"); //получение элемента для удаления
toDel.parentNode.removeChild(toDel) //удаление элемента как потомка своего родителя
}
</script>
</head>
<body>
Текст
<input type="button" onclick="add()" value="Добавить"/>
<input type="button" onclick="del1()" value="Удалить1"/>
<input type="button" onclick="del2()" value="Удалить2"/>
</body>
</html>
В следующем примере продемонстрировано добавление элемента маркированного списка и удаление произвольного элемента списка:
<html>
<head>
<script>
function add(form) {
var newDiv = document.createElement("li"); //создание нового элемента списка <li>
newDiv.innerHTML = form.about.value+"<input type=\"button\" onclick=\"del(this)\" value=\"Удалить\"/>";
newDiv.style.backgroundColor = "#3FD3A7";//установка свойств нового элемента
var list=document.getElementById("list1"); //получение элемента-списка по id
list.appendChild(newDiv) //добавление нового элемента
}
function del(toDel) { //toDel - передаваемый элемент <input>
var toDel_parent=toDel.parentNode; //получение дочернего элемента - <li>, куда входит передаваемый <input>
toDel_parent.parentNode.removeChild(toDel_parent) //удаление элемента <li> как потомка своего родителя
}
</script>
</head>
<body>
Список:
<ul id="list1">
</ul>
<form>
<input type="text" name="about">
<input type="button" onclick="add(this.form)" value="Добавить"/>
</form>
</body>
</html>
