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

Как получить id элемента с помощью JavaScript?

В JavaScript существует несколько способов получить id элемента. В этой статье мы рассмотрим несколько примеров кода для выполнения этой задачи.

Метод getElementById

Один из самых простых способов получить id элемента — использовать метод getElementById. Этот метод позволяет получить ссылку на элемент с указанным id в документе.

  // HTML // JavaScript var element = document.getElementById("myElement"); var console.log(id); // Выведет "myElement" 

В приведенном выше примере мы создаем элемент с id «myElement» в HTML и затем используем метод getElementById для получения ссылки на этот элемент. Затем мы получаем значение id элемента и выводим его в консоль с помощью console.log.

Метод querySelector

Еще один способ получить id элемента — это использовать метод querySelector. Этот метод позволяет получить ссылку на элемент, соответствующий указанному селектору CSS.

  // HTML // JavaScript var element = document.querySelector("#myElement"); var console.log(id); // Выведет "myElement" 

В приведенном выше примере мы используем селектор CSS «#myElement» для получения ссылки на элемент с id «myElement». Затем мы получаем значение id элемента и выводим его в консоль.

Способ доступа через this

Если вы хотите получить id элемента внутри его события, вы можете использовать ключевое слово this.

  // HTML Нажми меня // JavaScript function showId() < var console.log(id); // Выведет "myButton" > 

В приведенном выше примере мы создаем кнопку с id «myButton» и добавляем обработчик события onclick. В функции showId мы используем ключевое слово this для доступа к элементу, на который было нажато, и получаем его id.

Использование цикла для получения id всех элементов

Если вам нужно получить id всех элементов на странице, вы можете использовать цикл для обхода всех элементов и получения их id.

  // JavaScript var elements = document.getElementsByTagName("*"); for (var i = 0; i 

var idStr = element.id; // Получаем id.

element.id = idStr; // Применяем id.

element = document.getElementById(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.

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

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

BCD tables only load in the browser

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

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

Как получить id элемента, зная только его класс?

Приветствую товарищи!
Пожалуйста, помогите мне с решением одной задачи.
У меня есть такой код:

button id="id_515e362d68559b9f8f2" title="Далее" type="button" class="continue">/button>

Как видите, ID у меня генерируется автоматически и единственная статическая информация по кнопке - это её класс.
Как мне, используя чистый JS, узнать ID и поместить его значение в переменную?
Заранее спасибо!

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как получить дочерний элемент DIV'а, зная только его id?
Есть . Внутри него с неизвестным уровнем вложенности находится текстовое поле с определенным id.

Как узнать индекс элемента ListBox, зная только его текст
И снова всем Добрый день! Не давно разобрался со сравнением элементов в listbox. Теперь у меня.

Как получить позицию компонента, зная только его название
Люди как получить позицию компонента зная только его название? :umnik:

Как получить значение элемента ListBox, а не только его номер в списке?
При запуске Excel отрабатывает макрос, который рисует на активном листе ListBox и назначает ему.

516 / 421 / 92
Регистрация: 23.09.2010
Сообщений: 1,165

Сообщение было отмечено Aialonix как решение

Решение

variable = document.querySelector(".continue").getAttribute("id");