Основы манипуляции с DOM в ванильном JavaScript (без jQuery)

Конечно, мы также можем создавать совершенно новые элементы или текстовые узлы:

 const myNewElement = document.createElement('div') const myNewTextNode = document.createTextNode('some text') 

который мы можем затем вставить, как показано выше. Если мы хотим удалить элемент, мы не можем сделать это напрямую, но мы можем удалить дочерние элементы из родительского элемента, например, так:

 myParentElement.removeChild(myElement) 

Это дает нам небольшую работу вокруг, то есть фактически может косвенно удалить элемент, ссылаясь на его родительский элемент:

 myElement.parentNode.removeChild(myElement) 

Свойства элемента

Каждый элемент также имеет свойства .innerHTML и .textContent (а также .innerText , который аналогичен .textContent , но имеет некоторые важные различия ). Они содержат HTML и текстовое содержимое соответственно. Это доступные для записи свойства, то есть мы можем напрямую изменять элементы и их содержимое:

 // Replace the inner HTML myElement.innerHTML = ` <div> <h2>New content</h2> <p>beep boop beep boop</p> </div> ` // Remove all child nodes myElement.innerHTML = null // Append to the inner HTML myElement.innerHTML += ` <a href="foo.html">continue reading...</a> <hr/> ` 

Добавление разметки к HTML, как показано выше, обычно является плохой идеей, поскольку мы потеряем все ранее сделанные изменения свойств для затронутых элементов (если только мы не сохранили эти изменения в виде атрибутов HTML, как показано в разделе 2 ) и прослушивателей связанных событий. Установка .innerHTML для полного удаления разметки и замены ее чем-то другим, например, разметкой, выполняемой сервером. Поэтому добавление элементов лучше сделать так:

 const link = document.createElement('a') const text = document.createTextNode('continue reading...') const hr = document.createElement('hr') link.href = 'foo.html' link.appendChild(text) myElement.appendChild(link) myElement.appendChild(hr) 

Однако при таком подходе мы вызовем две перерисовки браузера — по одной для каждого добавленного элемента — тогда как изменение .innerHTML вызывает только одну. Чтобы обойти эту проблему производительности, мы можем сначала собрать все узлы в DocumentFragment , а затем просто добавить этот единственный фрагмент:

 const fragment = document.createDocumentFragment() fragment.appendChild(text) fragment.appendChild(hr) myElement.appendChild(fragment) 

Прослушивание событий

Это, пожалуй, самый известный способ привязки слушателя события:

 myElement.onclick = function onclick (event) { console.log(event.type + ' got fired') } 

Но этого, как правило, следует избегать. Здесь .onclick — это свойство элемента, означающее, что вы можете изменить его, но вы не можете использовать его для добавления дополнительных прослушивателей — переназначая новую функцию, вы перезаписываете ссылку на старую.

Вместо этого мы можем использовать гораздо более .addEventListener() метод .addEventListener() чтобы добавить столько событий .addEventListener() количества типов, сколько нам нужно. Он принимает три аргумента: тип события (например, click ), функция, которая вызывается всякий раз, когда событие происходит в элементе (эта функция получает объект события), и необязательный объект конфигурации, который будет объяснен ниже.

 myElement.addEventListener('click', function (event) { console.log(event.type + ' got fired') }) myElement.addEventListener('click', function (event) { console.log(event.type + ' got fired again') }) 

В функции прослушивателя event.target ссылается на элемент, для которого было инициировано событие (как this , если, конечно, мы не используем функцию стрелки ). Таким образом, вы можете легко получить доступ к его свойствам следующим образом:

 // The `forms` property of the document is an array holding // references to all forms const myForm = document.forms[0] const myInputElements = myForm.querySelectorAll('input') Array.from(myInputElements).forEach(el => { el.addEventListener('change', function (event) { console.log(event.target.value) }) }) 

Предотвращение действий по умолчанию

Обратите внимание, что event всегда доступно в функции слушателя, но хорошо бы точно передать его в любом случае, когда это необходимо (и мы можем назвать его, как нам нравится, конечно же). Не вдаваясь в подробности о самом интерфейсе Event , одним особенно заслуживающим внимания методом является .preventDefault() , который, в .preventDefault() , предотвратит поведение браузера по умолчанию, например, .preventDefault() по ссылке. Другим распространенным вариантом использования является условное предотвращение отправки формы в случае сбоя проверки формы на стороне клиента.

 myForm.addEventListener('submit', function (event) { const name = this.querySelector('#name') if (name.value === 'Donald Duck') { alert('You gotta be kidding!') event.preventDefault() } }) 

Другой важный метод события — это .stopPropagation() , который предотвратит всплывающее событие DOM. Это означает, что если у нас есть прослушиватель щелчков (скажем), останавливающий распространение на элементе, и другой слушатель щелчков на одном из его родителей, событие щелчка, которое запускается на дочернем элементе, не сработает на родительском элементе — иначе это сработало бы на обоих.

Теперь .addEventListener() принимает необязательный объект конфигурации в качестве третьего аргумента, который может иметь любое из следующих логических свойств (все из которых по умолчанию имеют значение false ):

 myElement.addEventListener(type, listener, true) 

 myElement.addEventListener('change', function listener (event) { console.log(event.type + ' got triggered on ' + this) this.removeEventListener('change', listener) }) 

 myForm.addEventListener('change', function (event) { const target = event.target if (target.matches('input')) { console.log(target.value) } }) 

 const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(function fadeIn (now)) { const progress = now - start myElement.style.opacity = progress / duration if (progress < duration) { window.requestAnimationFrame(fadeIn) } } 

 const $ = function $ (selector, context = document) { const elements = Array.from(context.querySelectorAll(selector)) return { elements, html (newHtml) { this.elements.forEach(element => { element.innerHTML = newHtml }) return this }, css (newCss) { this.elements.forEach(element => { Object.assign(element.style, newCss) }) return this }, on (event, handler, options) { this.elements.forEach(element => { element.addEventListener(event, handler, options) }) return this } // etc. } } 

 const $ = (selector, context = document) => context.querySelector(selector) const $$ = (selector, context = document) => context.querySelectorAll(selector) const html = (nodeList, newHtml) => { Array.from(nodeList).forEach(element => { element.innerHTML = newHtml }) } // And so on...