DOM содержит методы для доступа к любым элементам страницы. Эти методы возвращают объект узла или список узла в виде массива.
Например, доступ к элементу body можно получить через document.body.
const body = document.body;
typeof body // "object"
Узнать тип элемента можно через свойство nodeType. Возможны варианты:
body.nodeType; // 1
Узнать имя элемента можно через nodeName. Имя возвращается в верхнем регистре.
body.nodeName; // "BODY"
Список всех изображений можно получить через document.images. К отдельному изображению можно получить доступ через индекс.
document.images[0]
Пройтись по всем картинкам можно через цикл.
for (let i = 0 ; i < document.images.length ; i++) {
// что-то делаем
}
Список узлов не является массивом, но можно его преобразовать в массив (ES6):
const imageArray = Array.from(document.images);
// или
const imageArray = [...document.images];
Список ссылок можно получить через document.links.
document.anchors возвращает список элеметов a с атрибутом name.
document.forms возвращает список всех форм.
Для доступа к различным элементам страницы можно использовать следующие функции:
Доступ к элементу по заданному идентификатору можно через метод getElementById().
Создадим несколько параграфов с разными идентификаторами.
Первый параграф
Второй параграф
Третий параграф
<p id="one">Первый параграф</p>
<p id="two">Второй параграф</p>
<p id="three">Третий параграф</p>
Ищем нужный элемент.
document.getElementById("one");
Если элемент не будет найден, то возвращается null.
Далее можем обращаться к найдённому элементу в сценарии. Например, поменять текст через свойство innerHTML
var oneId = document.getElementById("one");
oneId.innerHTML = "А теперь дискотека";
Этот код нужно использовать только в том случае, когда загрузится вся страница и сформируется структура DOM. Для этой цели обычно используют отдельную функцию и вызывают её в window.onload
<script>
function init() {
var oneId = document.getElementById("one");
oneId.innerHTML = "А теперь дискотека (изменённый текст первого параграфа)";
}
window.onload = init;
</script>
Если этого не сделать и поместить сценарий в область head, то ваш код будеть выполняться до того, как полностью сгенерируется объектая модель документа. При этом элемент с нужным идентификатором ещё не будет существовать.
window.onload выполняется, когда страница уже загрузилась, поэтому наш код отработает корректно.
Объект style элементов веб-страницы задаёт их свойства, например, width и height.
С помощью объектной модели документа мы можем извлекать элементы, создавать и добавлять новые элементы, а также удалять их.
Информация о ширине и высоте окна клиента содержится в свойствах body.clientWidth и body.clientHeight объекта document.
Метод getElementsByTagName() похож на getElementById() и возвращает массив элементов, соответствующих определённому имени тега.
var titleArray = document.getElementsByTagName("title");
var title = titleArray[0]; // первый элемент массива
// или сразу
var title = document.getElementsByTagName("title")[0];
// элементы списка
const listItems = document.getElementsByTagName('li');
listItems[0];
Свойство textContent похож на innerHTML. Если innerHTML получает все содержимое элемента, включая теги и контент, то свойство textContent позволяет получить лишь контент, без тегов.
const elem = document.getElementById('one');
const content = elem.textContent;
console.log(content);
getElementsByClassName() возвращает список элементов указанного класса.
const animal = document.getElementsByClassName('animal');
querySelector() позволяет найти первый элемент по CSS-селектору.
document.querySelector('#cats'); // вместо getElementById()
document.querySelectorAll('.animal'); // вместо getElementsByClassName()
Можно задавать и более сложные запросы.
const lastLi = document.querySelector('li:last-child');
const ul = document.querySelector('ul#kitty');
querySelectorAll() позволяет найти все элементы по CSS-селектору.
Свойство childNodes позволяет получить список всех узлов, которые являются дочерними элементами указанного узла.
const kitten = document.getElementById('cats');
kitten.childNodes
Свойство children возвращает дочерний элемент, игнорируя текст. Можно узнать количество элементов через children.length.
Первый элемент можно получить через firstChild. Последний - через lastChild.
Свойство parentNode возвращает родительский узел элемента.
Есть ещё свойства nextSibling и previousSibling.
Найти значение узла можно через цепочку вызовов.
<li class='hero'>Wonder Woman</li>
---
const textNode = wonderWoman.firstChild; // "Wonder Woman"
textNode.nodeValue; // "Wonder Woman"
// или
wonderWoman.textContent; // "Wonder Woman
Метод getAttribute() возвращает значение атрибута. Если атрибута не существует, то вернётся null.
wonderWoman.getAttribute('class');
Можно программно изменить значение атрибута. Если у атрибута нет значения, то можно добавить его.
wonderWoman.setAttribute('class', 'villain');
Можно изменить имя класса не только через setAttribute(), но и через свойство className.
wonderWoman.className; // узнать имя класса
wonderWoman.className = 'hero' // изменить имя класса
Свойство classList поможет получить список всех классов, которые имеет элемент. Дополнительные методы позволяет манипулировать элементом.
wonderWoman.classList.add('warrior');
wonderWoman.classList.remove('warrior');
wonderWoman.classList.toggle('hero');
wonderWoman.classList.contains('hero');
createElement() позволяет создать новый элемент.
const flash = document.createElement('li');
Текстовый узел можно создать через document.createTextNode()
const flashText = document.createTextNode('Flash');
Добавить дочерний узел можно через appendChild().
flash.appendChild(flashText);
Каждый узел имеет свойство style. Мы можем менять его программно.
const cats = document.getElementById('vaska');
const supercat = cats.children[0];
supercat.style.border = "red 2px solid";
Следует быть внимательными со свойствами, которые имеют дефис в названиях. В таких случаях используют вариант с верблюжьей нотацией.
// background-color
supercat.style.backgroundColor = 'blue';
Либо можно использовать квадратные скобки.
supercat.style['background color'] = 'blue';
Можно спрятать элемент и показать снова.
supercat.style.display = 'none';
supercat.style.display = 'block';