English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Основы

JavaScript Объекты

JavaScript Функции

JS HTML DOM

JS БраузерBOM

AJAX Основы

JavaScript Справочник

Навигация JS DOM

HTMLDOMпозволяетJavaScriptперемещатьсявдеревеузловс помощьюотношенийузлов.

DOMузлы

СогласностандартуW3CHTMLDOM,всесодержаниеHTMLдокументаявляетсяузлом:

  • Всёдокументявляетсяузломдокумента

  • КаждыйHTMLэлементявляетсяузломэлемента

  • ТекствнутриHTMLэлементавыявляетсяузломтекста

  • КаждаяHTMLсвойствоявляетсяузломсвойства(неrecommended)

  • Всеannotaciiявляютсяузламиannotacii(неrecommended)

ИспользуяHTML DOM, можнодоступитьквсимузламдереваноделовс помощьюJavaScript.

Можновыполнятьсозданиеновыхузловиизменениеилиудалениевсехузлов.

Отношенияузлов

Узлывдеревеузловимеютиерархическиеотношения.

Термины“родитель”，“ребенок”и“братьяисестры”используютсядляописанияотношений.

  • Вдеревеузловверхнийузелназываетсякорнем(иликорневымузлом)

  • Укаждогоузлаестьодинродителькромекорневогоузла(укорневогоузланетродителя)

  • Уузламожетбытьнесколькоподузлов

  • Братьяисестры(братьяисестры)являютсяузламисодинаковымродителем

<html>
　　<head>
<title>DOM　Tutorial</title>
　　</head>
　　
<h1>DOM　Nodes</h1>
<p>Hello,　World</p>
　　
</html>

ИзвышеприведенногоHTMLвамможночитать:
<html>являетсякорневымузломинеимеетродителя
<html>являетсяродителем<head>и<body>
<head>являетсяпервымребенком<html>
<body>являетсяпоследнимребенком<html>
и：
<head>имеетодногоребенка：<title>
<title>имеетодногоребенка（одинтекстовыйузел）：“ DOM Tutorial”
<body>имеетдвохдетей：<h1>и<p>
<h1>имеет ребенка (текстовый узел): «DOM Nodes»
<p>имеет ребенка (текстовый узел): «Hello, world»
<h1>и<p>являются однородными

Навигация между узлами

Вы можете использовать следующие свойства узлов для навигации между узлами с JavaScript:

Доступ к подузлу

Вы можете использоватьfirstChildСвойства DOM-узла для доступа к первому прямому подузлу узла.

<p id="para">
　　<span>Первый span</span>
　　<b>Первый полужирный</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // возвращает SPAN
</script>
Проверьте, чтобы увидеть <‹/›>

Примечание:В предыдущем примере, вывод будет:#text,Потому что текстовый узел вставлен для поддержания пробелов между маркерами.#textузел, от одного пробела до нескольких пробелов, табуляций и т.д.

Но, если удалить пробелы, они не будут вставлены#textузел, и элемент span станет первым подузлом абзаца:

<p id="para"><span>Первый span</span> <b>Первый полужирный</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName); // возвращает SPAN
</script>
Тестировать, чтобы увидеть‹/›

Доступ к первому ребенку можно также выполнить следующим образом:

para.childNodes[0].nodeName; // возвращает SPAN
Тестировать, чтобы увидеть‹/›

Вы можете использоватьlastChildСвойства DOM-узла для доступа к последнему прямому подузлу узла.

para.lastChild.nodeName; // возвращает B
Тестировать, чтобы увидеть‹/›

Чтобы избежать возникновения#textили#commentНodusfirstChildиlastChildВы можете выбрать один из следующих вариантов для решения этой проблемы:

firstElementChildСвойство возвращает первый подузел заданного родительского элемента.

<p id="para">
　　<span>Первый span</span>
　　<b>Первый полужирный</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // возвращает SPAN
</script>
Тестировать, чтобы увидеть‹/›

lastElementChildСвойство возвращает последний подузел заданного родительского элемента.

<p id="para">
　　<span>Первый span</span>
　　<b>Первый полужирный</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName); // возвращает B
</script>
Тестировать, чтобы увидеть‹/›

Примечание:ЭтотnodeNameЭто только чтение свойство, возвращающее имя текущего узла в виде строки.

Доступ к родительскому узлу

Вы можете использоватьparentNodeСвойство позволяет обращаться к родительскому узлу в DOM-дереве.

<div>
　　　<p>Это первый абзац DIV</p>
　　　<p id="para">This is second P inside DIV</p>
　　　<p>This is third P inside DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName); // возвращает DIV
</script>
Тестировать, чтобы увидеть‹/›

Вы также можете использоватьparentElementАтрибут возвращает родительский элемент элемента.

для доступа к братским узлам

Вы можете использоватьpreviousSiblingиnextSiblingАтрибут позволяет получить доступ к предыдущему и следующему узлам в DOM-дереве.

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>
Тестировать, чтобы увидеть‹/›

Или, вы можете использоватьpreviousElementSiblingиnextElementSiblingЧтобы пропустить любые пустые текстовые узлы и получить предыдущий и следующий элементы同级.

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>
Тестировать, чтобы увидеть‹/›

textContentАтрибут представляет текстовое содержимое узла.

Корневой узел DOM

Следующие два атрибута позволяют получить доступ ко всему документу:

document.bodyАтрибут устанавливает или возвращает элемент.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Корневой узел DOM</p>
　　<p>Атрибут document.body устанавливает или возвращает элемент body документа.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>
Тестировать, чтобы увидеть‹/›

document.documentElementАтрибут возвращает документ.<html>Элемент.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Корневой узел DOM</p>
　　<p>Атрибут document.documentElement возвращает корневой элемент документа.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>
Тестировать, чтобы увидеть‹/›

Свойство nodeType

nodeTypeСвойство возвращает тип узла в цифровом виде.

var x = document.getElementById("myPara").nodeType;
Тестировать, чтобы увидеть‹/›

DOM-дерево состоит из узлов различных типов, таких как элементы, текст, комментарии и т.д.

У каждого узла естьnodeTypeАтрибуты, используемые для поиска типов узлов, подлежащих обработке.

В таблице перечислены основные типы узлов:

НodusТипПример
ELEMENT_NODE1 шт.<p class="heading">Привет, мир</p>
ATTRIBUTE_NODE2　class =“heading”（не рекомендуется использовать)
TEXT_NODE3Привет, мир
COMMENT_NODE8<！--Это комментарий-->
DOCUMENT_NODE9Сам документ HTML (родитель <html>)
DOCUMENT_TYPE_NODE10<！doctype html>
Модель объекта окна JSИзменение свойств элементов с помощью JS DOM