고래씌

[JavaScript] 3. 요소선택 본문

Front-End/JavaScript

[JavaScript] 3. 요소선택

고래씌 2023. 11. 8. 16:02

1. HTML 요소에 접근하기(해당 요소객체 가져오기)

1) 아이디로 가져오기

 

■ 03_요소선택.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_요소선택</title>
    <link rel="stylesheet" href="resources/css/common.css">
</head>
<body>
    <h1>HTML 요소에 접근하기(해당 요소객체 가져오기)</h1>

    <h3>1) 아이디로 가져오기</h3>

    <div id="area1" class="area"></div>
    <button onclick="accessId();">아이디로 접근</button>


    <script>
        function accessId(){
            // 아이디로 요소에 접근
            // document.getElementById("아이디명") => 이렇게 작성하는 것을 권장
            // document.querySelector("css선택자");
            var area1 = document.querySelector("#area1");

            // window.area1 => area1 이런식으로 접근이 가능함
            console.log(area1);

            area1.innerHTML += "아이디로 접근 성공<br>"


            // 선택된 요소에 스타일 변경
            area1.style.backgroundColor = "pink";
            area1.style.color = 'red';
            area1.style.width = "100px";
            area1.style.height = "300px";
            
        }
    </script>


</body>
</html>

 

■ common.css

.area{
    width:300px;
    height: 100px;
    border: 1px solid red;
}

.small{
    height: 100px;
}

.big{
    height: 200px;
}

 

ⓐ

document.getElementById("아이디명");
document.querySelector("css선택자");  // document.getElementById("아이디명"); 과 같다.

 

=> querySelector는 특정 name이나 id를 제한하지 않고 css선택자를 사용하여 요소를 찾는다.

(#sections) -> sections 아이디를 가진 요소를 찾음

(.section) -> section 클래스명을 가진 요소를 찾음

 

            var area1 = document.querySelector("#area1");

=> id가 area1를 가진 요소를 찾음

 

 

ⓑ

            console.log(area1);

 

 

ⓒ

            area1.innerHTML += "아이디로 접근 성공<br>"

=> 선택된 요소에 속성들에 접근해서 값을 가져온다거나 변경 가능

=> 속성에 접근하고자 한다면 ☞ 선택된 요소. 접근하고자 하는 속성명 제시

=> 어떤 속성이 있는지는 console.dir로 확인

 

 

ⓓ

            area1.style.backgroundColor = "pink";
            area1.style.color = 'red';
            area1.style.width = "100px";
            area1.style.height = "300px";

=> 선택된 요소에 스타일 변경

=> 개발자 도구로 확인 시 인라인 방식으로 스타일 부여가 된 것을 볼 수 있다!

 

 

 

=> 아이디로 접근 클릭 시 인라인 스타일로 변경이 되면서 아이디로 접근 성공 텍스트가 출력된다.

 

 

■ 03_요소선택.html(common.css link 연결)

    <div id="area2" class="area" style="background-color: yellow;"></div>
    <button onclick="accessId2()">클릭마다 색 변경</button>

    <script>
        function accessId2(){

            if(area2.style.backgroundColor == "yellow"){
                area2.style.backgroundColor = "pink";
            }else{
                area2.style.backgroundColor = "yellow";
            }

        }
    </script>

 

 

 

 

 

2) 태그명으로 접근하기

■ 03_요소선택.html(common.css link 연결)

    <h3>2) 태그명으로 접근하기</h3>
    <!-- ul>li{목록$}*5 -->
    <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
        <li>목록5</li>
    </ul>

    <button onclick="accessTagName()">태그명으로 접근</button>

    <script>
        function accessTagName(){
            var list = document.getElementsByTagName("li");
            // => 반환값이 HTMLCollection
            list = document.querySelectorAll("li");
            // => 반환값이 NodeList. 둘다 배열이다.

            console.log(list);
            console.log("배열의 크기? : "+ list.length);
            console.log(list[0]);   // 첫번쨰 요소 객체를 가져옴


            var blueColor = 0;
            
            for(var i=0; i<list.length; i++) {
                list[i].innerHTML = `안녕하세요${i+1}`;

                list[i].style.backgroundColor = `rgb(130, 220, ${blueColor})`;

                blueColor += 50;
            }
        }
    </script>

 

 

ⓐ

 

▶ 태그명으로 요소 접근시
  ① document.getElementsByTagName('태그명')   
     => 선택된 여러개의 요소객체들은 배열에 담겨서 반환(자바스크립트에서의 배열은[]로 표현)

  ② dovument.querySelectorAll('태그명')
     => ① 과 같다

 

var list = document.getElementsByTagName("li");

=> 반환값이 HTMLColletcion

 

 

ⓑ

list = document.querySelectorAll("li");

=> 반환값이 NodeList. 둘다 배열이다.

 

 

 

ⓒ

            console.log(list);
            console.log("배열의 크기? : "+ list.length);
            console.log(list[0]);   // 첫번쨰 요소 객체를 가져옴


            var blueColor = 0;
           
            for(var i=0; i<list.length; i++) {
                list[i].innerHTML = `안녕하세요${i+1}`;

                list[i].style.backgroundColor = `rgb(130, 220, ${blueColor})`;

                blueColor += 50;
            }

 

=> 변수명.length  =>  배열의 개수를 가져옴

 

① console.log(list);

② console.log("배열의 크기? : " + llist.length);

③ console.log(list[0]);

 

 

 

 

3) name 속성값으로 접근하기

 

■ 03_요소선택.html(common.css link 연결) 

    <h3>3) name 속성값으로 접근하기</h3>
    
    <form action="">
        <fieldset>
            <legend>취미</legend>

            <input type="checkbox" name="hobby" value="game" id="hobby1">
            <laberl for="hobby1">게임</laberl>
            <input type="checkbox" name="hobby" value="music" id="hobby2">
            <laberl for="hobby2">음악</laberl>
            <input type="checkbox" name="hobby" value="sing" id="hobby3">
            <laberl for="hobby3">노래</laberl>

            <input type="checkbox" name="hobby" value="read" id="hobby4">
            <laberl for="hobby4">독서</laberl>
            <input type="checkbox" name="hobby" value="movie" id="hobby5">
            <laberl for="hobby5">영화</laberl>
            <input type="checkbox" name="hobby" value="sport" id="hobby6">
            <laberl for="hobby6">운동</laberl>
        </fieldset>
    </form>

    <br>

    <div id="area3" class="area"></div>
    <button onclick="accessName()">name으로 접근</button>

    <script>
        function accessName(){
            // name속성값으로 요소를 가져오기
            // document.getElementsByName("name속성값");  => 선택된 요소들이 배열에 담겨서 반환
            // document.querySelectorAll("[name=속성값]");

            var hobbys = document.getElementsByName("hobby");
            hobbys = document.querySelectorAll("[name=hobby]"); // 위와 똑같다

            console.log(hobbys);

            // 체크한 값들을 저장
            var checkedItems = "";

            for(var i=0; i<hobbys.length; i++) {
                // 현재 반복을 진행중인 checkbox가 선택된 상태인지 아닌지 체크
                if(hobbys[i].checked) checkedItems += hobbys[i].value+"<br>";
            }

            area3.innerHTML = checkedItems;
        }
    </script>

 

ⓐ

    <form action="">
        <fieldset>
            <legend>취미</legend>

            <input type="checkbox" name="hobby" value="game" id="hobby1">
            <laberl for="hobby1">게임</laberl>
            <input type="checkbox" name="hobby" value="music" id="hobby2">
            <laberl for="hobby2">음악</laberl>
            <input type="checkbox" name="hobby" value="sing" id="hobby3">
            <laberl for="hobby3">노래</laberl>

            <input type="checkbox" name="hobby" value="read" id="hobby4">
            <laberl for="hobby4">독서</laberl>
            <input type="checkbox" name="hobby" value="movie" id="hobby5">
            <laberl for="hobby5">영화</laberl>
            <input type="checkbox" name="hobby" value="sport" id="hobby6">
            <laberl for="hobby6">운동</laberl>
        </fieldset>
    </form>

 

 

ⓑ

            var hobbys = document.getElementsByName("hobby");
            hobbys = document.querySelectorAll("[name=hobby]"); // 위와 똑같다

 

document.getElementsByName("name 속성값");  => 선택된 요소들이 배열에 담겨서 반환

document.querySelectorAll("[name=속성값]"); 

 

=> document.querySelectorAll("[name=hobby]");  => name 속성값으로 요소를 가져온다.

 

 

ⓒ

            console.log(hobbys);

 

 

 

ⓓ

            var checkedItems = "";

            for(var i=0; i<hobbys.length; i++) {
                // 현재 반복을 진행중인 checkbox가 선택된 상태인지 아닌지 체크
                if(hobbys[i].checked) checkedItems += hobbys[i].value+"<br>";
            }

            area3.innerHTML = checkedItems;

 

=> hobbys[i].checked   ☞ checkbox가 선택된 상태인지 체크. true면 checkedItems 에 값 추가

 

 

 

4) 클래스명으로 접근하기

■ 03_요소선택.html(common.css link 연결)

    <h3>4)클래스명으로 접근하기</h3>
    <div class="test"></div>
    <p class="test"></p>
    <ul class="test">
        <li></li>
        <li></li>
    </ul>

    <pre class="test test1"></pre>

    <button onclick="accessClass();">class로 접근</button>

    <script>
        function accessClass(){

            var arr = document.getElementsByClassName("test");
            arr = document.querySelectorAll(".test"); // 위와 같음
            // arr = document.querySelectorAll(".test > li"); // 자식을 가져와 쓰고싶다면 > 이용


            console.log(arr);

            // of가 배열 반목문을 돌릴때 사용하는 향상된 반복문
            for(let test of arr){
                console.log(test);
            }
        }
    </script>

 

ⓐ

- class 속성으로 요소를 가져오기
  document.getElementsByClassName("class 속성값")
  document.querySelectorAll('.클래스명')
  document.querySelectorAll("[class=속성값]");

 

            var arr = document.getElementsByClassName("test");
            arr = document.querySelectorAll(".test"); // 위와 같음
            // arr = document.querySelectorAll(".test > li"); // 자식을 가져와 쓰고싶다면 > 이용

 

 

ⓑ

            console.log(arr);
            // of가 배열 반목문을 돌릴때 사용하는 향상된 반복문
            for(let test of arr){
                console.log(test);
            }

 

▶ 향상된 반복문

for(let test of arr) {

~

}

 

 

 

저작자표시 비영리 변경금지

'Front-End > JavaScript' 카테고리의 다른 글

[JavaScript] 체크박스 실습문제  (0) 2023.11.09
[JavaScript] 5. 문자열과 숫자  (0) 2023.11.08
[JavaScript] 4. 변수와 자료형  (0) 2023.11.08
[JavaScript] 2. 데이터 입출력  (0) 2023.11.08
[JavaScript] 1. 개요  (0) 2023.11.07
'Front-End/JavaScript' Related Articles more