Работа с DOM и CSS в JavaScript

Доступ к элементам DOM – дерева

Для того чтобы получить доступ к элементам на странице, у объекта document есть несколько методов:

getElementById – для поиска элемента по id. В качестве параметра принимает id элемента. Возвращает найденный элемент;

getElementsByClassName – для поиска элемента по классу. В качестве параметра принимает имя класса. Возвращает список найденных элементов;

getElementsByTagName – для поиска элемента по тегу. В качестве параметра принимает имя тега. Возвращает список всех найденных элементов;

qurySelector – для поиска элемента по выбранному css селектору. В качестве параметра принимает имя тега, имя класса или id. Возвращает первый найденный элемент на странице;

querySelectorAll – для поиска элемента по выбранному css селектору. В качестве параметра принимает имя тега, имя класса или id. Возвращает список всех найденных элементов;

получаем список элементов методом querySelectorAll

получаем элемент по id

получаем список элементов с классом block

получаем список всех элементов div

получаем элементы по селектору

Создание элементов

Новые DOM элементы создаются при помощи метода createElement(). А для того чтобы вставить элемент в документ, используется метод appendChild().

создаём новый div элемент и помещаем его на страницу

Создание, установка и чтение атрибутов

Создать атрибут или изменить значение существующего атрибута можно при помощи метода setAttribute(). А прочитать атрибут можно при помощи метода getAttribute().

создаём атрибуты у элемента, а затем получаем значение атрибута data-id

Вставка текста

Вставить текст можно двумя способами: 1. При помощи метода createTextNode(). В качестве параметра методу передаётся текст для вставки. 2. При помощи свойства innerText. Данному свойству надо просто присвоить строку с текстом.

устанавливаем текст элементу двумя разными способами

Вставка html кода

Для вставки html кода надо воспользоваться свойством innerHTML, присвоив ему в виде строки html код.

вставляем в элемент html код

Перемещение по DOM - дереву

Иногда возникает такая ситуация, что надо получить доступ к элементу на странице, у которого нет никаких атрибутов, по которым мы его можем отобрать. Такая ситуация маловероятна, если вы сами пишете сайт с нуля, и, если вы знаете, что к какому-то элементу придётся получать доступ из JavaScript, вы, конечно, навесите на элемент id или class. Но что, если вы пишете расширение для браузера, которое, в свою очередь, работает с html – документом, который написан кем-то другим, а не вами? Вот тут и потребуется получать доступ к элементам, которые находятся на несколько уровней выше или ниже известного элемента. В JavaScript есть несколько методов для перемещения по DOM – дереву:

childNodes – коллекция дочерних элементов;

firstChild – получить доступ к первому элементу;

lastChild – получить доступ к последнему элементу;

previousSibling – доступ к соседнему элементу слева;

nextSibling – доступ к соседнему элементу справа;

children – дочерний элемент;

firstElementChild – первый элемент внутри родителя;

lastElementChild – последний элемент внутри родителя;

previousElementSibling – элемент слева;

nextElementSibling – элемент справа;

parentElement – родительский элемент.

parentNode – родительский элемент.

Допустим, у нас есть такая структура документа:

дерево элементов на странице

У нас есть атрибут class только у одного элемента div, от него мы и будем перемещаться по дереву.

получаем доступ к вложенному элементу с индексом 3

получаем первый и последний вложенные элементы

Как видите, при обращении к последнему дочернему элементу мы попали на текстовый узел, который содержит в себе перевод строки. Имейте ввиду эту особенность.

Здесь мы снова получили текстовые узлы вместо ожидаемых элементов span.

получаем доступ к дочерним элементам через коллекцию children

Как видите, в этом случае мы получили то, что ожидали.

получаем первый и последний дочерние элементы

получаем элементы слева и справа

переходим на родительский элемент

Изменение CSS свойств

Управлять CSS свойствами можно либо через свойство style, либо через свойство cssText. Допустим, чтобы изменить цвет текста элемента, надо обратиться к свойству style, а затем обратиться к свойству css color, а затем присвоить ему новый цвет. Есть такие свойства в css, имена которых состоят из двух слов, разделенными дефисом. Чтобы получить доступ к таким свойствам, надо указать имя свойства без дефиса, при этом второе слово должно начинаться с большой буквы. Выглядит это всё следующим образом: element.style.color = “#000000”; element.backgroundColor = “#ffffff”;

Для того чтобы изменить свойство css при помощи свойства cssText, надо просто присвоить строку этому свойству с css кодом. В этом случае код должен соответствовать тому, как он записывается в css стилях. Например: element.style.cssText = “color: #ffffff; background-color: #000000”;

Допустим, у нас есть на странице div – элемент. Мы назначим ему ширину и высоту, а также назначим зеленый цвет текста и установим темный фон.

меняем css свойства при помощи свойства style

меняем css свойства при помощи свойства style.cssText