JS DOM 요소 선택과 조회

🗓2020년 02월 28일 ∙ 🖊TutorialPost ∙ ⏳2분

문서 객체 모델 (Document Object Model)

DOM은 현재 웹페이지의 문서 모델을 의미합니다. 사용자가 웹페이지를 통해 보게 되는 콘텐츠에 접근하거나 변경할 수 있을 뿐 아니라, 사용자의 동작에 반응할 수도 있게됩니다. DOM의 최상위 객체인 document 객체는 HTML 전체 페이지를 표현합니다.

document 프로퍼티

DOM의 최상위 객체인 document 객체는 DOM을 정의하는 프로퍼티를 가지고 있습니다.

예를 들어 google.com의 document 객체는 아래와 같은 프로퍼티를 가지고 있습니다.

// ex) google.com
document.title         // "Google"
document.domain        // 현재 문서의 도메인
document.URL           // "http://www.google.com/#q=yed"
document.lastModified  // "2014-09-04 15:33:37"

DOM 요소 접근 및 선택

get 메서드

// id가 "content"인 요소를 찾는다.
let content = document.getElementById("content");

// class가 "tag"인 모든 요소를 NodeList 객체로 묶어서 리턴한다.
const tags = document.getElementsByClassName("tag");

// 태그이름을 가지는 요소들을 모두 선택한다.
const lists = document.getElementsByTagName("li");

사용 예제

// DOM Query를 Caching하여 사용하기 (참조저장)
var el = document.getElementById("foo");
el.className = "bar";

// Nodelist 객체에서 요소 선택하기
var elements = document.getElementsByClassName("tag");
if (elements.length >= 1) {
  var firstItem = elements[0];
}

DOM 요소 Query

// CSS 선택자를 이용하여, 일치하는 요소들의 첫번째 요소를 리턴한다.
const TagList = document.querySelector("li.tag");

// CSS 선택자와 일치하는 요소의 NodeList를 리턴한다.
const callouts = document.querySelectorAll('.callout');

노드 탐색 Traversing

let content = document.getElementById("content");

/* Property */
content.parentNode       // 현재 요소노드의 부모 노드
content.previousSibling  // 이전 형제 요소
content.nextSibling      // 다음 형제 요소
content.firstChild       // 현재 요소의 첫번째 자식 노드
content.lastChild        // 현재 요소의 마지막 자식 노드
SHARE