[javaScript] document 객체 제어
document 객체의 메소드를 이용한다.
1. document.getElementsByTagName 태그에 해당되는 객체
<!DOCTYPE html>
<html>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
2. document.getElementsByClassName class 속성의 값을 기준으로 객체를 조회
<!DOCTYPE html>
<html>
<body>
<ul>
<li>A</li>
<li class="active">B</li>
<li class="active">C</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. document.getElementById id 값을 기준으로 객체를 조회
<!DOCTYPE html>
<html>
<body>
<ul>
<li>A</li>
<li id="active">B</li>
<li>C</li>
</ul>
<script>
var li = document.getElementById('active');
li.style.color='red';
</script>
</body>
</html>
4. document.querySelector
<!DOCTYPE html>
<html>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol>
<li>A</li>
<li class="active">B</li>
<li>C</li>
</ol>
<script>
var li = document.querySelector('li');
li.style.color='red';
var li = document.querySelector('.active');
li.style.color='yellow';
</script>
</body>
</html>
5. document.querySelectorAll 모든 객체를 조회
<!DOCTYPE html>
<html>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol>
<li>A</li>
<li class="active">B</li>
<li>C</li>
</ol>
<script>
var lis = document.querySelectorAll('li');
for(var name in lis){
lis[name].style.color = 'red';
}
</script>
</body>
</html>
'웹프로그래밍 > Javascript|JQuery|Jsp' 카테고리의 다른 글
| [JSTL] LIST SIZE 구하기 (0) | 2017.11.10 |
|---|---|
| JSTL null , equal (0) | 2017.10.20 |
| 배열의 값 넣고 필수값 체크 (0) | 2017.10.10 |
| jquery id, name 찾기 (지속적인 업데이트) (0) | 2017.10.10 |
| [JSP] , 콤마로 이어진 값 출력 한칸씩 넘기면서.. (0) | 2017.09.21 |