검색
검색
회원가입로그인

추가 노트 - 자바스크립트로 DOM 조작하는 방법 (필수 요소)

자바스트립트를 활용해서 DOM(Document Object Model) 조작할 때 필수적인 것들을 알려드리겠습니다. DOM을 활용해서 HTML의 각 요소들을 동적으로 불러오고 변경할 수 있습니다.

  1. getElementById: 특정 ID를 가진 HTML 요소를 찾는 데 사용됩니다.

let element = document.getElementById('myId');
  1. getElementsByTagName: 특정 태그 이름을 가진 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 해당하는 모든 요소의 NodeList를 반환합니다.

let elements = document.getElementsByTagName('div');
  1. getElementsByClassName: 특정 클래스를 가진 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 해당하는 모든 요소의 NodeList를 반환합니다.

let elements = document.getElementsByClassName('myClass');
  1. querySelector: CSS 선택자를 사용하여 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 일치하는 첫 번째 요소만 반환합니다.

let element = document.querySelector('.myClass');
  1. querySelectorAll: CSS 선택자를 사용하여 HTML 요소를 찾는 데 사용됩니다. 이 메서드는 일치하는 모든 요소의 NodeList를 반환합니다.

let elements = document.querySelectorAll('.myClass');
  1. innerText, innerHTML: HTML 요소의 텍스트 또는 HTML 내용을 가져오거나 설정하는 데 사용됩니다.

let content = element.innerText;
element.innerHTML = '<b>New content</b>';
  1. style: HTML 요소의 CSS 스타일을 조작하는 데 사용됩니다.

element.style.color = 'red';
  1. addEventListener: HTML 요소에 이벤트 핸들러를 추가하는 데 사용됩니다.

element.addEventListener('click', function() {
  alert('Element was clicked!');
});
  1. createElement, appendChild, removeChild: 새 HTML 요소를 생성하거나, 요소를 다른 요소의 자식으로 추가하거나, 자식 요소를 제거하는 데 사용됩니다.

let newElement = document.createElement('div');
element.appendChild(newElement);
element.removeChild(newElement);

여기서 appendChild( ) 메서드는 주어진 자식 노드를 특정 부모 노드의 마지막 자식으로 추가하는데 사용됩니다.

이들은 자바스크립트 DOM 조작에 있어서 기본적이면서도 중요한 요소들입니다. 이 외에도 더 고급적인 기능들이 있지만, 대부분의 상황에서 충분할 것입니다.

조회수 : 134
공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기