To get child nodes in javascript

Get childnode from element

I’d like to give the span of the clicked element some styling but I’d prefer to use the parent element’s id for reference rather than giving each span an id as well. I have tried this, but it doesn’t work:

6 Answers 6

Access to the element 1 of childNodes (not childNode) array to modify the span opacity:

document.getElementById(id).childNodes[1].style.opacity = "1"; 

Yes, this worked! Apart from childNode that should be childNodes I also had the number wrong (should be [1] not [0]). Thanks!

This approach only works by accident. You’ll never know for sure if the index should be 0 or 1 because there may be an invisible child node before the span. See my answer for a more robust solution.

Just correct the typos in your code:

Replace childNone with childNodes .

It should be childNodes not childNode:

Also, habituate to use return the function:

You have a bit of error code

Your idea of selecting a child node by index number will not work in general. That’s because you cannot know for sure what number the span element will have. Depending on how you built the list, there may be invisible child nodes, such as whitespace text nodes, before the span that interests you. That’s why you were surprised to find that you had to use index value 1 rather than 0.

A more robust approach is to call getElementsByTagName(‘span’) on the parent element to retrieve all the spans inside it. Then get the first item in the returned array.

In addition, I suggest that the argument to the function should be the element you want to highlight and not just the ID of the element. If you follow my suggestion, your HTML would look like this:

 
some text 
 
some text 
 
some text 
 

And the function would look like this:

function selectPicture(container)

It would be even better to implement the style change by modifying the className of the span and writing appropriate CSS, but I’ll leave those considerations up to you.

Источник

Навигация по DOM-элементам

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-navigation.

DOM позволяет делать что угодно с HTML-элементом и его содержимым, но для этого нужно сначала нужный элемент получить.

Доступ к DOM начинается с объекта document . Из него можно добраться до любых узлов.

Так выглядят основные ссылки, по которым можно переходить между узлами DOM:

Посмотрим на них повнимательнее.

Сверху documentElement и body

Самые верхние элементы дерева доступны напрямую из document .

= document.documentElement Первая точка входа – document.documentElement . Это свойство ссылается на DOM-объект для тега . = document.body Вторая точка входа – document.body , который соответствует тегу .

В современных браузерах (кроме IE8-) также есть document.head – прямая ссылка на

Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.

В частности, если скрипт находится в , то в нём недоступен document.body .

Поэтому в следующем примере первый alert выведет null :

В мире DOM в качестве значения, обозначающего «нет такого элемента» или «узел не найден», используется не undefined , а null .

Дети: childNodes, firstChild, lastChild

Здесь и далее мы будем использовать два принципиально разных термина.

• Дочерние элементы (или дети) – элементы, которые лежат непосредственно внутри данного. Например, внутри обычно лежат и .
• Потомки – все элементы, которые лежат внутри данного, вместе с их детьми, детьми их детей и так далее. То есть, всё поддерево DOM.

Псевдо-массив childNodes хранит все дочерние элементы, включая текстовые.

Пример ниже последовательно выведет дочерние элементы document.body :

Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент . На самом-то деле в документе есть ещё текст (обозначенный троеточием), но на момент выполнения скрипта браузер ещё до него не дошёл.

Пробельный узел будет в итоговом документе, но его ещё нет на момент выполнения скрипта.

Скажем больше – все навигационные свойства, которые перечислены в этой главе – только для чтения. Нельзя просто заменить элемент присвоением childNodes[i] = . .

Изменение DOM осуществляется другими методами, которые мы рассмотрим далее, все навигационные ссылки при этом обновляются автоматически.

Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему элементу.

При наличии дочерних узлов всегда верно:

elem.childNodes[0] === elem.firstChild elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

Коллекции – не массивы

DOM-коллекции, такие как childNodes и другие, которые мы увидим далее, не являются JavaScript-массивами.

В них нет методов массивов, таких как forEach , map , push , pop и других.

var elems = document.documentElement.childNodes; elems.forEach(function(elem) < // нет такого метода! /* . */ >);

Именно поэтому childNodes и называют «коллекция» или «псевдомассив».

Это возможно, основных варианта два:

Применить метод массива через call/apply :

var elems = document.documentElement.childNodes; [].forEach.call(elems, function(elem) < alert( elem ); // HEAD, текст, BODY >);

var elems = document.documentElement.childNodes; elems = Array.prototype.slice.call(elems); // теперь elems - массив elems.forEach(function(elem) < alert( elem.tagName ); // HEAD, текст, BODY >);

Ранее мы говорили, что не рекомендуется использовать для перебора массива цикл for..in .

Коллекции – наглядный пример, почему нельзя. Они похожи на массивы, но у них есть свои свойства и методы, которых в массивах нет.

К примеру, код ниже должен перебрать все дочерние элементы . Их, естественно, два: и . Максимум, три, если взять ещё и текст между ними.

Но в примере ниже alert сработает не три, а целых 5 раз!

var elems = document.documentElement.childNodes; for (var key in elems) < alert( key ); // 0, 1, 2, length, item >

Цикл for..in выведет не только ожидаемые индексы 0 , 1 , 2 , по которым лежат узлы в коллекции, но и свойство length (в коллекции оно enumerable), а также функцию item(n) – она никогда не используется, возвращает n-й элемент коллекции, проще обратиться по индексу [n] .

В реальном коде нам нужны только элементы, мы же будем работать с ними, а служебные свойства – не нужны. Поэтому желательно использовать for(var i=0; i

Соседи и родитель

Доступ к элементам слева и справа данного можно получить по ссылкам previousSibling / nextSibling .

Родитель доступен через parentNode . Если долго идти от одного элемента к другому, то рано или поздно дойдёшь до корня DOM, то есть до document.documentElement , а затем и document .

Навигация только по элементам

Навигационные ссылки, описанные выше, равно касаются всех узлов в документе. В частности, в childNodes сосуществуют и текстовые узлы и узлы-элементы и узлы-комментарии, если есть.

Но для большинства задач текстовые узлы нам не интересны.

Поэтому посмотрим на дополнительный набор ссылок, которые их не учитывают:

Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element :

• children – только дочерние узлы-элементы, то есть соответствующие тегам.
• firstElementChild , lastElementChild – соответственно, первый и последний дети-элементы.
• previousElementSibling , nextElementSibling – соседи-элементы.
• parentElement – родитель-элемент.

Свойство elem.parentNode возвращает родитель элемента.

Оно всегда равно parentElement , кроме одного исключения:

alert( document.documentElement.parentNode ); // document alert( document.documentElement.parentElement ); // null

Иногда это имеет значение, если хочется перебрать всех предков и вызвать какой-то метод, а на документе его нет.

Модифицируем предыдущий пример, применив children вместо childNodes .

Теперь он будет выводить не все узлы, а только узлы-элементы:

elem.firstElementChild === elem.children[0] elem.lastElementChild === elem.children[elem.children.length - 1]

Других навигационных свойств в этих браузерах нет. Впрочем, как мы увидим далее, можно легко сделать полифил, и они, всё же, будут.

С точки зрения стандарта это ошибка, но IE8- также включает в children узлы, соответствующие HTML-комментариям.

Это может привести к сюрпризам при использовании свойства children , поэтому HTML-комментарии либо убирают либо используют фреймворк, к примеру, jQuery, который даёт свои методы перебора и отфильтрует их.

Особые ссылки для таблиц

У конкретных элементов DOM могут быть свои дополнительные ссылки для большего удобства навигации.

Здесь мы рассмотрим таблицу, так как это важный частный случай и просто для примера.

В списке ниже выделены наиболее полезные:

• table.rows – коллекция строк TR таблицы.

• table.caption/tHead/tFoot – ссылки на элементы таблицы CAPTION , THEAD , TFOOT .
• table.tBodies – коллекция элементов таблицы TBODY , по спецификации их может быть несколько.

• tbody.rows – коллекция строк TR секции.

• tr.cells – коллекция ячеек TD/TH

• tr.sectionRowIndex – номер строки в текущей секции THEAD/TBODY
• tr.rowIndex – номер строки в таблице

• td.cellIndex – номер ячейки в строке

 
 
один
 
два
 
 
три
 
четыре
 
 
  

Даже если эти свойства не нужны вам прямо сейчас, имейте их в виду на будущее, когда понадобится пройтись по таблице.

Конечно же, таблицы – не исключение.

Аналогичные полезные свойства есть у HTML-форм, они позволяют из формы получить все её элементы, а из них – в свою очередь, форму. Мы рассмотрим их позже.

Интерактивное путешествие

Для того, чтобы убедиться, что вы разобрались с навигацией по DOM-ссылкам – вашему вниманию предлагается интерактивное путешествие по DOM.

Ниже вы найдёте документ (в ифрейме), и кнопки для перехода по нему.

Изначальный элемент – . Попробуйте по ссылкам найти «информацию». Или ещё чего-нибудь.

Вы также можете открыть документ в отдельном окне и походить по нему в браузерной консоли разработчика, чтобы лучше понять разницу между показанным там DOM и реальным.

Источник

How to get the children of an element using JavaScript

To get all child nodes of an element, you can use the childNodes property. This property returns a collection of a node’s child nodes, as a NodeList object.

By default, the nodes in the collection are sorted by their appearance in the source code. You can use a numerical index (start from 0) to access individual nodes.

Let us say you have the following HTML code:

ul id="langs"> li>JavaScriptli> li>Nodeli> li>Javali> li>Rubyli> li>Rustli> ul> 

tag and print their content:

const ul = document.querySelector('#langs'); // get all children const childern = ul.childNodes; // iterate over all child nodes childern.forEach(li =>  console.log(li.innerText); >); 

Here is how the output looks like:

undefined JavaScript undefined Node undefined Java undefined Ruby undefined Rust undefined 

Wait, why undefined appears in the output?

This is because whitespace inside elements is considered as text, and text is treated as nodes. It also applies to comments that are considered as nodes too.

If you want to exclude comment and text nodes, use the children property instead. This property returns a collection of a node’s element nodes only, as an HTMLCollection object:

const children = ul.children; // iterate over all child nodes Array.from(children).forEach(li =>  console.log(li.innerText); >); 

Here is how the output looks like now:

JavaScript Node Java Ruby Rust 

The difference between childNodes and children is that childNodes returns a NodeList object containing all nodes, including text nodes and comment nodes, while children returns an HTMLCollection object only containing element nodes.

To get the first and last children of an element, JavaScript provides firstChild and lastChild properties:

const ul = document.querySelector('#langs'); // get first children const firstChild = ul.firstChild; // get last children const lastChild = ul.lastChild; 

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник