Как узнать id элемента на сайте

узнать 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? Обрати внимание, что в цикле не вызывается обработчик. Он только добавляется к элементу.

Курсы javascript

Нужно, чтобы при нажатии на каждый из них появлялось окно, открывается оно с помощью такого кода (я его тестировал, он работает):

$('.content').css("display","block");

А вот и блок который открывается:

 
ТЕКСТ
 

Раньше, когда у меня был только один блок, который нужно было открывать, все работало хорошо. Теперь у меня несколько блоков, которые должны открываться при клике на свою ссылку.

Думал решить эту задачу таким путем, но не получается:
(Ошибика где-то в этом коде..)

 
ТЕКСТ
 
ТЕКСТ
 

Последний раз редактировалось Vladislav, 29.03.2013 в 10:54 .
29.03.2013, 11:22
Регистрация: 11.09.2010
Сообщений: 8,804

Это че ваще такое?

Тебе нужно срочно лечиться. Ставлю диагноз — jquery головного мозга.
Повторяй на ночь:
this.id, this.id, this.id .

Нихао наш китайский друг!

Можно сделать в десять раз проще и короче:

var map = ['news', 'chat']; var alert( '#' + map[id-1] ); var alert( '#' + map[id-1] );

29.03.2013, 11:52
Кандидат Javascript-наук
Регистрация: 13.02.2013
Сообщений: 105

Ой реально что-то я с «var = idClick» затупил жестко.

Разъясни, что будет делать твой код:

var map = ['news', 'chat']; var alert( '#' + map[id-1] ); var alert( '#' + map[id-1] );

Этот код не будет же выполнять ту функцию, которая мне нужна?

29.03.2013, 13:04
Регистрация: 11.09.2010
Сообщений: 8,804

Ты впервые в жизни видишь массив? Значит ты упустил что-то очень важное в процессе изучения javascript.

Блок с новостями 1
 
Блок с новостями 2
 
Блок с новостями 2
 
ТЕКСТ news
 
ТЕКСТ chat
   

29.03.2013, 13:19
Кандидат Javascript-наук
Регистрация: 13.02.2013
Сообщений: 105

1) Спасибо все работает, только вот этот код работает, когда я

2) Посоветуйте сайты, где можно обучиться js. Спасибо еще раз!

29.03.2013, 13:34
Регистрация: 30.07.2011
Сообщений: 189
А меню в шапке это страницы вам не подходит?
29.03.2013, 13:40
Регистрация: 11.09.2010
Сообщений: 8,804

Это не так. Тег

29.03.2013, 15:04
Кандидат Javascript-наук
Регистрация: 13.02.2013
Сообщений: 105
спасибон большой) к вам прислушаюсь!
26.05.2015, 11:14
Интересующийся
Регистрация: 26.05.2015
Сообщений: 11
Нужна помощь, антологичная проблема
В js я профан, только учусь, у меня есть код:

window.onload = function() < document.getElementById("item0").onclick = function() < if (chrome.app.window.get("WindowsStarted").getBounds().height != 40) < chrome.app.window.get("WindowsStarted").setBounds(); document.getElementById("content0").style.display = "none"; document.getElementById("content1").style.display = "none"; document.getElementById("content2").style.display = "none"; document.getElementById("content3").style.display = "none"; document.getElementById("content4").style.display = "none"; document.getElementById("content5").style.display = "none"; document.getElementById("content6").style.display = "none"; > else < chrome.app.window.get("WindowsStarted").setBounds(); document.getElementById("content0").style.display = "block"; > >; >;

Все работает, но у меня еще есть
item0
item1
item2
item3
item4
item5
item6
и
content0
content1
content2
content3
content4
content5
content6

Не хочу писать для каждого item2 такой же код как я привел выше, может можно как-то получит id элемента на который пользователь кликнул?

Это все что надо.
Буду признателен за помощь.

Как получить ID элемента который содержит что-то?

Как мне получить ID элемента, который содержит текст внутри Bye, Wrld! ?

• Вопрос задан более года назад
• 226 просмотров

Комментировать

Решения вопроса 2

Прокрастинация

//Получаем коллекцию всех элементов с классом Text const elementsTextClass = document.getElementsByClassName('Text'); //Проходим по всем элементам for (const element of elementsTextClass) < //Проверяем текстовое содержимое текущего элемента if (element.textContent === 'Bye, Wrld!') < //Выводим id родителя console.log(element.parentElement.id) //Дальше нам не нужно перебирать элементы выходим из цикла break; >>

Ответ написан более года назад

Нравится 1 2 комментария

Anonymous @mirniycruxix Автор вопроса

А если таких элементов несколько, как получить айди последнего?

Sunlan4ch, так же. Убираете break; , заводите переменную, где будете хранить id последнего.

//Получаем коллекцию всех элементов с классом Text const elementsTextClass = document.getElementsByClassName('Text'); let resultId = ''; //Проходим по всем элементам for (const element of elementsTextClass) < //Проверяем текстовое содержимое текущего элемента if (element.textContent === 'Bye, Wrld!') < //Запоминем текущий id resultId = element.parentElement.id; >> console.log(resultId)

Сергей Соколов @sergiks Куратор тега JavaScript

const > div')] // только div'ы в корне .filter(el => el.textContent === 'Bye, Wrld!') // если весь текст внутри совпадает с искомым .map(el => el.id) // взять id .pop(); // только последний console.log(id) // "2"

Ответ написан более года назад

Нравится 1 1 комментарий

Я бы всё таки такой общий запрос не делал. map тоже не нужен имхо, можно тогда сразу .pop().id ну или потом взять id, чтобы там не падало при null

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

Ваш ответ на вопрос

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

• JavaScript
• +1 ещё

Как создать форму калькулятор отправкой на емайл?

• 1 подписчик
• 15 минут назад
• 23 просмотра

Атрибут id

В HTML есть много атрибутов, и у каждого из них своя задача. Познакомимся поближе с атрибутом id . В его названии изначально заложен основной смысл — identifier, то есть идентификатор. Он задаёт HTML-элементу уникальное название, которое должно быть единственным в рамках документа.

Значение атрибута

Есть несколько условий, которые нужно учитывать при задании атрибута id :

• Значение должно содержать как минимум один символ.
• Значение не должно содержать пробелов, табуляций и так далее.
• Значение должно начинаться с латинской буквы, потому что цифры и символы _ , - , . не были разрешены в HTML4 и могут вызвать проблемы с совместимостью.

Использование атрибута

Стилизация

Атрибут может быть использован для задания стилей элемента. При этом в большинстве случаев такой способ — не самый подходящий для стилизации, потому что в качестве селектора id обладает высокой специфичностью. Из-за этого становится сложнее переопределить свойства при необходимости. Если не нужно задавать для элемента определённые стили с высокой специфичностью, в качестве альтернативы лучше задать элементу класс.

Атрибут id должен быть уникальным на странице, но класс — нет. Он позволяет как обращаться к конкретному элементу, так и стилизовать элементы группами, если у них задан одинаковый класс. Ещё одно различие — значение id всегда должно быть одно, но элементу можно задать несколько значений в атрибуте class , указывая их через пробел.

Связывание поля ввода и подписи по id

Атрибут id также используется при создании форм. К полям ввода в форме часто нужно добавлять подписи для описания того, что нужно ввести пользователю. В этом случае используется специальный тег label , который логически связывает текст подписи и конкретное поле ввода. Например, при такой связке клик по подписи автоматически переместит курсор в поле ввода.

Связать поле ввода и подпись к нему можно, просто обернув поле ввода в тег label вместе с текстом подписи. Но такой способ в некоторых случаях может быть неудобен — например, когда в разметке между полем и подписью есть другие элементы. В таких случаях будет полезен второй способ — с использованием id . Чтобы связать поле ввода и подпись с его помощью нужно:

1. Добавить полю ввода идентификатор, задав значение атрибуту id .
2. Добавить тегу label атрибут for и указать в нём значение идентификатора поля ввода.

Создание якоря с помощью id

Можно задать идентификатор фрагменту в любом месте HTML-страницы, а затем получать быстрый доступ к нему через id . Такой якорь удобен, когда на странице много данных, и нужно иметь возможность быстро перейти к определённому разделу.

Для создания якоря нужно:

1. Присвоить атрибут id элементу, к которому мы хотим иметь быстрый доступ.
2. Добавить ссылку на этот элемент там, откуда мы хотим осуществлять переход.

Например, можно сделать навигацию по странице в начале документа, а ссылки на разделы превратить в якоря, тогда можно будет быстро пролистывать страницу к нужному разделу, кликнув по его названию.

Также с помощью id можно ссылаться на конкретное место в другом документе, дописав в конце адреса идентификатор нужного фрагмента.

Получение доступа к элементу из JavaScript

С HTML-элементом часто нужно работать из JavaScript. В языке есть специальный метод, чтобы найти элемент по атрибуту id и получить к нему доступ — getElementById() . Дальше с найденным элементом можно производить нужные действия.

const button = document.getElementById('button'); button.addEventListener('click', function () < alert('Click!'); >); 

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.