JavaScript, как получить дочерний узел от родителя - дочерний узел появляется в списке узлов, но не может быть получен - PullRequest
0 голосов
/ 21 июня 2019

let div = document.getElementById('parentId');

// This will return a nodeList with the child div         
console.log(div.childNodes);

// This will return an undefined
console.log(div.firstChild);

// This will return 0
console.log(div.childNodes.length);
<div id="parentId" class="column-">
    <div class="item water" id="childId"></div>
</div>

Я создаю приложение javascript, которое использует структуру MVC. Теперь, когда я пытаюсь получить данные из div

Этот div имеет дочерний узел, когда я console.log (div.childNodes)

Появляется дочерний узел, но когда я пытаюсь повторить его самостоятельно Я получил обратно неопределенный И когда я пытаюсь использовать длину, он возвращает 0

Обратился к длинному списку возможных способов повторного определения childenode, но я никогда не давал мне childenode только undefined и длину 0

У меня есть поиск, как сделать ретроспективный анализ childenode, лучшие способы восстановить дочерний узел и многое другое, но ни одно из решений не решает мою проблему

Результат получен: https://pasteboard.co/IkrPqqa.jpg

Я подозреваю, что один из них вернет первый узел ребенка. Но вместо этого он возвращает неопределенное

Кто-нибудь видит, что я делаю неправильно?

Ответы [ 4 ]

0 голосов
/ 21 июня 2019

Узлы и элементы - это не одно и то же в HTML. В то время как Элемент является Узлом, Узел не всегда является Элементом.

Функции получения Handy Element:

Ниже я реорганизовал данный код для получения желаемых результатов.

let div = document.getElementById('parentId');

/*
// This will return a nodeList with the child div         
console.log(div.childNodes);

// This will return an undefined
console.log(div.firstChild);

// This will return 0
console.log(div.childNodes.length);
*/

// This will return an HTMLCollection with the child div         
console.log(div.children);

// This will return the child div element
console.log(div.firstElementChild);

// This will return 1
console.log(div.children.length);
<div id="parentId" class="column-">
    <div class="item water" id="childId"></div>
</div>
0 голосов
/ 21 июня 2019

Кажется, все правильно. Я запустил твой код, он работает для меня. Я приложил картинку вывода для вашего кода

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="main.js"></script>
</head>
<body>
<div id="parentId" class="column-">
    <div class="item water" id="childId">12</div>
</div>

<script>

let div = document.getElementById('parentId');
    console.log(div.childNodes);

// This will return an undefined
console.log(div.firstChild);
console.log(div.firstElementChild);
console.log(div.childNodes[0]);
console.log(div.childNodes['0']);
console.log(div.childNodes["0"]);

// This will return 0
console.log(div.childNodes.length);
</script>
</body>
</html>

введите код здесь

Вот изображение вывода

0 голосов
/ 21 июня 2019

Существует много видов типов узлов (Узел элемента, Узел текста, ...).

Если вам нужно только получить узлы элемента (например, «div»), вы можете сделать следующее:

let div = document.getElementById('parentId');

var lengthChildren = div.childNodes.length;

for (var i = 0; i < lengthChildren; i++) {
  // Only node type "Element node"
  if (div.childNodes[i].nodeType == 1)
  {
    console.log(div.childNodes[i]);
  }
}

Список типов узлов смотрите здесь:

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

0 голосов
/ 21 июня 2019

Если вы пытаетесь выбрать ребенка, используйте «.children [index]»

document.querySelector("#parentId").children[0];
...