[Javascript] #7. DOM, 이벤트

Jihye·2024년 1월 10일

JavaScript

목록 보기

8/14

DOM(Document Object Model)

HTML 문서 요소의 집합

HTML 문서는 각각의 node, object의 집합으로 문서를 표현한다.
따라서, 각각 node, object에 접근하여 문서 구조/스타일/내용 등을 변경 할 수 있도록 하는 것.

요소 하나하나 부터 전체까지 모두 DOM 이라고 할 수 있다.

Document

웹페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체

Document 요소 선택

document.getElementById(아이디 속성값)
document.getElementsByClassName(클래스 속성값)
document.getElementsByTagName(태그 이름)
document.getElementsByName(name 속성값)
document.querySelector(CSS 선택자)
document.querySelectorAll(CSS 선택자)
document.querySelector("요소 선택자") 문서에서 만나는 제일 첫번째 요소를 반환한다.
document.querySelectorAll("요소 선택자")문서에 존재하는 모든 요소를 찾아주는 메소드로 모든 요소를 가져와서 배열(같은)데이터로 만들어준다.
document.getElementById(“ID이름”)해당 ID를 가지는 요소를 불러오는 메소드

const ids = document.getElementById('kdt11id'); //id
const classes = document.getElementsByClassName('kdt11class'); //class
const names = document.getElementsByName('kdt11name'); //name
const tags = document.getElementsByTagName('body'); //tag

const queryIds = document.querySelector('#kdt11id'); //id
const queryClass = document.querySelector('.box'); //class 모두 선택
const queryClassAll = document.querySelectorAll('.box'); //class모두 선택


console.log(ids);
console.log(queryIds);
console.log(classes);
console.log(queryClass);
console.log(names);
console.log(queryName);
console.log(tags);

요소 다루기

textContent()요소안의 텍스트 가져오거나 수정
innerContent()요소 안의 텍스트를 가져오거나 수정
innerHTML()입력된 문자열을 HTML 형식으로!

한 요소에 대해서 세개가 동시에 적용된다면 셋 중 제일 나중에 있는게 입력된다.

//html text 요소내용 읽고 쓰기
const textId = document.getElementById('text');
console.log(textId);
textId.textContent = 'hi';
textId.innerText = '안녕하세요';
textId.innerHTML = '여기는 <b>첫번째</b> 태그입니다.';
//셋다 같은 효과

class 추가, add()

// classList
textId.classList.add('title');
//가져온 요소의 title class의 css, style을 추가하는것

class 제거, remove()

// remove : 제거
textId.classList.remove('title');
//더해준 css가 없어진다.

class가 있으면 제거 class가 없으면 추가, toggle()

// toggle : class가 있으면 제거, class가 없으면 추가
textId.classList.toggle('title-big');

`innerText`, `textContent` 비교

innerText
1. "랜더링된" 텍스트를 반영 즉, 스타일링이 적용된 후 텍스트 반환
2. 성능이 textContent 보다 느릴 수 있다.

textContent
1. 요소 전체의 텍스트 컨텐트를 가져온다. 즉, css 스타일에 관계없이 모든 텍스트 반환
2. 랜더링된 텍스트를 계산하지 않기 때문에 성능면에서 innerText에 비해서 빠르다.

Dynamic, Static

getElementByClassName은 동적이다.
이 의미는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="exam">1</div>
        <div class="exam">2</div>
        <div class="exam">3</div>
        <div class="exam">4</div>
        <div class="exam">5</div>
        <script>
            const exam = document.getElementsByClassName('exam');
            console.log(exam); //배열 형태인 http collection
            for (let i = 1; i < exam.length; i += 2) {
                exam[i].parentNode.removeChild(exam[i]);
            }
            console.log(exam);
            //
        </script>
    </body>
</html>

이 코드는 짜있으면 우리 생각에는 2와 4가 없어져야 할 것 같지만 막상 코드를 실행시켜 보면 2 와 5가 지워진 결과를 볼 수 있다.
이는 for문이 반복됨에 따라 실시간으로 배열이 바뀌는 동적인 결과를 갖기 때문이다.

반면 querySelectorAll은 정적이다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="exam">1</div>
        <div class="exam">2</div>
        <div class="exam">3</div>
        <div class="exam">4</div>
        <div class="exam">5</div>
        <script>
            const exam = document.querySelectorAll('.exam');
            console.log(exam); //NodeList
            for (let i = 1; i < exam.length; i += 2) {
                exam[i].parentNode.removeChild(exam[i]);
            }
            console.log(exam);
            //
        </script>
    </body>
</html>

위의 코드의 결과 querySelectorAll은 exam을 NodeList로 받아와 변하지 않는 상태로 for문 안에서 작업을 수행하여 결과로 2와 4가 지워짐을 알 수 있다.

이벤트

node.addEventListener(이벤트, 명령)
선택한 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드

이벤트 종류

click 클릭

.http

<button type="button" id="button">클릭</button>

.js

<script>
           const button = document.getElementById('button');
           button.addEventListener('click', function () {
               alert('click!');
           });
</script>

이때, 한가지 추가사항
preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 한다.

<form>
            <button id="default">클릭</button>
</form>

def.addEventListener('click', function(event2){
                console.log(event2.target)
                event2.preventDefault; // 자동으로 submit되는 것을 방지한다. 
            })

form tag는 자동으로 submit되는데 이를 방지

Mouseover 요소에 커서를 올렸을 때
Mouseout 마우스가 요소를 벗어날 때
Mousedown 마우스 버튼을 누르고 있는 상태
Mouseuo 마우스 버튼을 떼는 순간

Focus 포커스가 갔을 때

Blur 포커스가 벗어나는 순간

keypress 키를 누르는 순간 + 누르는 동안
keydown 키를 누르는 순간에만
keyup 키를 눌렀다가 떼는 순간

load 웹페이지에 필요한 모든 파일의 다운로드가 완료 되었을 때

resize 브라우저 창의 크기가 변경 될 때

scroll 스크롤이 발생할 때

unload 링크를 타고 이동하거나 브라우저를 닫을 때

change 폼필드의 상태가 변경되었을 때

this 그 함수가 속해 있던 객체를 참조하여 '뭔가'를 클릭할 때 불러오는 함수(콜백함수)에서 this는 그 '뭔가'를 의미한다. (JS에서는 자기 자신을 의미한다.)

HTML

<button id="default">클릭2</button>

const def = document.getElementById('default');

 def.addEventListener('click', function (event2) {
                event2.preventDefault(); // 자동으로 submit되는 것을 방지한다.
                console.log(this);
                this.textContent = '클릭함';
            });