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