Что заставляет childNodes возвращать #text вместо <div>?

1

childNodes иногда дает мне #text элемент вместо <div>

<div class="first-div">
    <div class="second-div">
        <div class="third-div">1</div>
        <div class="third-divs-sibling">2</div>
    </div>
</div>

Когда я пытаюсь получить доступ к внукам, вот так:

var xxx = document.getElementsByClassName('first-div')[0];

console.log(xxx.childNodes[ 1 ].childNodes[ 1 ]);
console.log(xxx.childNodes[ 1 ].childNodes[ 2 ]);

Chrome дает мне это:

<div class="third-div">1</div>
#text

Вот JSFiddle

Сначала я думал, что он где-то нашел пробел, но console.log(xxx.childNodes[ 1 ]) возвращает только 3 узла. Похоже, это некрасивая магия для моего неподготовленного глаза.

Кто-нибудь имеет более научное объяснение?

  • 0
    .first-div действительно имеет 3 дочерних узла - два текстовых узла и .second-div
Теги:

3 ответа

5
Лучший ответ

Пробелы также создают текстовые узлы. Ваш #second-div имеет фактически 5 детей, из которых только 2 являются элементами:

  • childNodes[0]: разрыв строки между открывающим тегом и #third-div
  • childNodes[1]: #third-div
  • childNodes[2]: разрыв строки между #third-div и #third-divs-sibling
  • childNodes[3]: #third-divs-sibling
  • childNodes[4]: разрыв строки между #third-divs-sibling и закрывающим тегом

Если вы ищете только элементы, вы можете использовать коллекцию .children вместо .childNodes.

Поделиться
  • 0
    Спасибо! Я хотел бы, чтобы они сделали это ясно в документации
  • 0
    @ArthurTarasov Какую документацию вы читали?
Показать ещё 2 комментария
1

Эти #text являются TextNodes, которые также включают новые строки среди вкладок, пробелов. Помните, что Node.childNodes коллекция включает в себя TextNodes также. Если вы не хотите их, используйте Node.children, который является только набором узлов Element:

var xxx = document.getElementsByClassName('first-div')[0];

console.log(xxx.children[0].children[0]);
console.log(xxx.children[0].children[1]);

Я также вижу, что из-за этой путаницы вы предполагали, что элементы являются индексами от 1, а индексирование начинается с 0.

Поделиться
1

Таким образом, внутренние значения также возвращаются как childNodes... index 3 даст второй div (с классом "third-divs-sibling") и index 4 его текстовым узлом.

xxx.childNodes[ 1 ].childNodes[ 1 ] => <div class="third-div">1</div>
xxx.childNodes[ 1 ].childNodes[ 2 ] => #text (1)
xxx.childNodes[ 1 ].childNodes[ 3 ] => <div class="third-divs-sibling">
xxx.childNodes[ 1 ].childNodes[ 4 ] => #text (2)
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню