JavaScript 요약정리 - HTML 요소에 접근하기(해당 요소 가져오기)

<JavaScript 자바스크립트 요소 가져오기>

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

1) ID로 가져오기(접근하기)
<div id="area1" class="area"></div>
    <button onclick="accessId();">아이디로 접근</button>

    <script>
        function accessId(){
            // 아이디로 요소에 접근할때
            // document.getElementById("아이디명")
            const area1 = document.getElementById("area1");

            console.log(area1);
            console.dir(area1); // 접근가능한 속성들에대해 살펴볼때

            //선택된 요소에 속성들에 접근해서 값을 가져온다거나 변경 가능
            // 속성에 접근하고자 한다면 => 선택된 요소.접근하고자하는 속성명
            area1.innerHTML = "아이디로 접근성공함!!";

            // 선택된 요소에 스타일 변경
            area1.style.backgroundColor = "pink";
            area1.style.color = "red";
            area1.style.width = "100px";       
            area1.style.height = "300px";
            // 인라인방식으로 스타일이 부여된다.
        }
    </script>

2) 태그명으로 접근하기
<ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
        <li>목록5</li>
</ul>

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

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

            const list = document.getElementsByTagName("li"); // [li요소객체, li요소객체,li요소객체,...]

            console.log(list);
            console.log("배열의 크기(선택된 li의 갯수) : "+list.length);

            //list[1].innerHTML = "안녕하세요";

            let blueColor = 50;

            for(let i =0; i<list.length; i++){
                list[i].innerHTML = "안녕하세요"+(i+1);

                list[i].style.backgroundColor = `rgb(130 , 220, ${blueColor})`;
                blueColor += 50;
            }
        }
    </script>

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

        <!-- (input[type=checkbox name=hobby value= id=]+label)*6 -->
        <input type="checkbox" name="hobby" value="game" id="game"><label for="game">게임</label>
        <input type="checkbox" name="hobby" value="music" id="music"><label for="music">음악</label>
        <input type="checkbox" name="hobby" value="hiking" id="hiking"><label for="hiking">등산</label>

        <br>

        <input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">독서</label>
        <input type="checkbox" name="hobby" value="movie" id="movie"><label for="movie">영화</label>
        <input type="checkbox" name="hobby" value="sport" id="sport"><label for="sport">운동</label>

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

    <script>
        function accessName(){
            //name속성값으로 요소를 가져올때 쓰는 방법
            // document.getElementsByName("name속성값");
            // => 선택된 요소객체들이 배열에 담겨서 반환
            const hobby = document.getElementsByName("hobby"); // 길이 6

            let checkboxItem = "";

            for(let i =0; i<hobby.length; i++){
                if(hobby[i].checked){
                    checkboxItem += hobby[i].value +"<br>";
                }
            }
            document.getElementById("area3").innerHTML = checkboxItem;
        }
    </script>

4) 클래스명으로 접근하기
<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(){
            // class속성으로 요소를 가져올때
            // document.getElementsByClassName("class속성값");
            // => 선택한 요소들을 객체배열로 담아서 반환

            const arr = document.getElementsByClassName("test");

            for(let i = 0; i<arr.length; i++){
                console.log(arr[i]);
            }
        }
    </script>