Объект document. Поиск элементов

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

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

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

• getElementById(value): выбирает элемент, у которого атрибут id равен value
• getElementsByTagName(value): выбирает все элементы, у которых тег равен value
• getElementsByClassName(value): выбирает все элементы, которые имеют класс value
• querySelector(value): выбирает первый элемент, который соответствует css-селектору value
• querySelectorAll(value): выбирает все элементы, которые соответствуют css-селектору value

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

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

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

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

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

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

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

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

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

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