라라리라

2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차 본문

코딩/2023 JavaScript DOM

2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차

헤실 2023. 8. 29. 18:47

_0101_id로선택.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementById()</title>
</head>
<body>
   
    <!--
        [개념] document.getElementById("id명") 메서드
            (1) 해당 id의 요소를 선택
            (2) 요소가 존재하지 않는 경우 null을 반환
            (3) id값은 고유해야 하지만, 동일한 id를 가진 요소가 둘 이상 존재하면, 첫 번째 요소를 반환
    -->

    <p id="content">getElementById() 메서드</p>
    <p id="target"></p>

    <script>
        // 태그 선택
        let element = document.getElementById("content");
        console.log(element.innerText);     // getElementById() 메서드

        // 내용 변경
        document.getElementById("target").innerText = "Hello, JavaScript";
        document.getElementById("content").innerText = "Hello, JsDom";
    </script>

</body>
</html>

 

getElementById()

getElementById() 메서드

 

_0102_class로선택.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName()</title>
</head>
<body>

    <!--
        [개념] document.getElementsByClassName("class명") 메서드
            (1) 지정된 class 이름을 가진 모든 요소를 선택해 HTMLCollection을 반환
            (2) HTMLCollection 이란
                    1) 배열과 유사환 HTML 요소 모음
                    2) 인덱스(0부터 시작)로 접근 가능
                    3) length 속성은 요소의 개수 반환
    -->
    <p class="content">getElementsByClassName() 메서드1</p>
    <p class="content">getElementsByClassName() 메서드2</p>

    <script>
        // 태그 선택
        let collection = document.getElementsByClassName("content")[0];
        console.log(collection.innerText);    

        // 내용 변경
        document.getElementsByClassName("content")[1].innerText = "Hello, JavaScript";
    </script>

</body>
</html>

 

getElementsByClassName()

getElementsByClassName() 메서드1

getElementsByClassName() 메서드2

 

_0103_name으로선택.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByName()</title>
</head>
<body>

    <!--
        [개념] document.getElementsByName("name속성값") 메서드
            (1) 해당 name 속성값을 가지는 모든 요소를 선택해 NodeList로 반환
            (2) NodeList 란
                    1) 배열과 같은 노드 모음
                    2) 인덱스(0부터 시작)로 접근 가능
                    3) length 속성은 노드의 수를 반환
    -->

    <h3 id="target">선택 가능한 과목 수 : </h3>

    HTML<input type="checkbox" name="subject" value="html">

    CSS<input type="checkbox" name="subject" value="css">
   
    JavaScript<input type="checkbox" name="subject" value="javascript">

    <script>
        // 태그 선택
        let list = document.getElementsByName("subject");
        let size = list.length;
        console.log(size);
       
        // 내용 변경
        let element = document.getElementById("target");
        let text = element.innerText + size;
        element.innerText = text;
    </script>

</body>
</html>

 

getElementsByName()

선택 가능한 과목 수 :

HTML CSS JavaScript

 

_0104_tag로선택.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByTagName()</title>
</head>
<body>

    <!--
        [개념] document.getElementsByTagName("tag명") 메서드
            (1) 해당 tag 이름을 가지는 모든 요소를 선택해
                HTMLCollection을 반환
    -->
 
    <h3>학습 과목</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <script>
        // 태그 선택
        let element = document.getElementsByTagName("li");
        console.log(element);

        // 배열 : 반복문
        for(let i=0; i<element.length; i++) {
            console.log(element[i].innerText);
        }

        console.log(element[1].innerText);     // CSS

        // 내용 변경
        element[1].innerText = "Cascading Style Sheets";
    </script>

</body>
</html>

 

getElementsByTagName()

학습 과목

  • HTML
  • CSS
  • JavaScript

 

_0105_querySelector로선택.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>querySelector()</title>
</head>
<body>

    <!--
        [개념] document.querySelector("선택자") 메서드
            (1) 해당 CSS 선택자와 일치하는 첫 번째 요소를 반환
            (2) 첫 번째뿐만 아니라 일치하는 모든 항목을 반환하려면 querySelectorAll()을 사용
    -->
 
    <h3 id="main">학습 과목</h3>
    <ul>
        <li class="subject">HTML</li>
        <li class="subject">CSS</li>
        <li class="subject">JavaScript</li>
    </ul>

    <script>
        // tag명으로 선택
        let element = document.querySelector("h3");
        console.log(element.innerText);
       
        // id명으로 선택
        element = document.querySelector("#main");
        console.log(element.innerText);
       
        // class명으로 선택 : 첫 번째 요소를 반환
        element = document.querySelector(".subject");
        console.log(element.innerText);     // HTML

        // 내용 변경
        element.innerText = "Hypertext Markup Language";
    </script>

</body>
</html>

 

querySelector()

학습 과목

  • HTML
  • CSS
  • JavaScript

 

_0106_querySelectorAll로선택.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>querySelectorAll()</title>
</head>
<body>

    <!--
        [개념] document.querySelectorAll("선택자") 메서드
            (1) 해당 CSS 선택자와 일치하는 모든 요소를 NodeList로 반환
    -->
 
    <p class="content">querySelectorAll() 메서드1</p>
    <p class="content">querySelectorAll() 메서드2</p>

    <script>
        // 태그 선택
        let list = document.querySelectorAll("p.content");
       
        for(let i=0; i<list.length; i++) {
            // 텍스트 변경
            list[i].innerText = "텍스트 변경";
        }
    </script>

</body>
</html>

 

querySelectorAll()

querySelectorAll() 메서드1

querySelectorAll() 메서드2

 

 

저작자표시

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차  (0) 2023.08.31
2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차  (0) 2023.08.30
2023.08.28 / Step 1 [DOM_기초문법_기타] - 코딩 40 일차  (0) 2023.08.28
2023.08.27 / Step 1 [DOM_기초문법_문자열] - 코딩 39 일차  (0) 2023.08.27
2023.08.26 / Step 1 [DOM_기초문법_배열] - 코딩 38 일차  (0) 2023.08.26
'코딩/2023 JavaScript DOM' Related Articles more