3. 요소 접근 방법

DOM(Document Object Model)

웹 문서(html)의 모든 요소를 객체 형식으로 표현하는 방법

  - 문서 내 특정 요소에 접근하는 방법을 여러가지로 제공

 

Dom을 이용한 요소 접근 방법

1. id 속성값

   document.getElementById("id 속성값") 

 

2. class 속성값

  document.getElementByClassName("class 속성값")

 

3. tag 이름

  document.getElementByTagName("tag 이름")

 

4. name 속성값

  document.getElementByName("name 속성값")

 

5. css 선택자

  1) document.querySelector("css 선택자") * #id, .class ..

      : 단일 요소 선택, 선택자가 여러개인 경우 첫 번째 요소만 선택 

  2) document.auerySelectorAll("css선택자")

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

 

---

1. id로 접근하기 

<button onclick="fnTest()">클릭할 때마다 배경색 변경</button>
    <div id="div1" class="area"></div>
    
    * css 생략

function fnTest() {
    const div1 = document.getElementById("div1")
    const bgColor = div1.style.backgroundColor

    if(bgColor == 'skyblue') {
        div1.style.backgroundColor = "pink"
    } else {
        div1.style.backgroundColor = "skyblue"
    }
}

 

 

2. class로 접근하기 

    <button onclick="fnTest2()">클릭하면 색상 변경</button>
    <div class="area div2"></div>
    <div class="area div2"></div>
    <div class="area div2"></div>

let fnTest2 = ()=> {
    const arr = document.getElementsByClassName("div2")
    
    for(let i=0; i < arr.length; i++) {
        arr[i].innerText = `${i}번째 요소입니다.`
    }

    arr[0].style.backgroundColor = "pink"
    arr[1].style.backgroundColor = "skyblue"
    arr[2].style.backgroundColor = "lightyellow"
}

 

 

3. tag 이름으로 접근하기 

    <button onclick="fnTest3()">클릭하면 색상 변경</button>
    <ul>
        <li>20</li>
        <li>80</li>
        <li>140</li>
        <li>200</li>
        <li>255</li>
    </ul>

let fnTest3 = ()=> {
    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)`
    }
}

 

 

4. name 속성으로 접근하기 

<table>
        <tr>
            <td>
                <label>
                    <input type="checkbox" name="hobby" value="게임">&nbsp게임
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox" name="hobby" value="음악감상">&nbsp음악감상
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox" name="hobby" value="영화감상">&nbsp영화감상
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" name="hobby" value="운동">&nbsp운동
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox" name="hobby" value="독서">&nbsp독서
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox" name="hobby" value="그림그리기">&nbsp그림 그리기
                </label>
            </td>
        </tr>
    </table>
    <button onclick="fnTest4()">선택 완료</button>
    <div class="area" id="result5"></div>

let fnTest4 = ()=> {
    const hobbyArr = document.getElementsByName("hobby")

    let str = "" // 체크박스 값 누적할 변수
    let count = 0 // 체크한 개수 세기

    for(let i = 0; i < hobbyArr.length; i++) {
        if(hobbyArr[i].checked == true) { //checked 속성: radio, check 가 체크가 되어있음 true
            str += hobbyArr[i].value + " "
            count++; // 체크된 것이 있을 때마다 체크한 개수가 1씩 증가
        }
    }

    const result5 = document.getElementById("result5")
    if(result5 != "") { //체크된 것이 하나라도 있을 때 
        result5.innerText = str
        result5.innerHTML += `<br><br>선택된 개수: ${count}`
    } else {
        result5.innerHTML = "체크된 것이 없습니다." 
    }
}

 

 

5.  CSS 선택자로 접근하기 

<button onclick="fnTest5()">클릭하면 변경</button>
    <div id="cssTest">
        <div class="area">test1</div>
        <div class="area">test2</div>
    </div>

function fnTest5() {

    document.querySelector("#cssTest > div").style.backgroundColor = "pink" 
    // :first-child 안해줘도 되는 이유: querySelector는 첫번째 요소만 선택해주기 때문

    const arr = document.querySelectorAll("#cssTest > div") 
    for(let i = 0; i < arr.length; i++) {
        console.log(arr[i])
        arr[i].style.fontSize = '30px'
    }
}

 

---

<input> 값(value) 얻어오기/변경하기 * 자주 사용

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

let fnTest6 = ()=> {
    const input = document.getElementById("inputTest")

    alert(input.value) 
    
    input.value = ""
}

---

🥸 응용: 대화 창 만들어보기 

* 클릭 이벤트 

1. onclick: 클릭했을 때 수행

2. keyup: 키가 눌러졌다가 돌아올 때 수행 

3. keydown: 키가 눌러졌을 때 수행(모든 키 가능)

4. keypress: 키가 눌러지고 있을 때 수행(영어, 숫자, 특수문자, 띄어쓰기)

    <input type="text" size="50" id="chatting-input" onkeyup="inputEnter()">
    <button onclick="readValue()">전송</button>

let readValue = ()=> { //input창에 입력된 값을 읽어 채팅창에 출력
    // 채팅과 관련된 요소 모두 얻어오기 
    const bg = document.getElementById("chatting-bg")
    const input = document.querySelector("#chatting-input")

    // 채팅이 정상적(빈 값 no no)으로만 입력된 경우에만 출력 
    // 문자열.trim(): 문자열 좌우공백 제거
    if(input.value.trim().length > 0) { 
        // 채팅창에 입력된 값으로 채팅 추가 
        bg.innerHTML += `<p><span>${input.value}</span></p>`

        //스크롤을 제일 밑으로 내리는 방법. 
        // 요소.scrollTop: 요소 내부 현재 스크롤의 위치 
        // 요소.scrollHeight: 스크롤 전체 높이 
        // 요소.scrollTop = 위치 
        bg.scrollTop = bg.scrollHeight
    }

	// 채팅창 비우기 
    input.value = ""
}
	
    // 엔터키 눌렀을 때 전송되는 기능
    let inputEnter = ()=> {
        if(window.event.key == "Enter") { // 대문자 주의! 
        readValue()
        }
}