Изменить содержимое DOM через свойство .firstChild

Question

Изменить содержимое DOM через свойство .firstChild

1

Я пытаюсь выбрать элемент по его отношению с остальной частью этого DOM:

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>

Как видно здесь:

let daddy = document.getElementById('dad');
daddy.firstChild.textContent = "Im first";

Что делает JS, вместо того, чтобы изменять свой внутренний HTML, вставляя строку в качестве первого элемента "dad" <div>.

Это имеет смысл, но как я могу использовать это свойство для выбора этого первого ребенка и замены его содержимого? Вместо того, чтобы вставлять содержимое в качестве элемента первого дочернего элемента.

Biomehanika 05 июнь 2017, в 19:18

Источник

Теги:

javascript

4 ответа

0

Метод children() возвращает все прямые дочерние элементы выбранного элемента.

Этот метод перемещается только на один уровень вниз по дереву DOM.

$("#dad").children(":first").text("Im first");

CodeMan 05 июнь 2017, в 15:59

0

Спасибо, но нужен чистый JS. Уже решено.
Biomehanika 05 июнь 2017, в 17:22

0

Кроме того, прокрутите дочерние узлы до тех пор, пока вы не найдете первый:

let daddy = document.getElementById('dad');
var child = daddy.firstChild;
while(child && child.nodeType !== 1) child = child.nextSibling;
child.textContent = "Im first";

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>

Mathias Falci 05 июнь 2017, в 15:23

0

Ожидается то, что вы видите. Это из-за текстовых узлов, которые немного менее очевидны, чем другие элементы. Глядя на ваш html:

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>

У вас есть #dad div, внутри которого есть 3 текстовых узла и 2 заметки элемента. Можете ли вы заметить текстовые узлы сейчас? (подсказка, новые строки и вкладки - текст). По этой причине многие браузеры теперь реализуют firstElementChild.

Вы также можете проверить, чтобы nodeType === 1 перед его модификацией. Здесь вы можете прочитать о разных типах узлов. Вы также можете удалить все пробелы, но это затрудняет чтение кода:

<div id="dad"><p>son</p><p>son</p></div>

Ryan Wheale 05 июнь 2017, в 14:47

Ещё вопросы

Спасибо, но нужен чистый JS. Уже решено.

Michał Perłakowski · Accepted Answer · 2017-06-05T14-40-00.000Z

Первый дочерний #dad является текстовым узлом, потому что между <div id="dad"> и <p> есть пробелы. Если вы удалите эти пробелы, он отлично работает:

let daddy = document.getElementById('dad');
daddy.firstChild.textContent = "Im first";

<div id="dad"><p>son</p><p>son</p></div>

Или вы можете использовать свойство firstElementChild:

let daddy = document.getElementById('dad');
daddy.firstElementChild.textContent = "Im first";

<div id="dad">
    <p>son</p>
    <p>son</p>
</div>