DOM API에 접근하기

자바스크립트를 써보기도 전에 제이쿼리를 접하고, 제이쿼리 문법이 자바스크립트 문법인 줄 알았던 무지한 과거는 뒤로 한 채,

다시 새롭게 자바스크립트를 공부해 봅시다.

제이쿼리 문법이 간결하고 편하긴 하지만...

요즘은 옛날처럼 제이쿼리로만 모든 걸 해결하는 시대는 막을 내리고 있으니

어떤 플러그인이나 라이브러리가 와도 잘 사용할 수 있도록 바닐라 자바스크립트를 익혀놉시다 :)

DOM 선택 메서드

DOM은 html, xml, svg 문서를 위한 프로그래밍 인터페이스입니다.

문서의 구조화된 표현 양식을 트리 형태로 제공하며, dom은 트리에 대한 접근을 허용하는 메서드를 규정하고, 해당 메서드는 문서의 구조, 양식, 내용을 변경할 수 있습니다.

자바스크립트 언어의 한 부분은 아니지만 웹페이지와 스크립트 혹은 프로그래밍 언어를 결합하는 역할을 합니다.

react 등에서는 dom 선택을 지양하고 있긴 하지만...

1. 태그 이름으로 찾기

var divs = document.getElementsByTagName('div');    <- HTMLCollection으로 나옴.

divs.item(1) // index가 1인 div    <- 원하는 요소가 선택됨

divs[1] // index가 1인 div

2. 아이디명으로 찾기

var boy_el = document.getElementById('boy');

3. 클래스명으로 찾기 ( IE9+ )

var menu = document.getElementsByClassName('menu');

4. 자식 선택자 찾기

<p class="paragraph">

<span>선택해보세용!</span>

</p>

<script>

var paragraphs = document.getElementsByClassName('paragraph');

var span = paragraphs.item(0).getElementsByTagName('span').item(0);

</script>

5. css 선택자로 찾기

var cssSelector = document.querySelector('.info kbd');   // 단수 element_node ( IE8+ css2 선택자로 제한, IE9+ )

var clouds = document.querySelectorAll('.cloud');         // 복수 nodeList

clouds[0]

6. matches() : IE9+ ms prefix 필요

matches polyfill

if (!Element.prototype.matches) {

Element.prototype.matches = Element.prototype.msMatchesSelector;

}

주의사항

querySelector(), querySelectorAll() 메서드로 수집된 집합은 다른 선택 API 메서드와 달리 라이브 상태가 아닙니다.

일종의 수집 상태를 기억하는 스냅샷으로 문서의 변경된 내용이 반영되지 않습니다.

반면 get으로 시작하는 3가지 명령은 라이브 상태이므로 개발자도구에서 실시간으로 돔의 상태를 변경하면 그것을 반영합니다.

==== 

수정 2019.01 내용 합침