Главная » Работа с элементами страницы

Работа с элементами страницы


28.03.2021, 22:07
Изменение стилей элементов

С помощью JavaScript можно менять стили элементов путём добавления inline-стилей.

Например, получили со страницы элемент div с id = "box"

Код

const box = document.getElementById('box');

Добавляем ему стили, обращаясь к его внутреннему объекту style и далее прописываем нужное свойство:

Код

box.style.backgroundColor = 'red';

Свойства при этом прописываются в формате camelCase, а не как в CSS.

Код

box.style.width = '300px'; // => назначили ширину элементу

Код

box.style.borderRadius = '10px'; // => закругление для углов блока

Со страницы получена какая-то выборка, например, все кнопки с классом button

Код

const btns = document.getElementsByClassName('button');

Чтобы изменить стили какой-то из этих кнопок, нужно обращаться к ней по индексу (так как выборка - массивоподобный объект).

Например, чтобы изменить стили первой кнопки:

Код

btns[0].style.backgroundColor = 'blue';

Назначить сразу несколько стилей для элемента можно с помощью свойства cssText:

Код

btns[0].style.cssText = 'background-color: blue; border-radius: 5px; width: 100px';

Также при этом можно в кавычках-бектиках использовать переменные:

Код

btns[0].style.cssText = `border-radius: 5px; width: ${num}px`;

Как назначить стили сразу нескольким элементам? Например, всем кнопкам выборки.

Можно использовать метод forEach() для выборки, полученной через querySelectorAll().
Либо использовать цикл:

Код

const btns = document.getElementsByTagName('button');

  for (let i = 0; i < btns.length; i++) {
  btns[i].style.cssText = 'background-color: red; width: 100px';
  }

С помощью метода forEach() :

Код

const circles = document.querySelectorAll('.circle');

  circles.forEach(item => {
  item.style.cssText = 'background-color: purple; width: 100px';
  });

Методы для работы с элементами страницы

Метод document.createElement() - создаёт элемент с указанным в аргументе тегом.

Код

const newDiv = document.createElement('div'); // => создали новый элемент div

После этого элемент не появляется на странице, он существует только внутри скрипта.

Добавить новый текстовый узел поможет метод document.createTextNode() :

Код

const newText = document.createTextNode('hello, world!');

Альтернативой добавления inline-стилей элементам является работа с CSS-классами(назначение, удаление и т.д.)

Делается это с помощью свойства classList и методов возвращаемого им объекта (add(), remove(), toggle() и др.)

Код

newDiv.classList.add('black'); // => добавили класс black к блоку newDiv  

Элемента на странице по-прежнему нет, для его вывода на страницу используем DOM-дерево, а именно, используя имеющийся на странице элемент.

Современные методы для работы со страницей

Данные методы не работают в устаревших версиях браузеров.

Метод append() добавляет элемент в конец выбранного другого элемента.

Например, допустим на странице уже есть элемент div с классом container:

Код

  <div class="container">
  <p>
  Первый параграф
  </p>
  <p>
  Второй параграф
  </p>
  </div>

Добавляем наш элемент в конец элемента с классом container

Код

const newDiv = document.createElement('div');

document.querySelector('.container').append(newDiv); /* => выбрали нужный  
элемент страницы и добавили в его конец созданный ранее новый элемент div */

Метод prepend() позволяет вставить один элемент в начало другого.

Код

document.querySelector('.container').prepend(newDiv); /* => выбрали нужный  
элемент страницы и добавили в его начало созданный ранее новый элемент div */

Метод before() - вставляет элемент перед выбранным, метод after() после выбранного элемента.

Код

document.querySelector('.container').before(newDiv); /* => выбрали нужный
элемент страницы и вставили перед ним элемент из переменной newDiv */

Код

document.querySelector('.container').after(newDiv); /* => выбрали нужный
элемент страницы и вставили после него элемент из переменной newDiv */

Метод remove() позволяет удалять элементы со страницы.

Код

document.querySelector('.container').remove(); /* => выбрали нужный
элемент страницы и удалили */

Метод replaceWith() позволяет заменить один элемент другим. Синтаксис такой:

Код

заменяемыйЭлемент.replaceWith(заменяющийЭлемент);

Устаревшие, но всё ещё действующие методы работы со страницей

Метод appendChild() аналогичен методу append(), добавляет элемент в конец другого элемента

Код

document.querySelector('.container').appendChild(newDiv);  

Метод insertBefore() позволяет вставлять элемент перед выбранным элементом.

Синтаксис:

Код

выбранныйЭлемент.insertBefore(вставляемыйЭлемент, выбранныйЭлемент);

Допустим, есть блок с классом container и пятью кнопками внутри:

Код

  <div class="container">
  <button>кнопка</button>
  <button>кнопка</button>
  <button>кнопка</button>
  <button>кнопка</button>
  <button>кнопка</button>
  </div>

Вставим элемент div перед первой кнопкой в элементе с классом container

Код

const newDiv = document.createElement('div');

const container = document.querySelector('.container');
const btns = document.querySelectorAll('button');

container.insertBefore(newDiv, btns[0]);

Метод removeChild() позволяет удалить выбранный элемент

Код

const newDiv = document.createElement('div');

newDiv.classList.add('black');
const container = document.querySelector('.container');
const btns = document.querySelectorAll('button');

container.removeChild(btns[0]); // => удалили первую кнопку

Метод replaceChild() позволяет заменить элемент другим элементом

Код

родительскийЭлемент.replaceChild(заменяющийЭлемент, заменяемыйЭлемент);

Код

const newDiv = document.createElement('div');

newDiv.classList.add('black');

const container = document.querySelector('.container');
const btns = document.querySelectorAll('button');

container.replaceChild(newDiv, btns[0]); // => заменили первую кнопку блоком div с классом black

Добавление содержимого в элементы

Свойство innerHTML позволяет получать и изменять содержимое элемента.

Например, добавим текст в элемент, лежащий в newDiv:

Код

const newDiv = document.createElement('div');

newDiv.innerHTML = 'Hello';

аналогично можно с помощью этого свойства использовать HTML-структуру:

Код

newDiv.innerHTML = '<h2>Hello</h2>';

Свойство textContent позволяет получать и устанавливать текстовое содержимое элемента.

Не работает с HTML-структурой.

Добавляем текст во вновь созданный элемент div

Код

const newDiv = document.createElement('div');

newDiv.textContent = 'Hello';

Метод insertAdjacentHTML() позволяет вставить HTML-структуру перед выбранным элементом, после него, а также в его начало или конец.

Например, вставить html-код перед элементом:

Код

const newDiv = document.createElement('div');

newDiv.insertAdjacentHTML('beforebegin','<h2>Hello</h2>');

Вставить код в начало элемента:

Код

newDiv.insertAdjacentHTML('afterbegin','<h2>Hello</h2>');

Вставить код в конец элемента:

Код

newDiv.insertAdjacentHTML('beforeend','<h2>Hello</h2>');

вставить html-код после выбранного элемента:

Код

newDiv.insertAdjacentHTML('afterend','<h2>Hello</h2>');

Поиск элементов внутри родительского элемента

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

Код

  <div class="container">
  <button>кнопка</button>
  <button>кнопка</button>
  <button>кнопка</button>
  <button>кнопка</button>
  <button>кнопка</button>
  </div>

Как выбрать все элементы button в элементе с классом container?

Код

const container = document.querySelector('.container');

const btns = container.querySelectorAll('button'); // обращаемся не через document, а через родительский элемент

КОММЕНТАРИИ (0)