푸린세스

DOM-(1) 제어대상을 찾기. 본문

카테고리 없음

DOM-(1) 제어대상을 찾기.

푸곰주 2023. 5. 12. 10:22

 

document.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>

HTMLCollection
collection[0] - ul객체

 

<!DOCTYPE html>
<html>
<body>
    <script type="text/javascript">
        // body 객체
        console.log(document.getElementsByTagName('body')[0]);
        // 이미지 객체들의 리스트
        console.log(document.getElementsByTagName('body'));
    </script>
</body>
</html>

 

document.getElementsByClassName

js 에서는 className이라고 부른다.

class속성의 값을 기준으로 객체를 조회한다.

 

<!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>

document.getElementById    (ElementsById 가아님 복수형x, 하나만 반환)

html tag속성 중 id

하나의 element만 조회

id 유일무일한 식별자 - 조회한 값은 반드시 하나다.

배열이아님

document.querySelector

css- 선택자

선택자를 인자로 받아서, element 객체를 찾아서 return해주는 메소드

<!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'); //css 선택자 - li 1개만 --> 먼저나타는 것만 1개 return한다.     || querySelectorAll - 유사배열에 담아서
    li.style.color='red';
    var li = document.querySelector('.active'); // .이 붙어있다 * ㅇ떤element이건간에 class="active"인 element를 선택한다.
    li.style.color='blue';
</script>
</body>

 document.querySelectorAll

<!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 lis = document.querySelectorAll('li');
    for(var name in lis){      //for in 구문 ...  {for (var i=0;,)}
        lis[name].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>
    var lis = document.querySelectorAll('li');
    for(var name in lis){      //for in 구문 ...  {for (var i=0;,)}
        lis[name].style.color = 'blue';
    }

    var lis2 = document.querySelectorAll('li');
    for(var i=0; i<lis2.length; i++){
        lis2[i].style.color = 'yellow';
    }
</script>
</body>
</html>

왜 yellow로 안바뀌고 blue만 적용되는것인지??