[자바스크립트] DOM 제어 대상 찾기
Dom = Document object model.
웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미
window 객체의 document 프로퍼티를 통해서 사용 가능.
Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미.
문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용
document.getElementsByTagName 사용예시
문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.
document.getElementsByTagName 사용예시
$(document).ready(function(){
var ullis = document.getElementsByTagName('ul')[0];
var lis = ullis.getElementsByTagName('li');
for(var i=0; i<lis.length; i++)
{
lis[i].style.color='red';
}
})
document.getElementsByTagClassName 사용예시
$(document).ready(function(){
var ullis = document.getElementsByTagName('ul')[0];
var lis = ullis.getElementsByTagName('li');
var sls = document.getElementsByClassName('special');
for(var i=0; i<lis.length; i++)
{
lis[i].style.color='red';
}
for(var j =0; j< sls.length; j++)
{
sls[j].style.color='blue';
}
})
document.getElementById 사용예시
id 값을 기준으로 객체를 조회한다. 성능면에서 가장 우수하다.
var sId = document.getElementById('selected');
sId.style.color ='yellow'
