При работе с JavaScript могут возникнуть ситуации, когда вам потребуется динамически получать имя тега элемента HTML. Если вы хотите манипулировать элементом на основе его имени тега или выполнять определенные действия, важно знать различные методы получения имени тега. В этой статье мы рассмотрим семь различных подходов с примерами кода, которые помогут вам легко выполнить эту задачу.

Метод 1: использование свойства tagName
Один из самых простых способов получить имя тега элемента — использовать свойство tagName. Это свойство возвращает имя тега элемента HTML в верхнем регистре. Вот пример:

const element = document.getElementById('myElement');
const tagName = element.tagName;
console.log(tagName); // Output: DIV

Метод 2: использование свойства nodeName.
Подобно свойству tagName, свойство nodeNameтакже возвращает имя тега элемент. Разница в том, что nodeNameработает с любым узлом DOM, а не только с элементами HTML. Вот пример:

const node = document.getElementById('myNode');
const nodeName = node.nodeName;
console.log(nodeName); // Output: DIV

Метод 3: доступ к свойству localName
Свойство localNameпредоставляет имя тега элемента в нижнем регистре. Этот метод особенно полезен, когда вам нужно имя тега без учета регистра. Вот пример:

const element = document.getElementById('myElement');
const tag = element.localName;
console.log(tag); // Output: div

Метод 4: использование свойства outerHTML
Если у вас есть строковое представление элемента HTML, вы можете использовать свойство outerHTMLдля извлечения имени тега. Вот пример:

const htmlString = '<div id="myElement">Hello</div>';
const parser = new DOMParser();
const parsedHTML = parser.parseFromString(htmlString, 'text/html');
const tag = parsedHTML.documentElement.tagName;
console.log(tag); // Output: DIV

Метод 5: Использование метода matches
Метод matchesпозволяет проверить, соответствует ли элемент определенному селектору CSS. Вы можете объединить его с селектором имени тега, чтобы определить имя тега элемента. Вот пример:

const element = document.getElementById('myElement');
const isDiv = element.matches('div');
console.log(isDiv); // Output: true

Метод 6: извлечение имени тега из свойства nodeName
Свойство nodeNameвозвращает имя тега вместе с префиксом пространства имен для элементов XML. Если вы хотите извлечь только имя тега, вы можете использовать метод split. Вот пример:

const node = document.getElementById('myNode');
const nodeName = node.nodeName.split(':')[1];
console.log(nodeName); // Output: DIV

Метод 7: использование свойства localNameс документами XML
Для документов XML свойство localNameможно использовать для получения имени тега. Этот метод особенно полезен при работе с пространствами имен XML. Вот пример:

const xmlDoc = new DOMParser().parseFromString('<root><element>Content</element></root>', 'text/xml');
const element = xmlDoc.getElementsByTagName('element')[0];
const tag = element.localName;
console.log(tag); // Output: element

В этой статье мы рассмотрели семь различных методов получения имени тега элемента HTML с помощью JavaScript. От простых свойств tagNameи nodeNameдо более сложных методов, таких как анализ строк HTML и XML-документов, теперь у вас есть множество вариантов, отвечающих вашим конкретным потребностям. Понимая эти методы, вы сможете эффективно работать с элементами на основе их имен тегов и создавать динамические и интерактивные веб-приложения.