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

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

Властивість namespaceURI елемента в JavaScript повертає URI простору імен, в якому було створено цей елемент, або null, якщо елемент не належить до певного простору імен. Ця властивість корисна для роботи з XML-документами та документами, що використовують простори імен, такими як XHTML або SVG.

У більшості випадків, при роботі зі звичайними HTML-документами, властивість namespaceURI буде повертати null, оскільки HTML-елементи не належать до певного простору імен. Однак, якщо ви працюєте з XML або XHTML документами, ця властивість дозволяє отримати інформацію про простір імен, до якого належить елемент.

Розглянемо приклад використання властивості namespaceURI з XML-документом:

<?xml version="1.0" encoding="UTF-8"?>
<root xmlns="http://example.com/namespace">
  <child>Текст</child>
</root>

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'application/xml');

const rootElement = xmlDoc.documentElement;
const childElement = rootElement.firstChild;

console.log(rootElement.namespaceURI); // "http://example.com/namespace"
console.log(childElement.namespaceURI); // "http://example.com/namespace"

У цьому прикладі ми створюємо XML-документ з елементом root, який належить до простору імен http://example.com/namespace. Потім ми використовуємо DOMParser для аналізу XML-рядка та отримуємо посилання на кореневий елемент та його дочірній елемент. Виклик namespaceURI для кореневого елемента повертає URI простору імен, а для дочірнього елемента - той самий URI, оскільки він успадковує простір імен від батьківського елемента.

Властивість namespaceURI також може бути корисною при роботі з SVG-елементами, які належать до простору імен http://www.w3.org/2000/svg. Наприклад:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

const svgElement = document.querySelector('svg');
const circleElement = document.querySelector('circle');

console.log(svgElement.namespaceURI); // "http://www.w3.org/2000/svg"
console.log(circleElement.namespaceURI); // "http://www.w3.org/2000/svg"

У цьому прикладі ми отримуємо посилання на SVG-елемент та його дочірній елемент circle. Виклик namespaceURI для обох елементів повертає URI простору імен SVG.

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

Синтаксис

Element.namespaceURI

Значення

Return

Переглядачі

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

Приклади

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

const svgElement = document.querySelector('svg');

if (svgElement.namespaceURI === 'http://www.w3.org/2000/svg') {
  svgElement.style.fill = 'red';
}

<?xml version="1.0" encoding="UTF-8"?>
<root xmlns="http://example.com/root" xmlns:child="http://example.com/child">
  <child:element>Дочірній елемент</child:element>
  <element>Кореневий елемент</element>
</root>

<script>
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
const rootElement = xmlDoc.documentElement;

function processElement(element) {
  const namespaceURI = element.namespaceURI;
  const localName = element.localName;

  if (namespaceURI === 'http://example.com/root') {
    console.log(`Обробка кореневого елемента: ${localName}`);
  } else if (namespaceURI === 'http://example.com/child') {
    console.log(`Обробка дочірнього елемента: ${localName}`);
  } else {
    console.log(`Обробка елемента з невідомого простору імен: ${localName}`);
  }
}

function processChildren(element) {
  processElement(element);

  const children = element.children;
  for (let i = 0; i < children.length; i++) {
    processChildren(children[i]);
  }
}

processChildren(rootElement);
<script>