Element.tagName
Предупреждение: В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML — в верхнем.
Примечание: Существует более древнее и обыденное свойство nodeName!
Пример
Предположим, есть на странице элемент с id «born»:
Я родился.
Давайте узнаем его HTML-тег:
var span = document.getElementById("born"); alert(span.tagName); //"SPAN"
Спецификации
- DOM Level 2 Core: tagName
- HTML 5: APIs in HTML documents
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Свойство tagName
Свойство tagName содержит имя тега в верхнем регистре (большими буквами).
Синтаксис
элемент.tagName;
Пример
Давайте получим элемент #elem и выведем название его тега:
let elem = document.getElementById(‘elem’); console.log(elem.tagName);
Результат выполнения кода:
Пример
Давайте выведем название тега в нижнем регистре. Для этого воспользуемся методом toLowerCase :
let elem = document.getElementById(‘elem’); console.log(elem.tagName.toLowerCase());
Результат выполнения кода:
Смотрите также
- свойство outerHTML ,
которое содержит текст и тег элемента
Свойства узлов: тип, тег и содержимое
Теперь давайте более внимательно взглянем на DOM-узлы.
В этой главе мы подробнее разберём, что они собой представляют и изучим их основные свойства.
Классы DOM-узлов
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке ниже изображены основные классы:
Существуют следующие классы:
- EventTarget – это корневой «абстрактный» класс для всего. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
- Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode , nextSibling , childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал Node ).
- Document, по историческим причинам часто наследуется HTMLDocument (хотя последняя спецификация этого не навязывает) – это документ в целом. Глобальный объект document принадлежит именно к этому классу. Он служит точкой входа в DOM.
- CharacterData – «абстрактный» класс. Вот, кем он наследуется:
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в
Hello
.
- Comment – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
- HTMLInputElement – класс для тега ,
- HTMLBodyElement – класс для тега ,
- HTMLAnchorElement – класс для тега ,
- …и т.д.
Также существует множество других тегов со своими собственными классами, которые могут иметь определенные свойства и методы, в то время как некоторые элементы, такие как , и , не имеют каких-либо определенных свойств, поэтому они являются экземплярами класса HTMLElement .
Таким образом, полный набор свойств и методов данного узла является результатом цепочки наследования.
Рассмотрим DOM-объект для тега . Он принадлежит классу HTMLInputElement.
Он получает свойства и методы из (в порядке наследования):
- HTMLInputElement – этот класс предоставляет специфичные для элементов формы свойства,
- HTMLElement – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
- Element – предоставляет типовые методы элемента,
- Node – предоставляет общие свойства DOM-узлов,
- EventTarget – обеспечивает поддержку событий (поговорим о них дальше),
- …и, наконец, он наследует от Object , поэтому доступны также методы «обычного объекта», такие как hasOwnProperty .
Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство constructor . Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя:
JavaScript свойство Element.tagName
JavaScript свойство tagName объекта Element является свойством только для чтения, которое возвращает имя тега элемента, на котором он вызывается.
Обращаю Ваше внимание на то, что в качестве возвращаемого значения вы получаете строку, которая указывает имя тега элемента. Регистр этой строки зависит от типа документа:
- Для деревьев DOM, представляющих HTML документы, возвращаемое имя тега всегда будет находится в верхнем регистре.
- Имена тегов элементов в дереве XML DOM возвращаются в том виде, в котором они записаны в исходный XML файл. Если XML документ содержит тег , то свойство tagName вернет значение » SomeTag «.
Для объектов Element значение tagName совпадает со значением свойства nodeName, которое объект Element наследует от Node .
Поддержка браузерами
Свойство Chrome Firefox Opera Safari IExplorer Edge tagName Да Да Да Да Да Да JavaScript синтаксис:
const tagName = element.tagName;Версия JavaScript
Document Object Model (DOM) Level 1
Пример использования
id = "myElem">// находим наш элемент в документе и инициализируем переменную этим значением const myElem = document.querySelector("#myElem") console.log(myElem.tagName); // "DIV"В XHTML (или любом другом формате XML) исходный регистр будет сохранен, поэтому » div » будет выводиться в случае, если исходное имя тега было создано в нижнем регистре. В HTML вместо этого будет выводиться » DIV » независимо от случая, используемого при создании исходного документа.
© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в