Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
DOM и JavaScript
Дерево документа (Document Tree)
Когда браузер загружает страницу, он создает иерархическое отображение ее содержимого похожее на ее HTML структуру. Это результат древообразной организации узлов, каждый из которых содержит элемент, атрибут, текстовый или любой другой объект.
Узлы (Nodes)
Каждый их этих различных типов объектов имеет свои уникальные методы и свойства, а также обеспечивает взаимосвязь узлов (Nodes
). Это общие установки методов и свойств, связанные с древообразной структурой документа. Чтобы лучше понять, как все это происходит, рассмотрим простое дерево узлов.
Каждый узел (Node) содержит свойства, отражающие эту структуру и позволяющие перемещаться по всем узлам дерева документа. Ниже показаны примеры взаимоотношений этих узлов:
- NodeA
.firstChild
= NodeA1 - NodeA
.lastChild
= NodeA3 - NodeA
.childNodes.length
=3
- NodeA
.childNodes[0]
= NodeA1 - NodeA
.childNodes[1]
= NodeA2 - NodeA
.childNodes[2]
= NodeA3 - NodeA1
.parentNode
= NodeA - NodeA1
.nextSibling
= NodeA2 - NodeA3
.previousSibling
= NodeA2 - NodeA3
.nextSibling
=null
- NodeA
.lastChild.firstChild
= NodeA3a - NodeA3b
.parentNode.parentNode
= NodeA
Типы узлов (Node Types)
В Объектной Модели Документа определены несколько типов узлов,
но в разметке web-страницы в основном используются element
и text
.
Узел Element
соответствует отдельному тэгу или паре тэгов в HTML коде. У него могут быть дочерние узлы (child node),
которые могут быть элементами или текстовыми узлами.
Узел Text
представляет обычный текст, или набор символов. У него предполагается наличие родительского узла (parent node),
могут быть соседние узлы от того же родительского (sibling), но не может быть дочерних узлов (child node).
Методы узлов
node.insertBefore(newNode,oldNode)
- Добавляет newNode в качестве дочернего по отношению к узлу node и размещает его перед уже существующим узлом oldNode.node.removeChild(oldNode)
- Удаляет из узла node его дочерний узел oldNode. Пример удаления последнего (lastChild) узла внутри узла sample1:var el = document.getElementById("sample1"); if(el.hasChildNodes()) el.removeChild(el.lastChild);
node.appendChild(newNode)
- Добавляет newNode в качестве дочернего по отношению к узлу node и делает его последним дочерним узлом.newNode = node.cloneNode(bool)
- Создает newNode, как копию узла node. Если bool=true, newNode будет содержать также все дочерние узлы оригинального node.node.replaceChild(newNode, oldNode)
- Заменяет дочерний узел oldNode узла node на новый newNode.node.normalize()
- Вызов этого метода "подчищает" дерево узлов, собирая соседние текстовые узлы в единый текстовый узел и удаляя пустые.node.getElementsByTagName(tagname)
. - Находит все дочерние по отношению к node элементы с тегом, указанным в tagname и возвращает их в виде массива объектов. Для примера, сделать все ссылки на странице красными можно таким образом:var nodeList = document.getElementsByTagName("a"); for (var i = 0; i < nodeList.length; i++) nodeList[i].style.color = "#f00";
node.getElementsByName('name')
- Находит все элементы с аттрибутом name, значение которого указано в name и возвращает их в виде массива объектов.node.getAttribute()
- получить значение атрибута элементаnode.setAttribute()
- установить значение атрибута элемента.
Альтернативное обращение<img id="myImg" src="pic0.jpg"> <script> var el = document.getElementById("myImg"); el.setAttribute("src", "pic1.jpg"); </script>
var el = document.getElementById("myImg"); el.src="pic1.jpg";
Свойства узлов
node.nodeType
- Возвращает константу, которая соответствует типу данного узла node (1 = элемент, 2 = атрибут, 3 = текст...).node.nodeName
- Возвращает имя узла node в зависимости от его типа.node.nodeValue
- Возвращает или устанавливает значение узла node в зависимости от его типа (в случае с текстовым узлом возвращает непрерывное текстовое содержимое узла). Пример:document.getElementById('sample1').firstChild.nodeValue='Заменяющий текст';
node.lastChild
- возвращает последний дочерний элемент для<html>
, т.е. тэг<body>
.node.firstChild
- возвращает первый дочерний элемент внутри<body>
.node.tagName
- возвращает название тэга, в данном случае"p"
.document.documentElement
- возвращает тэг<html>
.
Корень Документа (Document Root)
Объект document
является основанием дерева документа.
Он обслуживается тем же интерфейсом, что и узел (Node
). У него есть дочерние узлы (child nodes),
но отсутствуют родительский узел (parent node) и узлы одного с ним уровня, так как он начальный узел.
В добавление к существующему Node-интерфейсу, он содержит Document-интерфейс.
Этот интерфейс содержит методы доступа к другим узлам и создания новых узлов в дереве документа. Вот некоторые из них:
document.getElementById()
. Для работы с ним необходимо добавить атрибутid
тэгу , тогда появляется возможность обращаться к элементу напрямую:<p id="myP">Здесь какой-то текст.</p> alert(document.getElementById("myP").tagName);
document.createElement() - создает html-элемент указанного типа (тега)
<div id="sample4">Этот текст внутри элемента DIV.</div> <script> var paraEl, boldEl; paraEl = document.createElement("p"); boldEl = document.createElement("b"); paraEl.appendChild( document.createTextNode("Это новый параграф с ") ); boldEl.appendChild( document.createTextNode("полужирным") ); paraEl.appendChild( boldEl); paraEl.appendChild( document.createTextNode(" текстом, добавлен в DIV") ); document.getElementById("sample4").appendChild(paraEl); </script>
Сперва здесь создаем два новых элемента: тэги <p> и <b>. Затем элементу параграфа (P) добавляем новый текстовый узел со строкой "Этот новый параграф с ". Таким же образом добавляем "полужирным" элементу B. Затем добавляем этот элемент B (включая его дочерний текстовый узел) к параграфу. И следующий текстовый узел со строкой " текстом, добавлен в DIV" также добавляем к параграфу.
В данном случае элемент параграфа содержит три дочерних узла: текстовый узел (text node); узел элемента для тэга <b>; еще один текстовый узел. У элемента B только один текстовый узел. Завершающий этап — добавление вновь созданного параграфа существующему на странице тэгу <div>.
document.createTextNode()
var text = document.createTextNode(" новый текст " ); var el = document.getElementById("sample1"); el.appendChild(text);
Перемещение по Дереву Документа
Формально, объект document
имеет только один дочерний элемент (child element) устанавливаемый как document.documentElement
.
Для web-страниц он установлен тэгом <html>
, который является корневым элементом дерева документа.
У него есть дочерние элементы, установленные тэгами <head>
и <body>
, у которых в свою очередь, есть другие дочерние элементы.
Учитывая это и используя методы интерфейса Node
можно перемещаться по дереву документа и обращаться к любому узлу этого дерева. Рассмотрим пример:
<html>
<head>
<title></title>
</head>
<body><p>Здесь какой-то текст.</p></body>
</html>
и этот код:
alert(document.documentElement.lastChild.firstChild.tagName);
previousSibling
- Возвращает узел, находящийся непосредственно перед узлом node.nextSibling
- Возвращает узел, находящийся непосредственно после узла node.childNodes
- Возвращает список, который содержит все дочерние узлы узла node. Первый и последний дочерний узел можно найти с помощью node.firstChild и node.lastChild, которые возвращают объект.parentNode
- Возвращает родительский узел узла node в качестве объекта.
Атрибуты узлов
Атрибуты можно добавлять и изменять getAttribute()
и setAttribute()
.
Атрибуты можно удалять из узла элемента, используя метод removeAttribute()
или removeAttributeNode()
, а также заменяя element.attributeName
пустой строкой ("").
Изменение атрибутов — один из вариантов создания динамических эффектов. Например можно легко изменить выравнивание текста по правому или левому краю:
<p id="sample1" align="left">Здесь какой-то текст.</p>
<p>
<a href="" onclick="document.getElementById('sample1').setAttribute('align', 'left'); return false;">Нале-во!</a>
<a href="" onclick="document.getElementById('sample1').setAttribute('align', 'right'); return false;">Напра-во!</a>
</p>
className
и HTMLfor
- Некоторые названия атрибутов HTML-элементов состоят из зарезервированных слов. Поэтому вместо class следует использовать className и HTMLfor вместо for.
Атрибуты стилей
Большинство атрибутов для HTML тэгов примитивны, они могут определять значение свойства только конкретному тэгу. Применение стилей более интересно. Как известно, CSS может быть использовано для применения параметров стилей к одному тэгу, всем однотипным тэгам или назначено с помощью классов (class
). Более того, некоторые элементы наследуют стили вышестоящих элементов.
Вы можете добавлять стили элементам. Для примера, можно изменить атрибут style
или class
HTML тэгу. Но этот метод добавит элементу все параметры стилей. Часто приходится только какой-нибудь один или несколько параметр стиля убрать или изменить, не трогая остальные.
Атрибут style
узла элемента определен как объект со свойствами для всех возможных параметров стилей. Можно получить доступ и изменить каждый отдельный параметр стиля как угодно. Следующий пример похож на предыдущий:
Здесь какой-то текст.
Но в этом случае выравнивание текста определено параметрами стилей вместо атрибута align
. Вот фрагмент кода:
<p id="sample2" style="text-align:right">Здесь какой-то текст.</p>
<p>
<a href="" onclick="document.getElementById('sample2').style.textAlign = 'left'; return false;">Нале-во!</a>
::
<a href="" onclick="document.getElementById('sample2').style.textAlign = 'right'; return false;">Напра-во!</a>
</p>
Здесь следует обратить внимание на то, что названия свойств в CSS пишутся через дефис "-" (text-align), тогда как название свойства style
здесь будет написано textAlign
,
т.е. убираем дефис и следующую за ним букву делаем прописной.
А кроме этого, если параметры стилей изначально не были присвоены элементу, им все-равно можно устанавливать значения используя DOM.
Например, в коде выше атрибут style=
тэга "p" можно было вообще не указывать.
Читать дальше: Формы в JavaScript