DOM element 조작

## body

<img id="img1" src="../P1006/img/logo.jpg" alt="">

    <ul id="u1">
        <li id="x1">하이하이</li>
        <li id="x2" class="text-primary fw-bold">하이하이</li>
        <li>하이하이</li>
        <li>하이하이</li>
        <li>하이하이</li>
    </ul>

    <button onclick="test1()">테스트1</button>
    <button onclick="test2()">테스트2</button>
    <button onclick="test3()">테스트3</button>
    <button onclick="test4()">테스트4</button>
    <button onclick="test5()">테스트5</button>
    <button onclick="test6()">테스트6</button>
    <button onclick="test7()">테스트7</button>
    <button onclick="test8()">테스트8</button>

---

        // 1. 텍스트 변경 : innerText

        function test1(){
            const getX1 = document.getElementById("x1");
            getX1.innerText = "내용변경. 아까 많이 했지이";
        }

 

        // 2. 내용 조작 : innerHTML --> 사용금지!!!!!!!!! 딱, 한case 빼고
        // ★ 초기화 할 때만 사용하도록 합니다아 ★

        function test2(){
            const getX1 = document.getElementById("x1");

            // 2-1. 되긴돼. 하지마.
            // getX1.innerText = "<span style='color: red'>innerText는 전부 글자로 바꾼다아..<span>";
            // getX1.innerHTML = "<span style='color: red'>innerHTML은 html로 변경해줌 -> 색깔이 빨강이됐찌?<span>";


            // 2-2. 초기화하는 경우
            const getU1 = document.getElementById("u1");
            getU1.innerHTML = "";
            // --> u1이 속한 모든걸 삭제해버려.
        }

 

         // 3. 스타일 조작 : style.  --> 잘 사용하지는 않는다! (보통 클래스로 활용하지)

        function test3(){
            const getX1 = document.getElementById("x1");
            getX1.style.color = "orange";
            getX1.style.fontSize = "4em";
        }

 

        // 4. 속성 조작: get/set Attribute
        // 속성??? id, class, onclick, src... 처럼 하늘색인 애들
        // 신경써야 할 것 : element의 형태마다 다루는 방식이 약간씩 다르다.

        // 4-1. setter

        function test4(){
            const getX1 = document.getElementById("x1");

            getX1.setAttribute("id", "7777");
            // 결과 : <li id="7777">하이하이</li>

            getX1.setAttribute("xxxx", "8888");
            // 결과 : <li id="x1" xxxx="8888">하이하이</li> --> 이렇게하면 안되겠군..


            const getImg1 = document.getElementById("img1");
            getImg1.setAttribute("src", "../P1006/img/bottom.png");
            // 결과 : 이러면 이미지 소스가 변경돼서 이미지 자체도 바뀌겠지?
        }

        // 문법 : element.setAttribute("name", "value");

        // element는 속성을 설정하려는 DOM 요소를 나타냅니다.
        // name은 설정하려는 속성의 이름을 나타냅니다.
        // value는 속성에 설정하려는 값이나, 문자열입니다.


        // 4-2. getter : 특정 태그의 속성 '값' 가져오기 (잘 안쓰지)
        //     --> 활용? 값을 특정 태그에 저장하고 가져오고 싶을 때.

       function test5(){
            const getImg1 = document.getElementById("img1");
            const value = getImg1.getAttribute("src");
            alert(value);
        }

 

        // 4-3. 응용1 : 특정 속성 추가

        function test6(){
            const getX1 = document.getElementById("x1");
            getX1.setAttribute("onclick", "someFunc(3, 11)");
        }
        // ---> test6 버튼을 눌러야 test6이 실행되고, 이후에 x1에 해당하는 하이하이를 클릭하면 alert가 뜬다!
        // ---> 버튼 안누르면 메서드 호출 자체가 안되니까 alert X

        function someFunc(v1, v2){
            //... 어떠한 기능을하는 함수가 있다는 가정하에
            alert(v1 + v2);
        }

 

        // 4-4. 응용2 : 특정 속성 추가

        function test7(){
            const getX1 = document.getElementById("x1");
            getX1.setAttribute("class", "fs-1 text-danger");
        }

       

        // 5. Class 조작 ★★★ 
        // --> claassList : list에 추가/삭제를 할 수 있음

        function test8(){
            const getX2 = document.getElementById("x2");

            getX2.classList.add("fs-1", "fs-3");    
            // 한번에 여러개 추가하고싶으면? "" , "" 이렇게. --> 근데 겹치면 뒤에 옵션으로 적용됨
            
            getX2.classList.toggle("text-primary");         
            // toggle : ""이 있으면 유지, 없으면 추가해줌
            // ---> remove랑 위치 왔다갔다해봐. 순서에 영향을 받네?
            
            getX2.classList.remove("text-primary");
        }