JS метод Element.isEqualNode()

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

isEqualNode() - це метод об'єкта Element в JavaScript, який використовується для перевірки, чи два вузли дерева документа є структурно ідентичними. Цей метод повертає логічне значення true, якщо вузли є ідентичними, і false в іншому випадку.

Основна сфера застосування методу isEqualNode() - порівняння вузлів дерева документа для визначення, чи вони мають однакову структуру, атрибути та вміст. Це може бути корисно в різних ситуаціях, таких як перевірка коректності маніпуляцій з DOM, тестування, валідація даних та інші випадки, коли потрібно порівнювати вузли.

Метод isEqualNode() порівнює не лише типи вузлів та їх вміст, але й атрибути, простори імен та інші властивості. Він враховує всі деталі структури вузлів, що робить його більш точним, ніж просте порівняння рядків.

Розглянемо приклад використання isEqualNode() з HTML-документом:

<div id="container">
  <p>Перший абзац</p>
  <p>Другий абзац</p>
</div>

const container = document.getElementById('container');
const firstP = container.firstElementChild;
const secondP = container.lastElementChild;

const newP = document.createElement('p');
newP.textContent = 'Другий абзац';

console.log(secondP.isEqualNode(newP)); // true

У цьому прикладі ми спочатку отримуємо вузли p з контейнера div. Потім ми створюємо новий вузол p з таким самим текстовим вмістом, як і другий абзац. Коли ми виконуємо isEqualNode() на другому абзаці та новому вузлі, метод повертає true, оскільки вони є структурно ідентичними.

Метод isEqualNode() також можна використовувати з XML-документами та іншими типами вузлів, такими як атрибути, коментарі та текстові вузли. Наприклад:

<?xml version="1.0"?>
<root>
  <child>Дочірній елемент</child>
</root>

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const rootNode = xmlDoc.documentElement;
const childNode = rootNode.firstElementChild;

const newChild = xmlDoc.createElement('child');
newChild.textContent = 'Дочірній елемент';

console.log(childNode.isEqualNode(newChild)); // true

У цьому прикладі ми створюємо XML-документ та порівнюємо існуючий дочірній вузол child з новим вузлом child, який має такий самий текстовий вміст. Метод isEqualNode() повертає true, оскільки вони є ідентичними.

Варто зазначити, що isEqualNode() є дуже точним методом порівняння вузлів, і він враховує навіть найменші відмінності у структурі та властивостях вузлів. Це може бути як перевагою, так і недоліком залежно від ситуації. Якщо ви очікуєте абсолютної ідентичності вузлів, isEqualNode() є відмінним варіантом. Однак, якщо ви шукаєте більш гнучкого порівняння, де деякі незначні відмінності можуть бути проігноровані, вам може знадобитися реалізувати власну логіку порівняння.

Крім порівняння окремих вузлів, isEqualNode() також можна використовувати для перевірки рівності підструктур дерева документа. Наприклад, ви можете порівняти два фрагменти документа, щоб переконатися, що вони мають однакову структуру та вміст.

const fragment1 = document.createDocumentFragment();
const p1 = document.createElement('p');
p1.textContent = 'Перший абзац';
fragment1.appendChild(p1);

const fragment2 = document.createDocumentFragment();
const p2 = document.createElement('p');
p2.textContent = 'Перший абзац';
fragment2.appendChild(p2);

console.log(fragment1.isEqualNode(fragment2)); // true

У цьому прикладі ми створюємо два фрагменти документа, кожен з одним абзацом, і порівнюємо їх за допомогою isEqualNode(). Оскільки фрагменти мають ідентичну структуру та вміст, метод повертає true.

Загалом, isEqualNode() є потужним інструментом для перевірки рівності вузлів у JavaScript. Він забезпечує точне порівняння структури та властивостей вузлів, що робить його корисним для валідації даних, тестування та інших випадків, коли потрібно перевірити ідентичність вузлів дерева документа.

Синтаксис

isEqualNode(otherNode)

Параметри

*otherNode

Вузол для порівняння на рівність.

Return

boolean

Повертає булеве значення, яке дорівнює true, якщо два вузли рівні, або false, якщо ні.

Якщо otherNode дорівнює null, метод isEqualNode() завжди повертає false.

Переглядачі

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

Приклади

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

// Створюємо два елементи div
const div1 = document.createElement('div');
const div2 = document.createElement('div');

// Присвоюємо їм однакові атрибути та вміст
div1.setAttribute('id', 'myDiv');
div1.textContent = 'Hello, World!';

div2.setAttribute('id', 'myDiv');
div2.textContent = 'Hello, World!';

// Перевіряємо, чи є вузли рівними
console.log(div1.isEqualNode(div2)); // true

function areTreesEqual(rootNode1, rootNode2) {
  // Базовий випадок: перевірка на null
  if (!rootNode1 && !rootNode2) {
    return true;
  }

  // Якщо один з вузлів є null, а інший ні, вони не рівні
  if (!rootNode1 || !rootNode2) {
    return false;
  }

  // Перевіряємо, чи є вузли рівними
  if (!rootNode1.isEqualNode(rootNode2)) {
    return false;
  }

  // Рекурсивно перевіряємо дочірні вузли
  const childNodes1 = rootNode1.childNodes;
  const childNodes2 = rootNode2.childNodes;

  if (childNodes1.length !== childNodes2.length) {
    return false;
  }

  for (let i = 0; i < childNodes1.length; i++) {
    if (!areTreesEqual(childNodes1[i], childNodes2[i])) {
      return false;
    }
  }

  return true;
}

// Створюємо два дерева вузлів
const root1 = document.createElement('div');
const child1 = document.createElement('p');
child1.textContent = 'Hello';
root1.appendChild(child1);

const root2 = document.createElement('div');
const child2 = document.createElement('p');
child2.textContent = 'Hello';
root2.appendChild(child2);

console.log(areTreesEqual(root1, root2)); // true