DOM Манипуляции
Для каждого элемента на странице браузер создает в DOM элементный узел.
Каждый элементный узел имеет набор предопределенных свойств и методов. С помощью этих свойств и методов Вы можете производить различные манипуляции над содержимым элементных узлов объектной структуры.
Интерфейс Node определяет свойства и методы для перемещения по дереву и манипуляций с ним.
32
Полный набор констант типов узлов, определённый в спецификации W3C DOM
(голубым подсвечены узлы, доступные для HTML — JavaScript) В сборке
HTML — JavaScript, которой мы занимаемся, можно использовать
только 5 типов. :
Имя константы |
Значение |
|
Node.ELEMENT_NODE |
1 |
|
Node.ATTRIBUTE_NODE |
2 |
|
Node.TEXT_NODE |
3 |
|
Node.CDATA_SECTION_NODE |
4 |
|
Node.ENTITY_REFERENCE_NODE |
5 |
|
Node.ENTITY_NODE |
6 |
|
Node.PROCESSING_INSTRUCTION_N |
7 |
|
ODE |
||
|
||
Node.COMMENT_NODE |
8 |
|
Node.DOCUMENT_NODE |
9 |
|
Node.DOCUMENT_TYPE_NODE |
10 |
Node.DOCUMENT_FRAGMENT_NODE 11
Описание
Узел элемента (возвращает корневой элемент документа, для HTML-документов это элемент HTML)
Узел атрибута (возвращает атрибут элемента XML- или
HTML-документа) Текстовый узел (#text)
Узел секции CDATA (XML: альтернативный синтаксис для отображения символьных данных)
Узел ссылки на раздел Узел раздела
Узел директивы XML Узел комментария
Узел документа (основа доступа к содержанию документа и создания его составляющих)
Узел типа документа (возвращает тип данного документа, т.е. значение тэга DOCTYPE)
Узел фрагмента документа (извлечение части дерева документа, создание нового фрагмента документа, вставка фрагмента в качестве дочернего элемента какого-либо узла и т.п.)
33
С помощью свойства innerHTML Вы можете получить доступ к содержимому текстового узла DOM объекта.
С помощью свойства nodeName Вы можете узнать имя узла.
С помощью свойства nodeValue Вы можете узнать значения узла.
С помощью свойства parentNode Вы можете обратиться к родительскому узлу элемента.
С помощью свойства childNodes Вы можете обратиться к узлам потомкам элемента.
С помощью свойства attributes Вы можете обратиться к атрибутам узла.
С помощью свойства nodeType Вы можете узнать тип узла. Элементный узел имеет тип 1, атрибутный узел имеет тип 2, текстовый узел имеет тип 3.
34
<html>
<body>
<p id='par' style="color:red">Это абзац. </p> <h3 id='header'>Это заголовок.</h3>
<hr/>
<b>
<script type='text/javascript'> x=document.getElementById('par').nodeName; document.write(x+'<br />'); x=document.getElementById('par').childNodes[0].nodeValue; document.write(x+'<br />'); x=document.getElementById("par").parentNode.nodeName; document.write(x+"<br />"); x=document.getElementById("par").attributes[0].nodeValue; document.write(x+"<br />"); x=document.getElementById("par").nodeType; document.write(x+"<br />"); x=document.getElementById("par").childNodes[0].nodeType; document.write(x+"<br />");
</script>
</b>
</body>
</html>
35
С помощью метода createElement() Вы можете создать элемент.
С помощью метода appendChild() Вы можете вставить созданный элемент в произвольный узел.
36
var newDiv = document.createElement('div')
newDiv.className = 'my-class' newDiv.id = 'my-id' newDiv.style.backgroundColor = 'red‘ newDiv.innerHTML = 'Привет, мир!'
37
Добавить новый элемент к детям существующего элемента можно методом appendChild, который в DOM есть у любого тега.
Код из следующего примера добавляет новые элементы к списку:
<ul id="list"> <li>Первый элемент</li> </ul>
Список:
Первый элемент
// элемент-список UL
var list = document.getElementById('list') // новый элемент
var li = document.createElement('LI') li.innerHTML = 'Новый элемент списка' // добавление в конец list.appendChild(li)
Метод appendChild всегда добавляет элемент последним в список детей.
38
insertBefore
Метод вставляет элемент в страницу.
{Объект}.insertBefore({Элемент страницы, который мы хотим вставить}[, "{Дочерний элемент}"]);
Метод принимает два параметра.
Первый параметр задает ссылку на элемент, который мы хотим вставить.
Второй необязательный параметр задает ссылку на элемент Web-страницы, перед которым будет произведена вставка.
Этот метод возвращает ссылку, на элемент страницы, который мы вставили.
parentElem.insertBefore(newElem, target)
39
Например, в том же списке добавим элементы перед первым li. <ul id="list2">
<li>Первый элемент</li> </ul>
Первый элемент
// родительский элемент UL
var list = document.getElementById('list2')
//элемент для вставки перед ним (первый LI) var firstLi = list.getElementsByTagName('LI')[0]
//новый элемент
var newListElem = document.createElement('LI') newListElem.innerHTML = 'Новый элемент списка‘ // вставка
list.insertBefore(newListElem, firstLi)
40
<html>
<head>
<script type='text/javascript'> var i=0;
function elCreate(){ //Создадим новый абзац
var newpar = document.createElement('p'); i++;
document.body.appendChild(newpar).innerHTML='<b>Я созданный элемент номер '+i+'</b>.';
}
</script>
</head>
<body>
<input type='button' value='Создать новый элемент' onclick='elCreate()'/> <hr />
</body>
</html>
41