firstChild в JavaScript — перший дочірній вузол елемента

Загальний опис

Властивість firstChild є властивістю об'єкта Element у JavaScript і надає доступ до першого дочірнього елемента, що є безпосередньо дочірнім вказаного елемента. Основна суть цієї властивості полягає в тому, що вона дозволяє отримати доступ до першого дочірнього елемента у DOM-структурі елемента, що є корисним при навігації та роботі зі структурою документа.

Однією з основних сфер застосування властивості firstChild є робота з деревом DOM, де потрібно отримувати доступ до перших елементів у вкладених структурах. Вона може бути корисною при пошуку, маніпулюванні та модифікації контенту на сторінці.

Для використання властивості firstChild найпростіший спосіб - просто звернутися до неї через об'єкт елемента, який ви хочете дослідити. Наприклад:

const parentElement = document.getElementById('parent');
const firstChildElement = parentElement.firstChild;

console.log(firstChildElement);

У цьому прикладі ми отримуємо перший дочірній елемент елемента з ідентифікатором parent за допомогою властивості firstChild. Це дозволяє нам отримати доступ до першого елемента у вкладеній структурі документа.

Однак, варто зазначити, що firstChild може повертати не тільки елементи, але й текстові вузли, коментарі та інші типи вузлів. Тому, щоб впевнитися, що отриманий вузол є саме елементом, може бути використано перевірку:

const firstChildElement = parentElement.firstChild;
if (firstChildElement.nodeType === Node.ELEMENT_NODE) {
    console.log('Перший дочірній елемент:', firstChildElement);
} else {
    console.log('Перший дочірній вузол не є елементом.');
}

Цей код перевіряє тип вузла, щоб впевнитися, що перший дочірній елемент є саме елементом. Це допомагає уникнути непередбачуваних результатів при використанні властивості firstChild у випадку, коли він може повертати різні типи вузлів.

Враховуючи вищезазначені приклади, ви можете користуватися властивістю firstChild для ефективної навігації по DOM-структурі та отримання доступу до перших елементів у вкладених структурах документа.

правити

Порада

Пам'ятайте, що властивість firstChild може повернути текстовий вузол або пробіли, а не завжди елемент. Якщо потрібно отримати перший елемент-дочірній, зазвичай використовується метод firstElementChild.

автор: Bond правити

Порада

Для безпеки і уникнення помилок, рекомендується перевіряти, чи існує дочірній елемент, перед тим як взяти до нього доступ. Наприклад:

if (parentElement.firstChild) {
   // Виконати дії з першим дочірнім елементом
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.firstChild

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	6

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<ul id="list">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

// HTML розмітка
// <ul id="list">
//   <li>Елемент 1</li>
//   <li>Елемент 2</li>
//   <li>Елемент 3</li>
// </ul>

// JavaScript код
const list = document.getElementById("list");

// Отримуємо перший дочірній елемент списку
const firstElement = list.firstChild;

console.log("Перший дочірній елемент списку:", firstElement);

<header>
  <h2 class="title">Element: firstChild property</h2>
  <p class="description">Повертає першого дочірнього вузла елемента або null, якщо дочірніх вузлів немає.</p>
</header>
<main>
  <div class="result">
    <div id="parent">
      <span>Перший дочірній вузол</span>
      <p>Другий дочірній вузол</p>
    </div>
    <div class="controls">
      <button id="showFirstChild">Показати першого дочірнього вузла</button>
    </div>
    <div id="output"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#parent {
  background-color: #e0e0e0;
  padding: 10px;
  margin-bottom: 20px;
}

#output {
  font-weight: bold;
}

const parent = document.getElementById('parent');
const showFirstChildButton = document.getElementById('showFirstChild');
const output = document.getElementById('output');

showFirstChildButton.addEventListener('click', () => {
  const firstChild = parent.firstChild;
  if (firstChild) {
    output.textContent = `Перший дочірній вузол: ${firstChild.outerHTML}`;
  } else {
    output.textContent = 'Немає дочірніх вузлів.';
  }
});
//# sourceURL=pen.js

<div id="container">
    <span>Перший спан</span>
    <p>Перший параграф</p>
    <p>Другий параграф</p>
</div>

const container = document.getElementById('container');

// firstChild — це і текстові вузли (пробіли!), тому шукаємо перший <p>
let firstParagraph = container.firstChild;

while (firstParagraph && (firstParagraph.nodeType !== Node.ELEMENT_NODE || firstParagraph.tagName !== 'P')) {
    firstParagraph = firstParagraph.nextSibling;
}

console.log('Перший параграф у контейнері:', firstParagraph && firstParagraph.textContent);