JS метод Element.isSameNode()

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

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

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

Метод isSameNode() є корисним у ситуаціях, коли потрібно переконатися, що два посилання на вузли насправді посилаються на один і той самий вузол у дереві документа. Це може бути важливо при роботі з подіями, маніпуляціями з DOM та інших випадках, коли потрібно розрізняти окремі екземпляри вузлів.

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

<div id="container">
  <p id="paragraph">Цей абзац</p>
</div>

const container = document.getElementById('container');
const paragraph = document.getElementById('paragraph');
const childNode = container.firstElementChild;

console.log(paragraph.isSameNode(childNode)); // true

У цьому прикладі ми отримуємо вузли div з ідентифікатором container та p з ідентифікатором paragraph. Потім ми отримуємо перший дочірній елемент вузла container, який також є вузлом p. Коли ми виконуємо isSameNode() на вузлах paragraph та childNode, метод повертає true, оскільки вони посилаються на один і той самий об'єкт у пам'яті.

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

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

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

console.log(childNode.isSameNode(sameChild)); // true

У цьому прикладі ми створюємо XML-документ та отримуємо дочірній вузол child двома різними способами: через firstElementChild та getElementById(). Оскільки обидва ці посилання вказують на один і той самий вузол у пам'яті, метод isSameNode() повертає true.

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

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

const fragment = document.createDocumentFragment();
const p = document.createElement('p');
fragment.appendChild(p);

const sameFragment = fragment;

console.log(fragment.isSameNode(sameFragment)); // true

У цьому прикладі ми створюємо фрагмент документа та додаємо до нього абзац. Потім ми створюємо нове посилання sameFragment, яке вказує на той самий об'єкт фрагмента документа. Коли ми виконуємо isSameNode() на fragment та sameFragment, метод повертає true, оскільки вони посилаються на один і той самий об'єкт у пам'яті.

Загалом, isSameNode() є корисним інструментом для перевірки, чи два посилання на вузли вказують на один і той самий екземпляр об'єкта в пам'яті. Це допомагає забезпечити коректну роботу з DOM, особливо у випадках, коли потрібно розрізняти окремі екземпляри вузлів. Метод isSameNode() доповнює метод isEqualNode(), який перевіряє структурну рівність вузлів, але не враховує їх ідентичність як об'єктів у пам'яті.

Синтаксис

isSameNode(otherNode)

Параметри

*otherNode

Вузол, який потрібно перевірити на відповідність.

Return

boolean

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

Переглядачі

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

Приклади

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

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

// Отримуємо посилання на той самий вузол
const sameNode = div;

// Перевіряємо, чи вузли є тим самим об'єктом
console.log(div.isSameNode(sameNode)); // true

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

// Перевіряємо, чи вузли не є тим самим об'єктом
console.log(div.isSameNode(anotherDiv)); // false

function findDuplicateNodes(parentNode) {
  const nodeMap = new Map();
  const duplicateNodes = [];

  function traverseNodes(node) {
    if (nodeMap.has(node)) {
      duplicateNodes.push(node);
    } else {
      nodeMap.set(node, true);
    }

    for (const childNode of node.childNodes) {
      traverseNodes(childNode);
    }
  }

  traverseNodes(parentNode);
  return duplicateNodes;
}

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

const duplicates = findDuplicateNodes(parentNode);
console.log(duplicates); // [<p>...</p>]