Выбор элемента по идентификатору

Чтобы получить элемент по id, вы используете метод getElementById() объекта Document:

let element = document.getElementById(id);
Code language: JavaScript (javascript)

Метод возвращает элемент, id которого совпадает с указанной строкой. 

Значение id чувствительно к регистру. Если подходящий элемент не найден, метод возвращает null.

Поскольку id должен быть уникальным, использование метода getElementById() является быстрым способом выбора элемента.

Если у элемента нет идентификатора, вы можете использовать querySelector(), чтобы найти элемент с помощью любого селектора CSS.

Смотрите следующий пример:

<html> <head> <title>JavaScript getElementById() example</title> </head> <body> <h1 id="message">JavaScript getElementById() Demo</h1> <div id="btn"> <button id="btnRed">Red</button> <button id="btnGreen">Green</button> <button id="btnBlue">Blue</button> </div> <script src="js/app.js"></script> </body> </html>
Code language: HTML, XML (xml)

JavaScript

const changeColor = (newColor) => { const element = document.getElementById('message'); element.style.color = newColor; } let div = document.getElementById('btn'); div.addEventListener('click', (event) => { let target = event.target; switch (target.id) { case 'btnRed': changeColor('red'); break; case 'btnGreen': changeColor('green '); break; case 'btnBlue': changeColor('blue'); break; } });
Code language: JavaScript (javascript)

Оцените статью
devanswers.ru
Добавить комментарий