Как получить id элемента js
Перейти к содержимому

Как получить id элемента js

  • автор:

узнать ID li элемента

Как при клике на элемент списка можно узнать его id, без использования атрибута onclick в li. Только на чистом JS, без Jquery.

Отслеживать
задан 10 апр 2015 в 19:58
depredator depredator
365 1 1 золотой знак 5 5 серебряных знаков 21 21 бронзовый знак

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

onClick вообще не рекомендуется использовать. Причин достаточно, см. гугл.
Чтобы не трогать вообще элементы li , можно делегировать обработчик на ul и с него определять id .
Приятная плюшка в том, что теперь можно динамически добавлять/убирать элементы li — код будет работать, тогда как навешивание кучи обработчиков на каждый элемент имеет две плохие стороны: на новые новые элементы действовать не будет и куча ненужных обработчиков, что плохо 🙂
Пример:

document.querySelector('#drag').addEventListener('click', function(e)< // Вешаем обработчик клика на UL, не LI var // Получили ID, т.к. в e.target содержится элемент по которому кликнули document.querySelector('#test strong').innerHTML = id; // For example >);

Отслеживать
ответ дан 10 апр 2015 в 20:26
user31688 user31688
Поправка: все-таки хранить цвет в id — не лучшая идея. Какой-нибудь data-color подойдет больше.
16 фев 2018 в 10:20

var inputs = document.getElementsByTagName("li"); for (var i = 0; i < inputs.length; i++) < inputs[i].addEventListener("click", myFunction); >function myFunction()

Отслеживать
ответ дан 10 апр 2015 в 20:14
7,796 1 1 золотой знак 28 28 серебряных знаков 49 49 бронзовых знаков

igumnov, ваш вариант не будет работать, событие клик отрабатывается в цикле, еще до клика этот код будет отработан и не даст никакого результата. А если запускать данный код по клику, тогда нужен еще один клик во время отработки самого цикла, чтобы получить результат. С учетом, что это всё будет происходить в доли секунды после первого клика, никакого результата от этого кода не будет. Я бы использовал свойство event.target при клике на список. вот как то так все получается: document.getElementById(«drag»).addEventListener(«click», function() < var event = window.event.target, alert(event.id)

16 фев 2018 в 5:53

@Brood, а ты пробовал запускать код из ответа igumnov? Обрати внимание, что в цикле не вызывается обработчик. Он только добавляется к элементу.

document.getElementById()

Возвращает ссылку на элемент по его идентификатору (ID (en-US) ); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.

Синтаксис

element = document.getElementById(id);

Параметры

чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента.

Возвращаемое значение

ссылка на объект типа Element соответствующий указанному ID или null , если элемент с указанным ID не найден в документе.

Пример

doctype html> html> head> title>getElementById exampletitle> script> function changeColor(newColor)  var elem = document.getElementById("para1"); elem.style.color = newColor; > script> head> body> p id="para1">Some text herep> button onclick="changeColor('blue');">bluebutton> button onclick="changeColor('red');">redbutton> body> html> 

Замечания

Начинающим следует знать, что верхний регистр в части имени метода ‘Id’ должен быть точным для корректного вызова функции; «getElementByID» будет не корректно, как бы естественно это ни казалось.

Если элементы с указанным id отсутствуют , функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так document.getElementById(«Main») вернёт null вместо элемента , потому что «M» и «m» различны для этого метода.

Элементы вне документа не ищутся getElementById() . При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью Node.insertBefore() или подобным методом, до того как вы сможете получить к нему доступ при помощи getElementById() :

var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el will be null! 

Не-HTML документы. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем «id» не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут «id» определён в качестве идентификатора в общих случаях XHTML, XUL, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.

Спецификации

Specification
DOM Standard
# ref-for-dom-nonelementparentnode-getelementbyid②

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Document ссылка для иных методов и свойств которые вы можете использовать для получения ссылок на иные элементы.
  • Document.querySelector() для выборки по таким запросам, как ‘div.myclass’
  • xml:id — имеет метод, позволяющий getElementById() получать «xml: id» в XML-документах (например, возвращаемые вызовами Ajax)

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 on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

Получение ID элемента, вызвавшего событие в jQuery

Чтобы получить доступ к ID элемента, инициировавшего событие, воспользуйтесь свойством event.target.id в обработчике событий. Вот пример кода на чистом JavaScript, где при нажатии выводится ID элемента:

Скопировать код

document.addEventListener('click', (event) => < console.log("ID:", event.target.id); >);

Ключевые понятия

Что такое цель события?

Объект event в JavaScript предоставляет различную информацию о произошедшем событии, включая важное свойство target , которое ссылается на элемент, инициировавший событие.

Работа с jQuery

В jQuery для этих же задач используется выражение $(this) , которое ссылается на элемент, вызвавший событие. ID элемента можно получить с помощью метода .attr(«id») или просто свойства this.id .

Совместимость со старыми версиями IE

Если среди пользователей вашего сайта есть пользователи Internet Explorer, вам может потребоваться кроссбраузерный вариант event.srcElement для замещения event.target , что увеличит совместимость кода со старыми версиями браузера.

На практике

Советуем вам провести эксперименты с использованием event.target и this для обработки событий на динамически добавляемых и вложенных элементах, чтобы лучше подготовиться к решению реальных задач.

Визуализация

Считайте, что событие – это поезд, прибывающий на станцию, а каждый пассажир – это элемент с биркой на которой написан ID:

Платформа станции: [��(ID:btn1), ��(ID:btn2), ��(ID:btn3)] Событийный поезд ��: Прибыл и одного за другим садит пассажиров

Когда событие активируется, мы определяем элемент:

Как получить id элемента по которому кликнули?

KorniloFF

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

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

dummyman

диссидент-схизматик

UPD Немного изменил решение прямо по вашему заказу

var buttons = document.querySelectorAll('.text.block'); var test1 = document.querySelector('#test1'); var test2 = document.querySelector('#test2'); Array.from(buttons).forEach(function(button)< button.addEventListener('click', function(e) < test1.innerHTML=e.target.id; test2.innerHTML=e.target.innerHTML; console.log(e.target); >) >);

Ответ написан более трёх лет назад

DrunkMaster

DrunkMaster @DrunkMaster Автор вопроса
Да, всё работает только console.log(e.target.id)

dummyman

console.log() — просто выводит результат в консоль.
Вы не работали с такой?
Вызывается с помощью F12
На открывшейся панели ищите вкладку «Консоль»
Потом запустите пример и покликайте

DrunkMaster

DrunkMaster @DrunkMaster Автор вопроса
dummyman: работал, спасибо

dummyman

DrunkMaster:
Ну дык туда в параметр console.log() можно написать хоть (e) , хоть (e.target) , хоть (e.target.id) .
попробуйте сразу все три последовательно.

console.log(e) console.log(e.target) console.log(e.target.id)

DrunkMaster

DrunkMaster @DrunkMaster Автор вопроса
dummyman: Не сообразил что-то сразу. теперь буду знать

dummyman

DrunkMaster: Консоль — лучшая штука для познования недокументированных недр браузеров.
Внизу есть строка ввода, попробуйте вставить в нее и нажать Enter:
console.log(window)
Затем в появившейся строчке нажмите Window, браузер покажет вам все что вы должны знать о нем.
Потом document
console.log(document)
Затем в появившейся строчке нажмите Document, браузер покажет вам все что вы должны знать о нем.

dummyman

DrunkMaster:
Потом
console.log(document.querySelectorAll(‘*’))
В консоль выдаст все теги на странице

dummyman

И забудь про использование
document.getElementById()
document.getElementsByClassName()
Это какой-то пережиток 90-х. Реально, их я не использовал последние лет 12

Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript
  • +3 ещё

Как сделать выбор случайной строки из JSON?

  • 1 подписчик
  • 45 минут назад
  • 13 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *