Javascript и Jquery селекторы. Выбор элемента по id. Метод getElementById - Выбор элемента по id идентификатору Поиск элемента на странице javascript

В прошлом уроке был рассмотрен метод getElementsByTagName , который возвращает массив (группу ) элементов страницы по имени тега.

Здесь продолжается практическая работа с javascript и будет рассмотрен метод getElementById , который возвращает ссылку на элемент , ориентируясь на его уникальный идентификатор id .

Метод getElementById, как и getElementsByTagName является методом объекта document .

Название метода переводится буквально: получить элемент по id .

Любому элементу (тегу ) веб-документа может быть назначен свой id -идентификатор, благодаря которому элемент становиться уникальным и к нему можно получить доступ для работы именно с ним.

Обратите внимани е: в имени метода в конце слова Element нет буквы s (в отличие от метода getElementsByTagName ). Это сделано для удобства и говорит о том, что метод служит для выбора элемента .

/* Заносим в переменную unique ссылку на тег img по id-идентификатору penguin */

Немного пояснений для фрагмента кода выше...

• тег img (изображени е) имеет id -идентификатор penguin ;
• при помощи метода getElementById по идентификатору penguin выбирается именно этот тег img ;
• в переменную unique заносится ссылка на выбранный тег;
• далее можно работать с тегом, как с объектом через переменную unique , подобно тому, как проводилась работа с объектом Date через произвольную переменную.

После получения доступа к элементу (тегу ) веб-страницы по id -идентификатору при помощи метода getElementById , мы уже работаем с ним, как с Объекто м, а значит, получаем доступ к атрибутам тега, как к свойствам Объекта.

Следовательно, значения атрибутов являются уже значениями свойств.

Продолжим работать с предыдущим примером...

"Задумчивый пингвин" >

var unique = document .getElementById ("penguin" );

alert (unique .alt ); /* Выводим на экран значение свойства alt объекта unique (значение атрибута alt тега img ) */

Пояснения для примера кода...

• тег img (изображени е) имеет определенные атрибуты : src - адрес файла, width и height - ширина и высота картинки, alt - альтернативный текст;
• получив доступ к тегу при помощи метода getElementById , как к объекту , мы получаем доступ к атрибутам тега, как к свойствам объекта ;
• А значения атрибутов теперь уже являются значениями свойств ;
• в javascript доступ к свойствам объекта осуществляется через точку. Далее выводим alt - альтернативный текст тега img при помощи метода alert на экран.

Надеюсь, что Вы не запутались во всем этом. Нужно понимать одновременно, что происходит на программном уровне javascript и на уровне разметки документа.

Тег img - это Объект unique ;

Атрибуты тега width и alt - это свойства Объекта;

Значения атрибутов "128" и "Задумчивый пингвин" - это значения свойств;

// Вот, как это выглядит с позиции javascript:

var unique = {

width : "128" ,

alt : "Задумчивый пингвин"

}

Вот так работает метод getElementById , возвращающий ссылку на любой элемент (тег ) веб-стрницы, если тот имеет уникальный идентификатор id . Далее проводится работа с этим элементом на уровне javascript уже как с объектом ...

Следует учесть что : как и в предыдущем уроке , здесь - при работе с методом getElementById строку вызова скрипта следует размещать в конце html -документа

В jQuery есть и другие возможности выбора элементов веб-документа.

Задача, которая очень часто встает перед начинающими разработчиками javascript это выбор элемента на веб-странице по его атрибуту id.

Предположим, что у нас есть код на странице.

Содержимое блока.

Каким образом можно выбрать элемент с id=»elem» и произвести с ним ряд каких-то действий?

Здесь есть несколько вариантов решения проблемы. Давайте их сейчас рассмотрим.

Вариант 1. Воспользоваться методом Javascript getElementById.

Есть способ, как можно обратиться к элементу по его id используя «чистый» javascript код, без использования каких-то сторонних библиотек. Этот способ заключается в использовании метода ggetElementById(«id_элемента»). Таким образом мы обращаемся к нужному нам элементу по его id.

Давайте посмотрим, как это работает на простом примере.

Содержимое блока. alert(document.getElementById("elem").innerHTML);

Обратите внимание, что эти строки кода (скрипт) находится ниже самого элемента. Это обязательное условие работы этого скрипта, т.к. код Javascript выполняется по мере загрузки страницы. Если расположить код выше, то мы будем обращаться к элементу на странице, который еще не подгрузился, т.е. его в коде, на момент выполнения скрипта, еще не будет. Есть способы, как этого можно избежать, но это выходит за рамки данной статьи.

В итоге, если все правильно работает, мы получим всплывающее окно. В этом окне будет выводиться текст, который находится внутри блока div.

Давайте теперь посмотрим, как можно решить эту задачу другим способом.

Вариант 2. С помощью библиотеки Jquery.

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

Для того, чтобы обратиться к элементу по его id нужно воспользоваться конструкцией:

$("#elem")

Здесь elem – имя, которое содержится в атрибуте id.

Т.к. мы будем использовать стороннюю библиотеку Javascript, которая называется Jquery, то эту библиотеку нужно сначала подключить.

Добавляется она в разделе , одним из способов, как это можно сделать, нужно добавить следующую строку кода:

Чтобы библиотека могла подгрузиться должно быть соединение с Интернет.

Содержимое блока. alert($("#elem").html());

Сам скрипт, как и в предыдущем примере, должен находиться ниже по коду того элемента, с которым вы хотите взаимодействовать.

Таким образом, мы с вами разобрали два способа, как можно выбрать элемент на веб-странице по его атрибуту id и взаимодействовать с ним. Выбирайте тот способ, который вам подходит, и используйте его на практике.

Последнее обновление: 1.11.2015

Для работы со структурой DOM в JavaScript предназначен объект document , который определен в глобальном объекте window . Объект document предоставляет ряд свойств и методов для управления элементами страницы.

Поиск элементов

Для поиска элементов на странице применяются следующие методы:

getElementById(value) : выбирает элемент, у которого атрибут id равен value

getElementsByTagName(value) : выбирает все элементы, у которых тег равен value

getElementsByClassName(value) : выбирает все элементы, которые имеют класс value

querySelector(value) : выбирает первый элемент, который соответствует css-селектору value

querySelectorAll(value) : выбирает все элементы, которые соответствуют css-селектору value

Например, найдем элемент по id:

Block Header var headerElement = document.getElementById("header"); document.write("Текст заголовка: " + headerElement.innerText);

С помощью вызова document.getElementById("header") находим элемент, у которого id="header". А с помощью свойства innerText можно получить текст найденного элемента.

Поиск по определенному тегу:

Заголовок

Первый абзац

Второй абзац

var pElements = document.getElementsByTagName("p"); for (var i = 0; i < pElements.length; i++) { document.write("Текст параграфа: " + pElements[i].innerText + "
"); }

С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.

Если нам надо получить только первый элемент, то можно к первому элементу найденной коллекции объектов:

Var pElement = document.getElementsByTagName("p"); document.write("Текст параграфа: " + pElement.innerText);

Получение элемента по классу:

Заголовок статьи

Первый абзац

Второй абзац

var articleDiv = document.getElementsByClassName("article"); console.log(articleDiv); var textElems = document.getElementsByClassName("text"); for (var i = 0; i < textElems.length; i++) { console.log(textElems[i]); }

Выбор по селектору css:

Аннотация статьи

Первый абзац

Второй абзац

var elem = document.querySelector(".annotation p"); document.write("Текст селектора: " + elem.innerText);

Выражение document.querySelector(".annotation p") находит элемент, который соответствует селектору.annotation p . Если на странице несколько элементов, соответствующих селектору, то метод выберет первый из них. В итоге браузер выведет:

Аннотация статьи Первый абзац Второй абзац Текст селектора: Аннотация статьи

Чтобы получить все элементы по селектору, можно подобным образом использовать метод document.querySelectorAll , который возвращает массив найденных элементов:

Аннотация статьи

Первый абзац

Второй абзац

var elems = document.querySelectorAll(".text p"); for (var i = 0; i < elems.length; i++) { document.write("Текст селектора " + i + ": " + elems[i].innerText + "
"); }

Вывод браузера:

Аннотация статьи Первый абзац Второй абзац Текст селектора 0: Первый абзац Текст селектора 1: Второй абзац

Property matches the specified string. Since element IDs are required to be unique if specified, they"re a useful way to get access to a specific element quickly.

If you need to get access to an element which doesn"t have an ID, you can use querySelector() to find the element using any selector .

Syntax var element = document .getElementById(id); Parameters id The ID of the element to locate. The ID is case-sensitive string which is unique within the document; only one element may have any given ID. Return value

An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

Example HTML getElementById example

Some text here

blue red JavaScript function changeColor(newColor) { var elem = document.getElementById("para"); elem.style.color = newColor; } Result Usage notes

The capitalization of "Id" in the name of this method must be correct for the code to function; getElementByID() is not valid and will not work, however natural it may seem.

Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll() , getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

Example Document

hello word1

hello word2

hello word3

hello word4

var parentDOM = document.getElementById("parent-id"); var test1 = parentDOM.getElementById("test1"); //throw error //Uncaught TypeError: parentDOM.getElementById is not a function

If there is no element with the given id , this function returns null . Note that the id parameter is case-sensitive, so document.getElementById("M ain") will return null instead of the element because "M" and "m" are different for the purposes of this method.

Elements not in the document are not searched by getElementById() . When creating an element and assigning it an ID, you have to insert the element into the document tree with or a similar method before you can access it with getElementById() :

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

Non-HTML documents . The DOM implementation must have information that says which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document"s DTD. The id attribute is defined to be of ID type in the common cases of XHTML , XUL , and other. Implementations that do not know whether attributes are of type ID or not are expected to return null .

Specification Specification Status Comment

Document Object Model (DOM) Level 1 Specification	Obsolete	Initial definition for the interface
Document Object Model (DOM) Level 2 Core Specification The definition of "getElementById" in that specification.	Obsolete	Supersede DOM 1
Document Object Model (DOM) Level 3 Core Specification The definition of "getElementById" in that specification.	Obsolete	Supersede DOM 2
DOM The definition of "getElementById" in that specification.	Living Standard	Intend to supersede DOM 3

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet getElementById

Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5.5	Opera Full support 7	Safari Full support 1	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android ?

Legend Full support Full support Compatibility unknown Compatibility unknown

Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById , getElementsByTagName и getElementsByName .

Более мощные способы поиска предлагают javascript-библиотеки.

Поиск по id

Самый удобный способ найти элемент в DOM - это получить его по id . Для этого используется вызов document.getElementById(id)

Например, следующий код изменит цвет текста на голубой в div "е c id="dataKeeper" :

Document.getElementById("dataKeeper").style.color = "blue"

Поиск по тегу

Следующий способ - это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag) . Она возвращает массив из элементов, имеющих такой тег.

Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:

Document.getElementsByTagName("LI")

Что интересно, getElementsByTagName можно вызывать не только для document , но и вообще для любого элемента, у которого есть тег (не текстового).

При этом будут найдены только те объекты, которые находятся под этим элементом.

Например, следующий вызов получает список элементов LI , находящихся внутри первого тега div:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Получить всех потомков

Вызов elem.getElementsByTagName("*") вернет список из всех детей узла elem в порядке их обхода .

Например, на таком DOM:

Такой код:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i