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-елементи не належать до певного простору імен.

правити

Порада

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

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

Порада

Використовуйте властивість namespaceURI у поєднанні з властивістю localName для отримання повної інформації про елемент, включаючи його простір імен та локальне ім'я. Наприклад: const fullName = element.namespaceURI + ':' + element.localName;.

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

Порада

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

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

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

Синтаксис

Element.namespaceURI

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

<svg>демо</svg>

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

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

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

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

for (const element of xmlDoc.querySelectorAll('*')) {
    console.log(element.localName, '→', element.namespaceURI);
}