» для абзаца, «
» для заголовка первого уровня и т. д. Такой подход необходим, когда пользователю необходимо получить доступ к элементу HTML по имени его тега. напрямую вместо поиска нескольких строк кода.
В этом руководстве объясняется полная процедура получения имени тега элемента HTML с помощью JavaScript.
Как получить имя тега HTML-элемента с помощью JavaScript?
JavaScript предлагает «только для чтения» название тэга », которое отображает имя тега соответствующего элемента HTML. Он возвращает строковое значение, то есть имя тега элемента в ПРОПИСНЫХ РЕГИСТРАХ.
Синтаксис
элемент. название тэга
В приведенном выше синтаксисе « название тэга ” соответствует именам тегов элемента, которые необходимо извлечь.
Теперь давайте перейдем к его практической реализации, чтобы проверить, как его можно использовать для получения имени тега соответствующего элемента HTML.
Пример. Применение свойства «tagName» для получения имени тега HTML-элемента
В этом примере все имена тегов элементов, указанные в HTML-коде, могут быть получены через « название тэга ' свойство.
HTML-код
Давайте посмотрим на следующий HTML-код:
< тело по щелчку '=' 'имяэлемента()' >< h2 > Получить имя тега HTML-элемента в JavaScript < / h2 >
< п > Нажмите на любой элемент в этом документе, чтобы получить имя его тега. < / п >
< кнопка > Щелкните по нему < / кнопка >
< п идентификатор '=' 'демо' >< / п >
В приведенных выше строках кода:
- “ <тело> » связан с « по щелчку 'перенаправление события на функцию JavaScript' имя_элемента() », который будет запущен по щелчку.
- “ Тег ” определяет подзаголовок.
- “ ” создает оператор абзаца.
- “ <кнопка> » добавляет кнопку с названием «Click It».
- Наконец, « Тег определяет пустой абзац с идентификатором « демо », чтобы отобразить имя тега элемента HTML при срабатывании триггера события «onclick».
JavaScript-код
Затем перейдите к приведенному ниже коду:
< сценарий >функция имя_элемента ( ) {
константа элемент '=' событие. цель ;
документ. получитьэлементбиид ( 'демо' ) . внутреннийHTML '=' 'Название тега HTML-элемента, на который нажали: ' + элемент. название тэга ;
}
сценарий >
В этом блоке кода:
- Определите функцию с именем « имя_элемента() ».
- В его определении объявите переменную « элемент 'типа данных' константа », который использует « цель », чтобы возвращать имя элемента при срабатывании связанного с ним события.
- Наконец, примените « получитьэлемент по идентификатору() ” для доступа к добавленному абзацу, используя его идентификатор.
- Это приведет к отображению имени тега соответствующего элемента HTML с использованием « название тэга », когда сработает событие «onclick».
- Это так, что при нажатии любого из элементов в HTML-коде будет получено соответствующее имя тега.
Выход
Вывод показывает имя соответствующего тега элемента, где событие «onclick» срабатывает соответственно.
Заключение
JavaScript предоставляет встроенный « название тэга ” для получения имени тега HTML-элемента. Обычно он используется с обработчиками событий JavaScript, такими как «onclick», «onmouseover», «ondblclick» и т. д. Когда связанное событие элемента HTML срабатывает, оно по умолчанию возвращает имя своего тега в ПРОПИСНЫХ РЕГИСТРАХ. В этом руководстве представлено краткое описание того, как получить имя тега элемента HTML с помощью JavaScript.