요소 접근 방법 ( DOM, document.get~. document.querySelector~ )

• DOM(Document Object Model)
  - 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것
     → 문서 내 특정 요소에 접근하는 방법을 제공
  
  
• DOM을 이용한 HTML 요소 접근하기 (해당 요소객체 가져오기)
  1) id로 접근하기 : document.getElementById("id속성값");
  2) name으로 접근하기 : document.get.ElementsByName("name속성값");
  3) class로 접근하기 : document.getElementsByClassName("class속성값");
  4) tag로 접근하기 : document.getElementsByTagName("태그명");
  5) CSS 선택자로 접근하기 
     5-1) document.querySelector("CSS 선택자");
      → 선택된 요소가 여러 개일 경우 첫 번째 요소만 접근하기
     5-2) document.querySelectorAll("CSS 선택자");
      → 선택된 요소 모두 접근

---

• id로 접근하기

.area{
  width: 300px;
  height: 100px;
  border: 1px solid black;
}

<div id="div1" class="area"></div>
<button onclick="accessId()">클릭 시 배경색 변경</button>

// id로 접근하기
function accessId(){
    const div1 = document.getElementById('div1');

    // 접근한 요소의 배경색 얻어오기
    const bgColor = div1.style.backgroundColor;
    
    if(bgColor == "red"){ /* 자바스크립트는 문자열 비교 시 비교 연산자 사용 */
        div1.style.backgroundColor = 'orange'; // div의 배경색을 orange로 변경
    } else{
        div1.style.backgroundColor = 'red';
    }
}

See the Pen 24-12-25 js review13 by Namu (@Namu-the-sans) on CodePen.

---

• class로 접근하기

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

<button onclick="accessClass()">배경색 변경</button>

// class로 접근하기
function accessClass(){
    
    // 요소를 여러 개 접근하는 경우 [배열] 형태로 반환됨
    const arr = document.getElementsByClassName('div2');

    // 인덱스를 이용해서 요소 하나씩 접근
    arr[0].style.backgroundColor = 'tomato';
    arr[0].innerText = '첫 번째 요소';

    arr[1].style.backgroundColor = 'purple';
    arr[1].innerHTML = '두 번째 요소';

    arr[2].style.backgroundColor = 'pink';
    arr[2].innerText = '세 번째 요소';
}

See the Pen 24-12-25 js review14 by Namu (@Namu-the-sans) on CodePen.

---

• 태그명으로 접근하기

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<button onclick="accessTagName()">배경색 변경</button>

// 태그명으로 접근하기
function accessTagName(){
    // 문서 내 모든 li 태그 얻어오기(배열)
    const arr = document.getElementsByTagName("li");

    // 반복문(Java랑 비슷)
    for(let i=0; i<arr.length; i++){

        const num = arr[i].innerText; // 요소에 작성된 내용(숫자) 얻어오기

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

See the Pen 24-12-25 js review15 by Namu (@Namu-the-sans) on CodePen.

---

• input 태그의 값(value) 얻어오기 / 변경하기

<input type="text" id="input-test">

<button onclick="inputTest()">입력</button>

// input 태그의 값(value) 얻어오기 / 변경하기
function inputTest(){
    const input = document.getElementById('input-test');
    
    console.log(input.value);

    /* innerText / innerHTML은
       요소의 내용(시작태그, 종료태그 사이에 작성된 내용)을
       얻어오거나, 변경할 때만 사용 가능
       
       ★★ input은 [value]를 이용해서 값을 얻어오거나, 
            변경할 수 있음
    */

    // input에 작성된 값 변경하기
    input.value = ''; // 빈 문자열 == value 지우기

    // input에 초점 맞추기 -> focus
    input.focus();
}

See the Pen 24-12-25 js review16 by Namu (@Namu-the-sans) on CodePen.

---

• name으로 접근하기

<table>
   <tr>
      <td>
         <input type="checkbox" name="hobby" id="game" value="게임">
         <label for="game">게임</label>
     </td>
     <td>
         <input type="checkbox" name="hobby" id="music" value="음악감상">
         <label for="music">음악감상</label>
     </td>
      <td>
         <input type="checkbox" name="hobby" id="movie" value="영화감상">
         <label for="movie">영화감상</label>
     </td>
   </tr>
   <tr>
      <td>
         <input type="checkbox" name="hobby" id="coding" value="코딩">
         <label for="coding">코딩</label>
      </td>
      <td>
         <input type="checkbox" name="hobby" id="exercise" value="운동">
         <label for="exercise">운동</label>
      </td>
      <td>
         <input type="checkbox" name="hobby" id="book" value="독서">
         <label for="book">독서</label>
      </td>
   </tr>
</table>

<div class="area" id="name-div"></div>

<button onclick="accessName()">출력하기</button>

// name으로 접근하기
function accessName(){
    const hobbyList = document.getElementsByName('hobby');

    let str = "";

    let count=0;

    for(let i=0; i<hobbyList.length; i++){

        /* checkbox/radio 전용 속성 */
        // .checked : 해당 요소가 체크되어 있으면 true,
        //            아니면 false 반환

        if(hobbyList[i].checked){ // 현재 요소가 체크되어 있으면
            
            // str 변수에 value 누적
            str += hobbyList[i].value + " ";

            count++;
        }
    }
    // #name-div에 출력
    document.getElementById('name-div').innerHTML = str;

    document.getElementById('name-div').innerHTML += "<br>선택된 개수 : " + count;
}

See the Pen 24-12-25 js review17 by Namu (@Namu-the-sans) on CodePen.

---

• CSS 선택자로 접근하기

<div id="css-div">
   <div class="area">test1</div>
   <div class="area">test2</div>
</div>

<button onclick="accessCss()">확인하기</button>

// CSS 선택자로 접근하기
function accessCss(){

    // querySelector() : 요소 1개 선택 시 사용
    //                   (여러 요소가 선택되면 첫 번째 요소만 선택)

    // 1개만 있는 요소 선택
    document.querySelector('#css-div').style.border="2px solid red";

    // 여러 개 있는 요소 선택(첫 번째 요소 선택 확인)
    document.querySelector('#css-div>.area').style.fontSize = "24px";

    // querySelectorAll() : 모든 요소 선택 시 사용
    const arr = document.querySelectorAll('#css-div>.area');

    // 배경색을 원하는 색상으로 변경 (개별 인덱스)
    arr[0].style.backgroundColor = "#7F00FF";
    arr[1].style.backgroundColor = "blue";

    /* for(let i=0; i<arr.length; i++){ (배열 전체)
        arr[i].style.backgroundColor = "gray";
    } */
}

See the Pen 24-12-25 js review18 by Namu (@Namu-the-sans) on CodePen.

---

• [ 응용 ] 채팅창 만들기
  
  
• HTML

<div id="chatting-bg"> <!-- 채팅창 -->
   <p><span>채팅 내용</span></p> <!-- 채팅내용 형식 -->
</div>

<!-- onkeydown : 키가 눌러졌을 때 -->
<!-- onkeypress : 키가 눌러지고 있을 때 -->
<!-- 쭉 누르고 있을 경우 무분별한 함수 호출이 발생 -->

<!-- onkeyup : 키가 올라왔을 때 -->
<input type="text" id="chatting-input" size="49" onkeyup="inputEnter(event)">

<button onclick="readValue()">전송</button>

• CSS

/* 채팅창 만들기 */
#chatting-bg{
   width: 360px;
   height: 400px;
   border: 1px solid black;
   background-color: rgb(178, 199, 217);
   overflow: auto; /* 스크롤 */
   word-break: break-all; /* 영역 크기에 맞춰서 자동으로 개행 처리 */
}

/* 채팅 내용 */
#chatting-bg span{
   background-color: rgb(254, 234, 51);
   padding: 5px;
   border-radius: 5px;
}

/* 채팅 출력 라인 */
#chatting-bg>p{
   margin: 20px 10px;
   display: flex;
   justify-content: flex-end;
}

• JavaScript

/* 채팅창 만들기 */
function readValue(){
    
    // 채팅 입력에 사용되는 요소 모두 얻어오기
    const input = document.querySelector('#chatting-input'); /* CSS 선택자(아이디)로 접근 */

    const bg = document.getElementById('chatting-bg'); /* 아이디로 접근 */

    // input에 입력된 값이 있을 경우
    if(input.value.trim() != ''){

        // 문자열.trim() : 문자열 양 끝에 공백을 모두 제거
        // ex) "    k     h      ".trim() -> "k     h"

        // input 에 입력된 값을 얻어와 bg에 추가(누적)
        bg.innerHTML += "<p><span>"+ input.value + "</span></p>";

        // bg 스크롤을 제일 밑으로 내리기
        // 요소.scrollTop        : 요소 내부 현재 스크롤 위치 반환
        // 요소.scrollTop = 위치 : 스크롤을 특정 위치로 이동
        // 요소.scrollHeight     : 스크롤 전체 높이

        // -> bg의 스크롤을 제일 밑으로 내리기
        bg.scrollTop = bg.scrollHeight;
    }

    // input에 작성된 값 변경
    input.value ='';

    // input 에 초점 맞추기
    input.focus();
}

/* 채팅창 만들기 + */
// input 태그에 키가 눌러졌을 때 엔터인 경우를 검사하는 함수
function inputEnter(event){

    if(event.key == "Enter"){ // 눌러진 key가 Enter인 경우
        readValue();
    }
}

See the Pen 24-12-25 js review19 by Namu (@Namu-the-sans) on CodePen.