- TagName으로 객체찾기 (태그로 객체찾기)
- ClassName으로 객체찾기 (클래스로 객체찾기)
- id로 객체찾기
- querySelector로 객체찾기
1. TagName으로 객체찾기
var 변수 = document.getElementsByTagName('태그 명');
예시
<!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>- li라는 태그명을 document에서 찾아 lis라는 배열로 저장 (getElementsByTagName은 리스트로 반환)
- 0번째 (HTML), 1번째 (CSS), 2번째 (JavaScript)를 반복하면서 빨간색으로 바꿔준다.
<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>- 이렇게 특정 ul을 접근해서 찾는 방법도 있다.
2. ClassName으로 객체찾기
var 변수명 = document.getElementsByClassName('클래스 name');
예시
<!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>
3. id로 객체찾기
var 변수명 = 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>
3. QuerySelector로 객체찾기
var li = document.querySelector('li');
var lis = document.querySelectorAll('li');
var li = document.querySelector('.active');- li로 시작하는 첫 번째 요소
- li로 시작하는 모든 요소
- active를 포함하는 모든 요소
반복문 사용
<script>
var lis = document.querySelectorAll('li');
for(var name in lis){
lis[name].style.color = 'blue';
}
</script>
'Web Development > JavaScript' 카테고리의 다른 글
| 6. JQuery 사용해서 문서 내 특정 요소로 객체 찾기(JavaScript) (0) | 2022.09.06 |
|---|---|
| 4. 버튼을 누르면 새창 만들기(창 제어하기) (JavaScript) (0) | 2022.09.05 |
| 3. JavaScript에서 경고창(alert), 선택창(confirm), 검색창(prompt) 만들기 (2) | 2022.09.05 |
| 2. HTML에서 JavaScript 로드하고 경고창 만들기 (0) | 2022.09.05 |
| 1. JavaScript 실습을 위한 Sublime Text 설치하기 (0) | 2022.09.05 |