Метод getElementById - Выбор элемента по id идентификатору. Метод getElementById - Выбор элемента по id идентификатору Методы для работы с атрибутами в JavaScript
Последнее обновление: 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: Второй абзац
На этом уроке мы рассмотрим методы объекта document , которые предназначены для поиска узла или коллекции узлов во всём документе. А также методы объекта node (узла), которые выполняют аналогичные действия, но уже среди своих дочерних узлов.
Методы, предназначенные для поиска узла или коллекции узлов в деревеНа предыдущем уроке мы рассмотрели свойства, с помощью которых мы можем перемещаться по дереву и находить нужные нам узлы. Но, поиск узлов с помощью их свойств занятие очень трудное и не эффективное. Поэтому чтобы найти узлы в дереве, веб-разработчики обычно используют специально предназначенные для этого методы объекта document или узла (node).
Метод getElementById()Метод getElementById(elementID) возвращает элемент в документе, имеющий указанный идентификатор (id="elementID"), в виде объекта Node (узла). Если элемента с указанным идентификатором не существует, то данный метод возвращает значение null .
В соответствии стандартом у Вас в документе не может быть несколько элементов с одинаковым значением атрибута id , т.е. значение идентификатора должны быть уникальным в пределах одного документа. Тем не менее, если у Вас в документе существуют несколько элементов с указанным id , то метод getElementById() вернёт первый найденный элемент.
document.getElementById(elementID)
Данный метод имеет один обязательный параметр (elementID), представляющий собой строку, содержащую значение атрибута id элемента, который Вы хотите получить.
Например, изменить цвет текста элемента, имеющего id="nameArticie" .
Название статьи
- 1 пункт
- 2 пункт
- 3 пункт
Метод getElementsByClassName(className) возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), имеющих указанное имя класса (class="className"), в виде объекта NodeList (коллекции узлов). Другими словами данный метод возвращает объект NodeList , представляющий собой коллекцию элементов (узлов), имеющих указанное в параметре этого метода имя класса.
Для получения количество найденных узлов Вы необходимо использовать свойство length объекта NodeList . А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:
Var elementsList = document.getElementsByClassName("list");
for (var i=0; i