JS властивість Element.previousSibling

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

previousSibling - це властивість вузлів у моделі об'єктної моделі документа (DOM), яка повертає попередній сусідній вузол на тому ж рівні ієрархії DOM. Вона дозволяє отримати доступ до попереднього сусіднього вузла та маніпулювати ним за допомогою JavaScript. Ця властивість може бути корисною для навігації по DOM та виконання операцій на сусідніх вузлах.

Використання previousSibling досить просте. Розглянемо приклад з HTML-структурою:

<div id="parent">
  <p>Перший текстовий вузол</p>
  <span id="middle">Середній вузол</span>
  <p>Третій текстовий вузол</p>
</div>

Ми можемо отримати доступ до попереднього сусіднього вузла елемента span через властивість previousSibling:

const middleElement = document.getElementById('middle');
const previousSibling = middleElement.previousSibling;
console.log(previousSibling); // Текстовий вузол з "Перший текстовий вузол"

Важливо зазначити, що previousSibling може повертати текстові вузли, які містять лише пробіли або символи переносу рядка. Тому часто доводиться перевіряти тип вузла перед виконанням будь-яких операцій.

Одним із поширених випадків використання previousSibling є маніпуляція сусіднім елементом на основі дій, виконаних на поточному елементі. Наприклад, ми можемо змінити стиль попереднього сусіднього елемента при натисканні на поточний елемент:

<div id="parent">
  <button id="first">Перший</button>
  <button id="second">Другий</button>
</div>

const secondButton = document.getElementById('second');
secondButton.addEventListener('click', () => {
  const previousSibling = secondButton.previousSibling;
  if (previousSibling.nodeType === Node.ELEMENT_NODE) {
    previousSibling.classList.add('highlighted');
  }
});

Властивість previousSibling також може бути корисною для навігації по DOM-ієрархії та виконання операцій на сусідніх вузлах. Наприклад, ми можемо змінити текст попереднього сусіднього елемента на основі значення введеного в текстове поле:

<div id="parent">
  <p id="previous">Попередній текст</p>
  <input type="text" id="current" placeholder="Введіть текст">
</div>

const currentInput = document.getElementById('current');
const previousSibling = currentInput.previousSibling;

currentInput.addEventListener('input', () => {
  if (previousSibling.nodeType === Node.ELEMENT_NODE) {
    previousSibling.textContent = currentInput.value;
  }
});

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

Властивість previousSibling є важливою частиною DOM та може бути використана для навігації по DOM-ієрархії, маніпуляції сусідніми вузлами та взаємодії між ними. Вона забезпечує зручний спосіб отримати доступ та змінити попередній сусідній вузол, що дозволяє створювати динамічні та інтерактивні веб-додатки.

Однак слід пам'ятати, що previousSibling може повертати текстові вузли, які містять лише пробіли або символи переносу рядка. Тому перед виконанням будь-яких операцій на отриманому вузлі необхідно перевірити його тип за допомогою властивості nodeType. Наприклад:

const currentElement = document.getElementById('current');
const previousSibling = currentElement.previousSibling;

if (previousSibling.nodeType === Node.ELEMENT_NODE) {
  // Виконайте операції з попереднім сусіднім елементом
} else if (previousSibling.nodeType === Node.TEXT_NODE) {
  // Обробіть текстовий вузол за потреби
}

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

Загалом, previousSibling є потужним інструментом для маніпуляції вузлами DOM та взаємодії між ними. Вона дозволяє створювати складні та динамічні веб-додатки, забезпечуючи доступ до сусідніх вузлів та можливість змінювати їх стан або властивості. Однак, як і при роботі з будь-якими властивостями DOM, важливо ретельно перевіряти типи вузлів та обробляти можливі винятки, щоб забезпечити стабільну та надійну роботу вашого коду.

Синтаксис

Element.previousSibling

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створюємо новий елемент div
const parentDiv = document.createElement('div');

// Створюємо два нових елемента p
const firstP = document.createElement('p');
firstP.textContent = 'Це перший елемент p';

const secondP = document.createElement('p');
secondP.textContent = 'Це другий елемент p';

// Додаємо елементи p до елемента div
parentDiv.appendChild(firstP);
parentDiv.appendChild(secondP);

// Отримуємо previousSibling для другого елемента p
const previousSibling = secondP.previousSibling;

// Виводимо previousSibling у консоль
console.log(previousSibling === firstP); // Вивід: true

// Створюємо новий елемент div
const parentDiv = document.createElement('div');

// Створюємо два нових елемента p
const firstP = document.createElement('p');
firstP.textContent = 'Це перший елемент p';

const secondP = document.createElement('p');
secondP.textContent = 'Це другий елемент p';

// Створюємо новий елемент span
const newSpan = document.createElement('span');
newSpan.textContent = 'Це новий елемент span';

// Додаємо елементи p та span до елемента div
parentDiv.appendChild(firstP);
parentDiv.appendChild(newSpan);
parentDiv.appendChild(secondP);

// Отримуємо previousSibling для другого елемента p
const previousSibling = secondP.previousSibling;

// Виводимо previousSibling у консоль
console.log(previousSibling === newSpan); // Вивід: true