문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.
document.getElementsByTagName
문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html><body><ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul><script> var lis = document.getElementsByTagName('li'); for(var i=0; i < lis.length; i++){ lis[i].style.color='red'; }</script></body></html> |
만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다. 이러한 원칙은 다른 메소드에도 적용된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html><body><ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul><ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ol><script> var ul = document.getElementsByTagName('ul')[0]; var lis = ul.getElementsByTagName('li'); for(var i=0; lis.length; i++){ lis[i].style.color='red'; }</script></body></html> |
document.getElementsByClassName
class 속성의 값을 기준으로 객체를 조회할수도 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html><body><ul> <li>HTML</li> <li class="active">CSS</li> <li class="active">JavaScript</li></ul><script> var lis = document.getElementsByClassName('active'); for(var i=0; i < lis.length; i++){ lis[i].style.color='red'; }</script></body></html> |
document.getElementById
id 값을 기준으로 객체를 조회한다. 성능면에서 가장 우수하다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html><html><body><ul> <li>HTML</li> <li id="active">CSS</li> <li>JavaScript</li></ul><script> var li = document.getElementById('active'); li.style.color='red';</script></body></html> |
document.querySelector
css 선택자의 문법을 이용해서 객체를 조회할수도 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html><body><ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul><ol> <li>HTML</li> <li class="active">CSS</li> <li>JavaScript</li></ol><script> var li = document.querySelector('li'); li.style.color='red'; var li = document.querySelector('.active'); li.style.color='blue';</script></body></html> |
document.querySelectorAll
querySelector과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html><body><ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul><ol> <li>HTML</li> <li class="active">CSS</li> <li>JavaScript</li></ol><script> var lis = document.querySelectorAll('li'); for(var name in lis){ lis[name].style.color = 'blue'; }</script></body></html> |
