'querySelector'에 해당되는 글 1건

### 문서 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

,