종종 개발자는 요소 쿼리, 클래스 추가/제거, 이벤트 리스너 추가 등과 같은 기본 DOM 조작을 위해 jQuery과 같은 라이브러리에 의존하는 경향이 있습니다. 많은 리소스가 이러한 문제에 대한 솔루션으로 jQuery를 가리키지만 실제로는 jQuery를 사용합니다. 기본 사항에 대한 것은 아마도 귀하의 웹 사이트에 과잉 일 것입니다. Vanilla Javascript DOM API는 기본 DOM 조작 이상의 기능을 제공하며 jQuery를 삭제할 수 있다는 것은 페이지 로드 속도가 감소한다는 것을 의미합니다! 다음은 바닐라 자바스크립트의 기본 사항입니다.

DOM 요소 쿼리

바닐라 Javascript에서 DOM 요소를 쿼리하는 데 사용할 수 있는 몇 가지 방법이 있으며 가장 일반적인 방법은 document.querySelector() 입니다. 이 메서드는 CSS 선택자를 인수로 사용하고 해당 선택자와 일치하는 첫 번째 항목을 반환합니다. 사용 방법은 다음과 같습니다.

var mySelector = document.querySelector('.my-selector');
var paragraph = document.querySelector('p');
var hiddenInput = document.querySelector('input[type="hidden"]');

선택기의 모든 항목(예: 페이지의 모든 <h1> 태그)을 가져오려면 document.querySelectorAll() 를 사용하십시오. 이 메서드는 NodeList 을 반환합니다. 사용 방법은 다음과 같습니다.

var headings = document.querySelectorAll('h1');
var listLinks = document.querySelectorAll('li a');
var items = document.querySelectorAll('.my-selector > p strong');

추가 조작을 위해 간단하게 반복할 수 있습니다. 이를 수행하는 몇 가지 방법이 있으며 가장 간단한 방법은 for 루프 또는 for of 루프입니다.

var headings = document.querySelectorAll('h1');

for (var i = 0; i < headings.length; i++) {
  var heading = headings[i];
  // do something with heading here
}

for (var heading of headings) {
  // do something with heading here
}

최신 브라우저에서는 NodeLists에서 forEach() 메서드를 사용할 수도 있습니다.

var headings = document.querySelectorAll('h1');

headings.forEach(function(heading) {
  // do something with heading here
});

DOM 요소를 쿼리하는 다른 메서드는 ID와 일치하는 첫 번째 요소를 가져오는 document.getElementById(), 클래스와 일치하는 요소 목록을 가져오는 document.getElementsByClassName()(HTMLCollection 반환) 및 라이브 목록을 가져오는 document.getElementsByTagName()입니다. 선택기와 일치하는 요소의 수입니다( HTMLCollection 반환).
getElementsByTagName()와 querySelectorAll()의 차이점은 getElementsByTagName()가 라이브 목록을 반환한다는 것입니다. 즉, 요소가 동적으로 추가되면 업데이트됩니다.

클래스 추가/제거

정말 일반적인 DOM 조작은 요소에서 클래스를 추가하거나 제거하는 것입니다. 운 좋게도 이는 바닐라 자바스크립트로 매우 쉽게 달성할 수 있습니다.

var button = document.querySelector('button');

button.classList.add('small');
button.classList.remove('large');
button.classList.toggle('active'); // if element has class 'active' then remove it, otherwise add it

이벤트 리스너 추가

이벤트 리스너('클릭', '스크롤' 등)를 추가하는 것은 Vanilla JS에서 매우 간단합니다. DOM 요소에 addEventListener() 메서드를 사용하여 이벤트 유형과 콜백 함수를 전달합니다(jQuery의 on method 와 유사). 사용 방법은 다음과 같습니다.

var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  // do something here
});

함께 모아서

이제 DOM 조작의 기본 사항을 배웠으니 모두 함께 살펴보겠습니다.

// Query all button elements
var buttons = document.querySelectorAll('button');

// Iterate through the buttons
for (var button of buttons) {
  // Add a 'click' event listener to each button
  button.addEventListener('click', function() {
    // Add a class to the clicked button
    this.classList.add('active');
  });
}