Как получить данные ребенка javascript - PullRequest
Новая
       8

Как получить данные ребенка javascript

1 голос
/ 15 марта 2020

Может кто-нибудь объяснить мне, что я сделал не так? 

let toolbarForChilds = document.getElementById("toolbar");

for (let i = 0; i < toolbarForChilds.childNodes.length; i++) {
  toolbarForChilds.childNodes[i].style.cursor = "default";
}
<div class="sample-toolbar" id="toolbar" style="text-align: center;">
  <div id="title">#1</div>
  <div id="another thing">#2</div>
</div>

Я получаю эту ошибку в консоли: 

Uncaught TypeError: Cannot set property 'cursor' of undefined

Ответы [ 4 ]

2 голосов
/ 15 марта 2020

Node.childNodes

childNodes включает все дочерние узлы, включая неэлементные узлы, такие как text и комментарий узлов. Чтобы получить коллекцию только элементов, используйте ParentNode.children.

Вам не нужно использовать childNodes. Вы можете выбрать все элементы с помощью querySelectorAll() и l oop через них следующим образом: 

let toolbarForChilds = document.querySelectorAll("#toolbar div");

for (let i = 0; i < toolbarForChilds.length; i++) {
  toolbarForChilds[i].style.cursor = "default";
}
<div class="sample-toolbar" id="toolbar" style ="text-align: center;">
    <div id ="title">#1</div>
    <div id ="another thing">#2</div>
</div>
0 голосов
/ 15 марта 2020

node.childNodes возвращает элементы без атрибутов стиля, такие как текстовые узлы. Для получения только элементов узла, то есть для div: id ="title" & id ="another thing" используйте node.children. Это реализовано ниже. 

let toolbarForChilds= document.getElementById("toolbar");
/* console.log(toolbarForChilds.childNodes); */
for (let i = 0; i < toolbarForChilds.children.length; i++) {
  toolbarForChilds.children[i].style.cursor = "help";
}
<div class="sample-toolbar" id="toolbar" style ="text-align: center;">
    <div id ="title">#1</div>
    <div id ="another thing">#2</div>
</div>
0 голосов
/ 15 марта 2020

Причина, по которой ваш код не работает, состоит в том, что childNodes также включает переводы строк между элементами. Вы можете console.log childNode увидеть их. Ваш код будет работать, если вы упакуете его, чтобы пропустить, хотя вы должны следовать ответу Мамуна для более чистого способа сделать это. 

for (let i = 0; i < toolbarForChilds.childNodes.length; i++) {
    try {
      toolbarForChilds.childNodes[i].style.cursor = "default";
    }
    catch {
        continue;
    }
}
0 голосов
/ 15 марта 2020

Проблема здесь в том, что childNodes не только возвращает elements . Есть также узлы без атрибута стиля. Например, между тегами html есть пустые текстовые узлы . Вы должны увидеть это в консоли браузера, если вы добавите console.log(toolbarForChilds.childNodes[i]); внутрь для l oop.

...