### 문서 li 제어하기 getElementsByTagName
<!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>
var ul = document.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
for(var i=0; lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>일단 ul 의 테그를 불러와야 한다
var ul = document.getElementsByTagName('ul');
이렇게 해주고
리스트에 담는다
var lis = ul.get ElementsByTagName('li');
그리고 리스트를 다변형을 한다
그럼 ol 안에 있는 태그는 변화하지 않는다
### 클레스 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>이렇게 class 라는 이름을 주어서 할수도 있다
getElementsByClassName
### 아이디 name 으로 변환하기
<!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>getElementById 를 이용한 변환 방법이다
### 셀렉터로 설정하기
<!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>
var li = document.querySelector('li');
li.style.color='red';
var li = document.querySelector('.active');
li.style.color='blue';
</script>
</body>
</html>이렇게 하면 먼저인 li 가 맨첫번째것만 즉 베열의 [0]에 해당된거만 변경 실행되고 그다음 active 가 실행되니 ol의 CSS 만 파란색이된다
querySelector
quertSelectorAll을 사용하고
for (var name in lis){
list[name].style.color = 'blue';
}
'HTML 참고서 > HTML 생활코딩 Youtube' 카테고리의 다른 글
| 10. JavaScript Element (0) | 2020.04.14 |
|---|---|
| 9. JavaScript jQuery (0) | 2020.04.12 |
| 7. JavaScript 창제어 (0) | 2020.04.12 |
| 6. JavaScript Navigator (0) | 2020.04.12 |
| 5.JavaScript Location (0) | 2020.04.12 |
Or71nH