[javaScript] document 객체로 제어
[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>