| document.getElementsByTagName ("h1") | html상에 태그를 가지고옴 |
| document.getElementsByClassName ("클래스명") | html상에 class를 가지고옴 |
| document.getElementsByIdName ("아이디명") | html상에 id를 가지고옴 |
| document.querySelector(".active, h1, #title") | html상에 첫번째 태그, class, id를 가지고 오며 css표기법으로 사용한다. |
| document.querySelectorAll("li") | html상에 모든 태그, class, id를 가지고 오며 css표기법으로 사용한다. |
getElementsByTagName, getElementsByClassName, getElementsByIdName 는 NodeList라는 유사 배열에 담아서 반환한다.
따라서 아래의 예문처럼 [ ]를 사용하여 index값을 특정해줘야한다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<script>
const lis = document.getElementsByClassName('active');
for(let i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
반응형
'JAVASCRIPT' 카테고리의 다른 글
| JAVASCRIPT ) setInterval / setTimeout (0) | 2024.07.15 |
|---|---|
| JAVASCRIPT ) Element 속성 API (0) | 2024.07.15 |
| JAVASCRIPT ) 자바스크립트로 스타일 주기 (0) | 2024.07.15 |
| JAVASCRIPT ) 숫자판 예제 (0) | 2024.07.10 |
| JAVASCRIPT ) .length (0) | 2024.07.10 |
