В JavaScript дерево DOM следует иерархической структуре, содержащей большой список узлов. Структура начинается с корневого узла (Документ), а затем дополняется родительским и дочерним узлами. Чтобы получить доступ к этим дочерним узлам, JavaScript предлагает « дочерние узлы ' свойство. Это свойство помогает пользователям получить доступ ко всем или к определенному дочернему узлу связанного родительского элемента.
В этом посте подробно рассказывается о цели и работе свойства «childNodes» элемента HTML DOM в JavaScript.
Что такое свойство элемента HTML DOM «childNodes» в JavaScript?
“ дочерние узлы ” — это свойство только для чтения, которое возвращает список всех дочерних узлов элемента в виде объекта NodeList. Это специальное свойство также можно использовать для доступа к конкретному дочернему узлу родительского элемента. Дочерний узел начинается с индекса «0 (ноль)». Кроме того, пробелы, комментарии и текстовые узлы также считаются дочерними узлами.
Синтаксис
element.childNodes
Обобщенный выше синтаксис возвращает объект NodeList, содержащий дочерние узлы целевого элемента.
Давайте используем определенные выше синтаксисы на практике.
HTML-код
Во-первых, взгляните на указанный HTML-код:
< див идентификатор '=' 'Див' стиль '=' 'граница: 2 пикселя сплошного черного цвета; высота: 200 пикселей; ширина: 250 пикселей; отступы: 10 пикселей' >< h2 > Первый заголовок h2 >
< h3 > Второй заголовок h3 >
< п > Первый параграф п >
< п > Второй абзац п >
див >
< п идентификатор '=' 'для' > п >
В приведенных выше строках кода:
- Добавить ' <дел> » с идентификатором «Div», стилизованный с помощью указанных свойств (граница, высота и ширина).
- В элементе «» определите два заголовка и два абзаца соответственно.
- Наконец, « <р> » встраивает пустой абзац с идентификатором «para».
Примечание: Указанный HTML-код рассматривается на протяжении всего этого поста.
Пример 1. Применение свойства «childNodes» для получения общего количества дочерних узлов определенного элемента
В этом примере используются свойства «childNodes» и «length», чтобы получить общее количество дочерних узлов, присутствующих в конкретном родительском элементе.
JavaScript-код
Давайте следовать указанному коду:
< сценарий >
константный элемент = document.getElementById ( 'Див' ) ;
позволять число = элемент.childNodes.length;
документ.getElementById ( 'для' ) .innerHTML = 'Ценить: ' + номер;
сценарий >В приведенных выше строках кода:
- Переменная «elem» использует « получитьэлемент по идентификатору() » для доступа к родительскому элементу с идентификатором «Div».
- Переменная «num» использует « дочерние узлы ' и ' длина », чтобы получить количество дочерних узлов, присутствующих в доступном элементе «».
- Наконец, метод «getElementById()» извлекает встроенный пустой абзац по его идентификатору «para», чтобы добавить к нему значение переменной «num».
Выход
Вывод означает, что существует всего « 9 » дочерние узлы в данном элементе «
», включая пробелы между элементами.Пример 2. Применение свойства «childNodes» для получения имени определенного дочернего узла
Свойство «childNodes» также можно использовать со свойством «nodeName», чтобы получить имя дочернего узла (узлов). Давайте посмотрим на это практически.
JavaScript-код
Пройдите следующий код:
< сценарий >
константный элемент = document.getElementById ( 'Див' ) ;
позволять число = elem.childNodes [ 1 ] .имя_узла;
документ.getElementById ( 'для' ) .innerHTML = 'Элемент:' +число;
сценарий >Здесь « дочерние узлы Свойство связано со свойством « имя_узла », чтобы получить указанное имя дочернего узла на основе доступного индекса, т. е. «1».
Выход
На выходе отображается имя дочернего узла, т. е. элемент «H2» по указанному индексу.
Пример 3. Применение свойства «childNodes» для изменения цвета текста определенного дочернего узла
В этом примере обсуждаемое свойство используется для изменения цвета целевого индексированного дочернего элемента.
JavaScript-код
Рассмотрим следующий код:
< сценарий >
документ.getElementById ( 'Див' ) .childNodes [ 3 ] .стиль.цвет = 'зеленый' ;
сценарий >Здесь « получитьэлемент по идентификатору() » извлекает родительский элемент «
» через его идентификатор «Div» и его дочерний узел, помещенный в указанный индекс через « дочерние узлы собственности соответственно. После этого используйте « стиль.цвет », чтобы изменить цвет текста доступного дочернего узла.Выход
Вывод подтверждает, что цвет текста указанного дочернего узла был соответствующим образом изменен.
Заключение
В JavaScript « дочерние узлы » извлекает объект nodeList, содержащий дочерние узлы целевого элемента HTML. Доступ к дочерним узлам можно получить сразу или к нужному, указав номер индекса с помощью свойства «childNodes». Это свойство позволяет выполнять функцию JavaScript для выполнения специальных задач на дочерних узлах, к которым осуществляется доступ. В этой статье подробно рассматривается применение свойства «childNodes» в JavaScript.