DOM(Document Object Model)

웹 문서(HTML)의 모든 요소를 객체 형식으로 표현하는 방법
        -> 문서 내 특정 요소에 접근하는 방법을 제공

DOM을 이용한 요소 접근 방법(얻어오는 방법)

1. id 속성 값으로 접근하기
            document.getElementeById("id속성값");

            <!-- class, name, 태그명 등 
                여러 요소가 같은 값을 가질 수 있으므로
                접귾할 때, 복수를 뜻하는 s를 붙여야한다
                (Elements)
                여러 요소를 접근해서 얻어오기 때문에
                반환 값은 배열의 형태를 띈다.
             -->

            
        2. class 속성 값으로 접근하기
            document.getElementsByClassName("class속성값");

        3. name 속성 값으로 접근하기
            document.getElementsByName("name 속성값");

        4. tag name으로 접근하기
             document.getElementsTagName("태그명");

        5. CSS 선택자를 이용해서 접근하기
            1) documnet.querySelector("#test(id인 경우)");
                - 단일 요소를 선택하는 방법
                - 만약에 선택된 요소가 여러 개이면 첫 번쨰 요소만 가져온다.
        
            2) document.querySelectorAll("CSS 선택자");
                - 선택된 모든 요소를 얻어와서 배열 형태로 반환
                    각각의 index에 선택된 요소가 하나씩 있음

id로 접근해보기

<h3>id로 접근하기</h3>

        <button onclick="fnTest1()">클릭할 때 마다 배경색 변경</button>

        <div id="div1" class="area"></div>

자바스크립트 external 작성

function fnTest1(){
    // id가 "div1" 인 요소를 얻어와서 상수형 변수  div1에 저장
    const fnTest = document.getElementById("div1");

    // 접근한 요소의 / 배경색을 얻어와 변수에 저장

    const bgColor = fnTest.style.backgroundColor;

    // 빨간 <-> 노란색

    if(bgColor =='red'){
        div1.style.backgroundColor='yellow';
    }else{
        div1.style.backgroundColor='red';
    }
}

class로 접근해보기

<h3>class로 접근하기</h3>
        
        <div class="area div2"></div>
        <div class="area div2"></div>
        <div class="area div2"></div>

        <button onclick="fnTest2()">배경색 변경하기</button>

자바스크립트 external 작성
function fnTest2(){

    // 요소 여러개를 한 번에 접근하는 경우 배열로 반환

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


    arr[0].style.backgroundColor="green";
    arr[1].style.backgroundColor="yellow";
    arr[2].style.backgroundColor="red";
    // Java와 for문 형식 같음
    for(let i = 0; i <arr.length; i++){
        arr[i].innerText = i + "번째 요소입니다.";
    }
}

태그명으로 접근하기

<h3>태그명으로 접근하기</h3>

        <ul>
            <li>20</li>
            <li>80</li>
            <li>140</li>
            <li>200</li>
            <li>255</li>
        </ul>

        <button onclick="fnTest3()">배경색 변경하기</button>

자바스크립트 external로 작성

function fnTest3(){
    // 문서 내에 존재하는 모든 li요소를 얻어와 배열 형식으로 변환

    const arr = document.getElementsByTagName("li");

    for(let i =0; i < arr.length; i++){
        arr[i].style.backgroundColor = "rgb(100," + arr[i].innerText + ",130)";
    }
}

input 태그 값 얻어오기

<h1 style="color :red;">input 태그의 값(value) 얻어오기 / 변경하기</h1>

        <input type="text" id="inputTest">
        <button onclick="fnTest4()">입력</button>

자바스크립트 external로 작성


function fnTest4(){
    // input 요소 접근하기

    const input = document.getElementById("inputTest");

    // input 관련 태그에 작성된 값을 나타내는 속성 == value

    // input 요소에 작성된 값을 얻어와 alert 창으로 출력하기

    alert(input.value);


    // input 요소에 ""(빈 문자열) 대입 == 값을 삭제
    input.value = "";
}

name 속성으로 접근

<table>
            <tr>

                <td>
                    <label>
                        <input type="checkbox" name="hobby" value="게임">게임
                    </label>
                </td>

                <td>
                    <label>
                        <input type="checkbox" name="hobby" value="음악감상">음악감상
                    </label>
                </td>

                <td>
                    <label>
                        <input type="checkbox" name="hobby" value="영화감상">영화감상
                    </label>
                </td>

            </tr>


            <tr>
                
                <td>
                    <label>
                        <input type="checkbox" name="hobby" value="운동">운동
                    </label>
                </td>

                <td>
                    <label>
                        <input type="checkbox" name="hobby" value="독서">독서
                    </label>
                </td>

                <td>
                    <label>
                        <input type="checkbox" name="hobby" value="코딩">코딩
                    </label>
                </td>

            </tr>
        </table>

        <button onclick="fnTest5()">선택 완료</button>

        <div id="result5" class="area"></div>

자바스크립트 external로 작성

function fnTest5(){


    // name 속성값이 "hobby" 인 요소를 모두 얻어와 배열 형식으로 반환
    const hobby = document.getElementsByName("hobby");

    // console.log(hobby);

    let str = "";// 체크 된 체크박스의 값을 누적할 변수 선언

    let count = 0;// 누적할 체크 갯수 카운트

    for(let i = 0; i < hobby.length; i++){
        
        // .checked 속성
        // 해당 요소가 체크되어있다면 true / 아니면 false
        // checkobx, radio 전용 속성

        if(hobby[i].checked){
            str += hobby[i].value + " ";
            count ++;
        }
    }

    const result5 = document.getElementById("result5");

    if(str != ""){ // 체크가 된 경우
        result5.innerText = str;
        result5.innerHTML += " <br></br> 선택된 개수 : " + count;

    }else{
        result5.innerText = "선택된 취미가 없습니다.";
    }

}

css 선택자로 접근

<h3>CSS 선택자로 접근하기</h3>


        <div id="cssTest">
            <div class="area">test1</div>
            <div class="area">test2</div>
        </div>

        <button onclick="fnTest6()">버어튼</button>

자바스크립트 external로 작성

function fnTest6(){
    
    document.querySelector("#cssTest").style.border = "3px solid green";

    document.querySelector("#cssTest > div").style.backgroundColor = "gold";


    // 배열 형식 반한
    const arr = document.querySelectorAll("#cssTest > div");

    for(let i = 0; i < arr.length; i++){
        arr[i].style.fontSize ="30px";
    }
}