해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: DOM - 제어 대상 찾기
문서를 자바스크립트로 제어하려면,
제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 해야하는 일입니다.
문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용하면 됩니다.
이번 포스팅은 document 객체의 여러가지 메소드를 이용하여
제어 대상을 찾아보는데 중점을 맞춰서 진행해보도록 하겠습니다.
document.getElementsByTagName
문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있습니다.
getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서
그 리스트를 NodeList라는 유사 배열에 담아서 반환합니다.
NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다는 특징을 갖습니다.
예제 코드로 살펴보도록 하겠습니다.
<!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>
위의 코드를 실행한 결과는 아래 그림과 같습니다.
document.getElementsByTagName('li') 를 이용해서, li 태그를 배열 안에 넣고,
이 찾은 태그들의 color 를 red 로 바꿔줬습니다.
만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 됩니다.
이러한 원칙은 다른 메소드에도 적용됩니다.
<!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.getElementsByTagName 를 사용하면 특정 태그를 조회할 수 있게 됩니다.
document.getElementsByClassName
class 속성의 값을 기준으로 객체를 조회할수도 있습니다.
<!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>
클래스 또한 tagName 과 같이 여러 개가 조회될 수 있기 때문에, getElements 의 형태로,
s 가 붙습니다.
document.getElementById
아마 가장 많이 들어보신 것이 아닐까, 생각이 듭니다.
id 값을 기준으로 객체를 조회하고, 다른 메소드들에 비해 성능면에서 가장 우수합니다.
<!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>
id 값은 중복이 안되고, 하나만 가능하기 때문에 getElement 의 형태로,
s 가 붙지 않습니다.
document.querySelector
document.querySelector 를 이용하면 css 선택자의 문법을 이용해서 객체를 조회할 수도 있습니다.
<!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>
querySelector 는 가장 먼저 검색된 것을 대상으로 삼습니다.
document.querySelectorAll
querySelector과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 차이점입니다.
querySelector 는 한개가 조회되면 검색이 끝나고, querySelectorAll 은 모든 객체를 전부 조회합니다.
<!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>
'Archive > Develop' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 기본 문법 | HTMLElement (0) | 2021.02.07 |
|---|---|
| [ JavaScript ] 제어 대상 찾기 - 제이쿼리(jQuery) (0) | 2021.02.07 |
| [ JavaScript ] 자바스크립트 기본 문법 | 창(window) 제어 | 팝업 차단 (0) | 2021.02.07 |
| [ JavaScript ] 자바스크립트 기본 문법 | Navigator 객체 | 크로스 브라우저 이슈 해결 (0) | 2021.02.07 |
| [ JavaScript ] 자바스크립트 기본 문법 | Location 객체 | 자바스크립트 url 이동 (0) | 2021.02.07 |