문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.
Last updated
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
let lis = document.getElementsByTagName('li');
for(let i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html><!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>
let ul = document.getElementsByTagName('ul')[0];
let lis = ul.getElementsByTagName('li');
for(let i=0; lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<script>
let lis = document.getElementsByClassName('active');
for(let i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li id="active">CSS</li>
<li>JavaScript</li>
</ul>
<script>
let li = document.getElementById('active');
li.style.color='red';
</script>
</body>
</html><!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>
let li = document.querySelector('li');
li.style.color='red';
let li = document.querySelector('.active');
li.style.color='blue';
</script>
</body>
</html><!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>
let lis = document.querySelectorAll('li');
for(let name in lis){
lis[name].style.color = 'blue';
}
</script>
</body>
</html>