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() враховує всі деталі структури вузлів, включно з атрибутами, просторами імен та іншими властивостями. Це робить його більш точним, ніж просте порівняння рядків, але також може призвести до несподіваних результатів, якщо ви очікуєте більш гнучкого порівняння.

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

Порада

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

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

Порада

Ви можете використовувати isEqualNode() для порівняння не лише окремих вузлів, але й підструктур дерева документа, таких як фрагменти документа. Це може бути корисно для перевірки коректності маніпуляцій з DOM. Наприклад:

const fragment1 = document.createDocumentFragment();
// Додавання вузлів до fragment1

const fragment2 = document.createDocumentFragment();
// Додавання вузлів до fragment2

if (fragment1.isEqualNode(fragment2)) {
  console.log('Фрагменти ідентичні');
} else {
  console.log('Фрагменти відрізняються');
}

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

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

Синтаксис

isEqualNode(otherNode)

Параметри

otherNode

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

автор: Bond

правити

Повернення

boolean

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

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

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

<header>
  <h2 class="title">Node: isEqualNode() method</h2>
  <p class="description">Перевіряє, чи є два вузли рівними.</p>
</header>
<main>
  <div class="result">
    <div id="nodeContainer1">
      <!-- Перший вузол буде створений динамічно -->
    </div>
    <div id="nodeContainer2">
      <!-- Другий вузол буде створений динамічно -->
    </div>
    <button id="createNodesButton">Створити вузли</button>
    <button id="checkEqualityButton" disabled>Перевірити рівність</button>
    <p id="output"></p>
  </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);
}

#nodeContainer1, #nodeContainer2 {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

// Отримуємо елементи
const nodeContainer1 = document.getElementById('nodeContainer1');
const nodeContainer2 = document.getElementById('nodeContainer2');
const createNodesButton = document.getElementById('createNodesButton');
const checkEqualityButton = document.getElementById('checkEqualityButton');
const output = document.getElementById('output');

// Функція для створення вузлів
function createNodes() {
  const node1 = document.createElement('div');
  node1.textContent = 'Вузол 1';
  nodeContainer1.appendChild(node1);

  const node2 = document.createElement('div');
  node2.textContent = 'Вузол 1'; // Однаковий вміст як у node1
  nodeContainer2.appendChild(node2);

  checkEqualityButton.disabled = false;
}

// Функція для перевірки рівності вузлів
function checkNodeEquality() {
  const node1 = nodeContainer1.firstChild;
  const node2 = nodeContainer2.firstChild;

  const areEqual = node1.isEqualNode(node2);
  output.textContent = areEqual ?
  'Вузли рівні' :
  'Вузли не рівні';
}

// Додаємо обробники подій
createNodesButton.addEventListener('click', createNodes);
checkEqualityButton.addEventListener('click', checkNodeEquality);
//# sourceURL=pen.js

// Створюємо два елементи 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