DOM

getElementsByTagName

인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList 라는 유사 배열에 담아서 반환한다.

 

getElementsByClassName

class 속성의 값을 기준으로 객체를 조회할 수 있다.

 

getElementById

id 값을 기준으로 객체를 조회한다. 성능면에서 가장 우수하다.

 

querySelector

조건 중에서 하나만 지정한다. 모든 객체를 조회한다면 querySelectorAll 을 사용한다.

querySelector('li') : 태그가 li 인 것들을 고른다.

querySelector('.active') : "." 이 앞에 붙어있다면 class 의 속성값이라는 것을 의미한다. class 속성이 'active' 인 것을 고른다.

 

jQuery

자주 사용하는 로직을 재사용할 수 있도록 고안된 라이브러리이다. DOM 을 내부에 감추고 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. 

jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. 로드하는 url은 다음과 같다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

$('body') 는 태그가 body인 것들을 고른 객체이다. prepend(data) 는 body의 앞쪽에다가 안의 내용 data를 주입한다.

 

jQuery 기본문법

$() : 인자로 CSS selector를 전달하면 jQuery 객체를 return 한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다.

 

HTMLElement, HTMLCollection

조회한 객체가 하나인 경우, HTMLElement, 복수인 경우 HTMLCollection이다.

 

DOM Tree

element의 종류에 따라서 객체명이 조금씩 다르다. 그러나, 모든 element는 HTMLElement를 상속받는다.(자식이다) HTMLElement는 Element의 자식이고, Element는 Node의 자식이다. 이러한 관계를 DOM Tree 라고 한다.