узнать 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? Обрати внимание, что в цикле не вызывается обработчик. Он только добавляется к элементу.
Element.id
Свойство id представляет идентификатор элемента, отражая глобальный атрибут id.
Если значение id не пустое, то оно должно быть уникально в документе.
id часто используется с getElementById , чтобы получить нужный элемент. Часто применяют ID как селектор, для стилизации документа, с помощью CSS.
Примечание: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите Чувствительность к регистру в классах и идентификаторов).
Синтаксис
var idStr = element.id; // Получаем id.
element.id = idStr; // Применяем id.
idStr — идентификатор элемента
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-element-id① |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
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.
получить id по клику js
Для получения id элемента по клику в JavaScript можно использовать следующий код:
const element = document.getElementById('myElementId'); element.addEventListener('click', function () const id = this.id; console.log(id); >); В этом примере мы получаем элемент с id «myElementId» и добавляем к нему обработчик события click . Внутри обработчика мы получаем id элемента, на который кликнули, используя ключевое слово this . Затем мы выводим id в консоль.