Javascript (자바스크립트) DOM API

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

document.getElementById("id")
document.getElementsByName("name")
document.getElementsByClassName("class")
document.getElementsByTagName("tag")
document.createElement("name")
parentNode.appendChild("node")
element.innerHTML
element.style.left
element.setAttribute
element.getAttribute
element.addEventListener
window.content
window.onload
window.dump
window.scrollTo

참고 : id는 오직 하나여야 하기 때문에 getElementById지만 name, class 태그 등은 여러개가 될 수 있기 때문에 getElementsByName, getElementsByClassName이다.

참고 : jQuery로 셀렉터를 사용할 경우 값을 가져오려면 $('#id').val() 을 사용하지만(jQuery 라이브러리 함수를 사용), 바닐라 자바스크립트를 사용해 DOM API로 셀렉터를 사용할 경우는 document.getElementById('id').value 다.

더 재밌는 것은, jQuery를 사용할 경우 id, class, name 어떤 것을 선택해도 .val()로 값을 가져오지만, DOM API를 사용할 경우, id는 getElementById였지만, class, name은 getElementsByClassName, getElementsByName인 것처럼 배열로 받아버린다... 따라서 id는 .value로 값을 가져오지만, class, name은 [0].value로 값을 가져온다.

i.e.
document.getElementById('country').value
document.getElementsByName('country')[0].value

jQuery	DOM API
$("#country").val()	document.getElementById('country').value
$("[name=country]").val()	document.getElementsByName('country')[0].value

 

developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

DOM 소개

 

Selectors API
element.querySelector
element.querySelectorAll
document.querySelector
document.querySelectorAll
Code snippets for querySelector

developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors

선택자로 DOM 요소 선택하기