May 31, 2023
DOM Nodes
Манипулирование DOM - это то, чем занимается JavaScript. Или... э... раньше, до появления Node.js. Это то, чем занимается веб-разработка.
<ul id="list"> <li class="item">One</li> <li class="item">Two</li> <li class="item">Three</li> </ul>
// Получить элемент с идентификатором по его идентификатору.
const list = document.querySelector('#list')
// Получить группу элементов с похожим классом.
// Возвращает 'NodeList', который *не является* массивом
const items = document.querySelectorAll('.item')
// Получение элементов по имени их тега
const listAgain = document.querySelector('ul')Node list похож на массив, но это не так. Многие из методов, которые вы можете использовать для массивов, вы не можете использовать для NodeLists.
// работает
console.log(items.length) // => 3
// не работает
items.push( /*новый элемент*/ );
// Добавление элементов в DOM программным способом
const newLi = document.createElement('li')
newLi.innerText = 'Four'
list.appendChild(newLi)Далее: dom event listeners