Поиск элементов на странице §

Поиск элемента по тегу §

var list = document.querySelector('ul');

Поиск последнего элемента из списка §

var lastProduct = document.querySelector('li:last-child');

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

var price = document.querySelector('.price');

Поиск третьего элемента из списка товаров §

var thirdProduct = document.querySelector('.product:nth-child(3)');

Поиск всех элементов, подходящих по селектору §

var listItems = document.querySelectorAll('.product');

querySelectorAll возвращает список (коллекцию) элементов. Этот список похож на массив, но им не является. Он называется псевдомассив и его можно перебирать с помощью цикла for.

Добавление класса элементу страницы §

// Когда ищем элемент по классу, используем точку var product = document.querySelector('.product');

// Но когда добавляем класс, точки нет! product.classList.add('product--sale');

Результат работы classList.add() такой же, как при ручном добавлении класса в разметку:

Свойство DOM-элемент.children возвращает коллекцию дочерних, то есть вложенных, DOM-элементов.

Создание элемента и добавление его в DOM-дерево §

var list = document.querySelector('.cards');

// Создаём новый элемент var card = **document.createElement('li')**;

card.classList.add('card');

// После вызова этого метода новый элемент отрисуется на странице list.appendChild(card);

Вот что произойдёт с разметкой после вызова appendChild:

• Существующий элемент

• Существующий элемент
• Добавленный элемент

Работа с текстовым содержимым элемента §

HTML §

Я — текстовый элемент.

JS §

var p = document.querySelector('p');
console.log(**p.textContent**);
// Выведет: Я — текстовый элемент.
 
**p.textContent** = 'Теперь у меня новое содержимое.';
console.log(p.textContent);
// Выведет: Теперь у меня новое содержимое.
 
// В HTML содержание тега изменится
<p>Теперь у меня новое содержимое.</p>

Работа с изображениями: §

Создание изображения §

var picture = document.createElement('img');

Добавляем адрес картинки §

picture.src = 'images/picture.jpg';

Добавляет альтернативный текст §

picture.alt = 'Непотопляемая селфи-палка';

Добавляет изображение в конец родительского элемента §

element.appendChild(picture);