DOM(Document Object Model)

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

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

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

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

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

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

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

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

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

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

4. tag name으로 접근하기

document.getElementsByTagName("태그명");

---

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

• 1) document.querySelector("#test");
  - 단일 요소를 선택하는 방법
  - 만약 선택된 요소가 여러개면 첫번째 요소만 선택한다.
• 2) document.querySelectorAll("CSS 선택자");
  - 선택된 모든 요소를 얻어와서 배열 형태로 반환
  (각각의 index에 선택된 요소가 하나씩 있음)

---

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

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

문자열.trim() : 문자열 좌우 공백을 제거(중간 공백 제거 X)

---

// 입력된 값을 읽어들여 채팅창에 출력
function readValue() {

    // 채팅과 관련된 요소 모두 얻어오기
    const bg = document.getElementById("chatting-bg");
    const input = document.querySelector("#chattingInput")

    // 채팅이 정상적으로 입력된 경우에만 출력
    if(input.value.trim().length > 0) {
        // 문자열.trim() : 문자열 좌우 공백을 제거(중간 공백 제거 X)
        
        // 채팅창에 입력된 값으로 채팅 추가

        bg.innerHTML += "<p><span>" + input.value + "</span></p>";

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

    } else {
        alert("채팅 내용을 입력해주세요");

        // 입력한 내용 삭제
    }
    input.value = "";

}

// 엔터키가 입력되었을 때
function inputEnter() {
    // 키보드 입력 과정
    // - 키 누름 -> keydown 이벤트 -> input 태그에 입력
    // -> keypress -> (손을떼면) keyup

    // keydown : 모든 키가 눌렸을 때
    // keypress : 영어/숫자/특수문자/띄어쓰기가 눌러지고 있을때
    // -> 꾹 누르고 있을 경우 연속으로 함수가 호출되는 문제발생
    // --> keyup : 1회만 인식
    if(window.event.key == "Enter") {
        readValue();
    }

}