May 31, 2023

DOM Nodes

Манипулирование DOM - это то, чем занимается JavaScript. Или... э... раньше, до появления Node.js. Это то, чем занимается веб-разработка.

Рассмотрим этот HTML:

<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