[세번째] JavaScript - Web Browser / DOM

Document Of Model

DOM

(1) 제어대상을 찾기

document : 문서 전체를 의미하는 객체

1. document.getElementsByTagName 메소드 사용

유사배열을 가져온다.

var lis = document.getElementsByTagName('li');

for(var i=0; i < lis.length; i++)

이 방법으로.

ul에해당하는 객체에만 스타일을 적용하고 싶다.

-> ul객체를 찾으면 된다.(document로 하는게 아닌)

2. class 적용하여 개체찾기

document.getElementsByClassName

인자로 전달된 값에 해당하는 클래스에 속해있는 개체를 찾아서 유사배열에 담는다.

3.ID적용하여 개체찾기

 var li = document.getElementById

특징은 Element 가 복수가 아니다.

성능면에서 가장 우수하다.

성능이 좋다는 건 무엇을 의미하는가?

여러 가지 엘리먼트가 아니므로 배열이 아니다. 따라서 반복문이 필요없다.

4. document.querySelector(선택자)

선택자에 해당하는 엘리먼트 하나만 가져온다.

li에 해당하는 엘러먼트 하나를 가져오게 된다.

즉 가장 먼저 나타나는 것 하나만 가져온다.

.active ?

-> class가 active인 것을 선택하는 선택자

이것 또한 가장 먼저 나타나는 것 하나만 가져온다?

5. document.querySelectorAll

모든 것을 유사배열로 가져온다.

정리

웹페이지를 제어하기 위해 가장 먼저 해야하는 것이 객체를 찾는 것이다!

여러개의 엘리먼트를 가져오는 경우에는 유사배열의 형태로 가져오기 때문에 반복문을 핸들링해야한다.

하나의 엘리먼트를 가져오는 경우 바로 적용해주면 된다.

(ID는 고유의 값이므로 하나일 수 밖에 없다/ 선택자는 ALL이 아니면 가장 먼저 등장하는 하나만 가져온다.)

생활코딩 이고잉님 감사합니다^^

-..-