[daily study] DOM_제어대상 찾기

28769 단어 JavaScriptJavaScript

*본 글은 생활코딩 강의를 듣고 복습을 목적으로 작성되었습니다.

1. document.getElementsByTagName()


👉 대충 필기로 풀이해 보았는데 말로 설명하자면 TagName을 통해 여러개의 Element(tag)를 get(가져오라고)한다. 라고 보면 될 것 같다.

🔵 li의 이름을 가진 엘리먼트를 모두 불러올 때.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='blue';   
    }
</script>
</body>
</html>

👉 위의 코드는 html에 있는 li태그를 모두 가져와 글자색을 파란색으로 바꾼다.



🔵 문서중 맨위에 있는 ul의 li태그들을 가져올 때.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javscript</li>
    </ul>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javscript</li>
    </ol>
    
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        var lis = ul.getElementsByTagName('li');
        for(var i = 0; i < lis.length; i++){
            lis[i].style.color = 'blue';
        }
    </script>
</body>
</html>

👉 위의 코드는 html문서중 제일 첫번째에 위치한 ul태그의 li엘리먼트들을 불러와 글자색을 파란색으로 바꾼다.





2. document.getElementsByClassName()

🔵 문서중 active라는 이름을 가진 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='blue';   
    }
</script>
</body>
</html>

👉 active라는 이름을 가진 엘리먼트들을 불러와 글자를 파란색으로 바꾼다.




3. document.getElementById()

👏 id는 중복될 수 없기 때문에 Elements가 아닌 Element이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li id="active">CSS</li>
        <li>Javscript</li>
    </ul>
    <script>
        var lis = document.getElementById('active');
        lis.style.color = 'blue';
    </script>
</body>
</html>

👉 active라는 이름을 가진 id를 조회해서 글자의 컬러를 파란색으로 변경시켜준다. 성능면에서 가장 우수하다고 한다. 그래서 많이 쓰는듯.




4. document.querySelector()


🌹 하나의 객체만을 선택하며 같은 이름을 가진 객체가 여러개일 때 제일 첫번째 객체를 출력한다.

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

👉 querySelertor에서 li를 조회하면 li중 하나만 출력되는데 제일 첫번째 li가 선택되어 출력된다.

👉 querySelertor에서 .active를 조회하면 active라는 이름을 가진 class중 첫번째가 출력된다.




5. 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){
        lis[name].style.color = 'blue';
    }
</script>
</body>
</html>

👉 모든 li를 선택하여 글자를 파란색으로 변경한다.







*본 글은 생활코딩의 제어 대상을 찾기 페이지에서 이론적인 부분을 가져왔음을 밝힙니다.
출처 : https://opentutorials.org/course/1375/6656

Chapter 02. 변수와 자료형(2)
ES8 문법 - Async / Await

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage