(DOM)제어 대상 찾기

 

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 가장 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용하는 것이다. 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. 하나씩 알아보도록 하자.

 

document.getElementsByTagName

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

NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.

 

# document(문서). get(가져온다)Elements(요소들을)ByTagName(태그네임으로)('li')(태그네임이 li인) 그리고 가져온 객체들을 lis로 담게된다. 위의 예제에서 li태그가 3개이므로 NodeList 유사배열로 길이가 3인 lis배열이 만들어지고 for문을 통해 style을 red로 바꿔주고 있다.

 

# 요소를 보면 style이 red로 적용되어있는 것을 확인할 수 있다.

 

# <ul>태그에 있는 <li>태그만 style을 red로 하는 방법이다. 만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다. 이러한 원칙은 다른 메소드에도 적용된다.

 

 

 

---

document.getElementsByClassName

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

 

 

---

document.getElementsById

# id 값을 기준으로 객체를 조회한다. 성능면에서 우수하며, 단일 대상이기 때문에 Elements가 아닌 Element인 것을 알고 넘어가자.! 

 

---

 

document.querySelector(All)

# css 선택자 문법을 이용해서 객체를 조회할 수도 있다. querySelectorAll('li')을 할 경우 getElementsByTagName('li')처럼 유사배열을 리턴한다.