JS 요소 접근 방법 (DOM)

📝 데이터입출력, 요소접근방법 공부 후 프로젝트 개별공부
#230222

📌DOM(Document Object Model)

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

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

1. id 속성 값으로 접근하기

document.getElementById("id속성값");

💻 class, name, 태그명 등
여러 요소가 같은 값을 가질 수 있으므로
접근 할 때 북수를 뜻하는 s를 붙여야 한다.(Elements)

+ 여러 요소를 접근해서 얻어오기 때문에 반환 값은 배열의 형태를 띈다.

<button onclick="fnTest1()">클릭할 때 마다 배경색 변경</button>
<div id="div1" class="area"></div>
------------------------------------------------------------
function fnTest1() {

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

    // 2. 접근한 요소의 / 배경색을 얻어와 / 변수에 저장
    const bgColor = div1.style.backgroundColor;

    // 빨간 <-> 노란색

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

2. class 속성값으로 접근하기

document.getElementsByClassName("class속성값");

<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>

<button onclick="fnTest2()">배경색 변경하기</button>
-------------------------------------------------------------------------
function fnTest2() {
    // 요소 여러개를 한번에 접근하는 경우 배열 형태로 반환됨(list)
    const arr = document.getElementsByClassName("div2");

    //console.log(arr[0]);
    //console.log(arr[1]);
    //console.log(arr[2]);

    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 + "번째 요소입니다.";
    }

}

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

document.getElementsByName("name 속성값");

💻.checked 속성
해당요소가 체크 되어 있다면 true / 아니면 false
checkbox, radio 전용 속성

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++) {

        
        if(hobby[i].checked) { //체크된 경우}
            str += hobby[1].value + " ";
            count++
        }
    }

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

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

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

4. tag name으로 접근하기

document.getElementsByTagName("태그명");

[예시1] 태그명으로 접근하기
<ul>
    <li>20</li>
    <li>80</li>
    <li>140</li>
    <li>200</li>
    <li>255</li>
</ul>

<button onclick="fnTest3()"> 배경색 변경하기 </button>
-------------------------------------------------------------
function fnTest3() {
    // 문서 내에 존재하는 모든 li요소를 얻어와 배열 형식으로 반환
    const arr = document.getElementsByTagName("li");

    for(let i = 0; i < arr.length;  i++) {
        const num = arr[i].innerText;

        arr[i].style.backgroundColor = "rgb(100," + num + ",130)";
    }
}

[예시2]  nput 태그값(value) 얻어오기/변경하기기
<h1 style="color: red">input 태그의 값(value) 얻어오기 / 변경하기</h1>
    <input type="text" id="inputTest">
    <button onclick="fnTest4()"> 입력 </button>
-----------------------------------------------------------------------
function fnTest4() {
    // input 요소 접근하기
    const input =document.getElementById("inputTest");

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

    // input 요소에 작성된 값을 얻어와 alert 출력
    alert(input.value);

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

5. CSS 선택자를 이용해서 접근하기

1) document.querySelector("#test");

• 단일 요소를 선택하는 방법
• 만약 선택된 요소가 여러개면 첫번째 요소만 선택한다.

2) document.querySelectorAll ("CSS 선택자");

• 선택된 모든 요소를 얻어와서 배열 형태로 반환
  (각각의 index에 선택된 요소가 하나씩 있음)

// CSS 선택자로 접근하기
function fnTest6() {
    document.querySelector("#cssTest").style.border = "3px solid green";
    // id, name, class 같은 경우에는 무슨 값이 들어갈지 명시되어 있는데,
    // queryselector만 보면 뭐가 들어갈지 모르기 때문에 '#'을 써서 알려준다.

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

    const arr = document.querySelectorAll("#cssTest > div");

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

✔️ 기타 이벤트들

• oncellick : 클릭 했을 때 수행
• onkeydown: 키가 눌러졌을 때
• onkeypress: 키가 눌러지고 있을 때
• onkeyup: 키가 올라올 때