자바스크립트 DOM (JavaScript Document Object Model)

자바스크립트 DOM (JavaScript Document Object Model)

DOM (Document Object Model)

HTML 문서 내의 요소들을 전부 단일 요소로 쪼개주는 개념
<h1 id="abc">Hello</h1>
<h1>(태그), id(속성), abc(속성에 대한 값), Hello(내용, 컨텐츠)
HTML 요소들을 가져다가 JS로 설정하고 싶을 때 사용 : 각각의 단일 요소에 접근해서 사용 가능

1. HTML 요소를 가져오기

문서에 접근 : document.
요소를 가져오기 : getElement
아이디를 통해서 : ByID
클래스를 통해서 : ByClassName[인덱스번호]

2. 가져온 요소에서 컨텐츠만 추출 및 수정하기, HTML 태그 넣기

태그에 손대지 않고 안의 글자만 바꾸고 싶을 때 : innerText
태그까지 포함해서 글자를 바꾸고 싶을 때 : innerHTML

3. class를 이용해 가져왔을 때 해당 class 요소들 전부 가져오기

for문을 이용

※ 문자 포매팅 : `(백틱, tab 위에 있는 키)안에서 변수 사용 $(변수이름)

▶ 연습

<body>

    <h1 id="h1Tag">현재 시각 10:44</h1>
    <p class="num">p태그 1</p>
    <p class="num">p태그 2</p>

    <script>
        // (1) id가 h1Tag인 요소를 가져오기
        let h1Tag = document.getElementById('h1Tag')
        console.log('내가 가져온 요소 :',h1Tag)

        // (2) 내가 가져온 요소에서 컨텐츠만 추출
        console.log(h1Tag.innerText)

        // (3) 내가 가져온 요소의 컨텐츠 수정
        h1Tag.innerText = '<button>현재 시각 11:08</button>'

        // HTML 태그를 인식하는 innerHTML
        h1Tag.innerHTML = '<button>현재 시각 11:10</button>'

        // (1) Class가 num인 요소들을 가져와보자!
        let pTag = document.getElementsByClassName('num')
        console.log('내가 가져온 요소들 : ',pTag[0])
        console.log('내가 가져온 요소들 : ',pTag[1])

        // (1-1) Class가 num인 요소들 전부 가져오기
        for(let i = 0; i<pTag.length; i++){
            console.log('내가 전부 가져온 요소들 : ',pTag[i])
        }

        // (2) 값을 가져와보기 'p태그 2'
        console.log(pTag[1].innerText)

        // (3) 값을 수정해보기
        pTag[1].innerHTML = '<button>p태그 버튼</button>'

    </script>
</body>

▶ 예제

<body>

    <h1 id="ex">예제</h1>
    <p class="menu">오늘 저의 아침은 계란 하나</p>
    <p class="menu">오늘 저의 점심은 김밥 한줄</p>
    <p class="menu">오늘 저의 아침은 라면 한개</p>

    <script>
    
        // 예제 시작
        // (1) '예제' 라는 글자를 '실습'으로 변경
        //      1-1. id가 ex인 요소를 가져와줄 것
        //      1-2. 가져온 요소의 내용을 변경(태그x)
        let ex = document.getElementById('ex')
        ex.innerText = '실습'
        // (2) 오늘 나의 메뉴들을 전부 버튼의 형태로 변경
        //      1-1 class가 menu인 요소들을 가져와 줄 것
        //      1-2 가져온 요소들의 내용을 차례로 변경 (이 때, 태그까지 포함)
        let menu = document.getElementsByClassName('menu')
        for (let i = 0; i<menu.length; i++) {
            menu[i].innerHTML = `<button>${menu[i].innerText}</button>`
        }
        
    </script>
</body>

이벤트 : 특정 요소에 원하는 이벤트 부여하기

1. HTML 태그 안에 직접 작성

하나의 이벤트만 처리 가능, 함수명이 노출 (보안에 취약)

2. 이벤트 핸들러 (eventHandler)

하나의 이벤트만 처리 가능

3. 이벤트 리스너 (eventListener)

다중 이벤트 등록 가능, 코드가 길어짐

4. 이벤트 객체

▶ 연습

<body>
    <h1 id="txt">h1태그 컨텐츠</h1>
    <button onclick="popUp()">직접 작성</button>
    <button id="btn_han">핸들러용 버튼</button>
    <button id="btn_lis">리스너용 버튼</button>
    <button id="btn_event">이벤트 객체용 버튼</button>
    <script>
        // 이벤트 : 특정 요소에 원하는 이벤트를 부여하기
        // eventHandler vs eventListener

        // 1. 이벤트 핸들러
        // 하나의 요소당 하나의 이벤트만 부여 가능

        // 2. 이벤트 리스너
        // 하나의 요소당 여러개의 이벤트 부여 가능

        // 실습 : 버튼들을 클릭 시, id가 txt인 요소의 컨텐츠 값을 팝업창으로 띄우기

        // 실습을 위한 준비물 : 팝업창을 출력하는 함수 정의

        const popUp = ()=>{
            let h1Con = document.getElementById('txt').innerText
            alert('첫번째 팝업:',h1Con)
        }
        const popUp2 = ()=>{
            let h1Con = document.getElementById('txt').innerText
            alert('두번째 팝업:',h1Con)
        }

        // case1. html태그 안에 직접 작성하는 방법
        // 위에서 확인 가능~

        // case2. 이벤트 핸들러
        // 만약 핸들러용 버튼을 클릭했을 때 ~~
        // 단점 : 하나의 이벤트만 처리 가능
        let btn = document.getElementById('btn_han')
        btn.onclick = popUp
        btn.onclick = popUp2

        // case3. 이벤트 리스너
        // 장점 : 다중 이벤트 등록 가능
        // 단점 : 코드가 길어진다
        let btn2 = document.getElementById('btn_lis')
        btn2.addEventListener('click',popUp)
        btn2.addEventListener('click',popUp2)

        // Tip! 이벤트 안에 함수를 직접 등록
        btn2.addEventListener('click',()=>{
            alert('함수 안에 직접 등록')
        })

        // case4. 이벤트 객체 (알아두면 좋아요)
        let btn3 = document.getElementById('btn_event')
        btn3.addEventListener('click',(e)=>{
            console.log('이벤트가 발생하는 주체 :',e.target)
            console.log('주체 안의 내용 :',e.target.innerText)
        })
    </script>
</body>

▶ 실습

좋아요, 싫어요 버튼 만들기

좋아요 버튼을 눌렀을 때, 숫자 1씩 증가

싫어요 버튼을 눌렀을 때, 숫자 1씩 감소 (단, 0밑으로 내려가지 않음)

like, hate 함수를 각각 생성

<body>
    <p>
        👍<span id="number">0</span>
     </p>
     <button id="like">좋아요</button>
     <button id="hate">싫어요</button>

     <script>
        
        // 함수 선언
        const like = ()=>{
            let num = parseInt(document.getElementById('number').innerText)
            num += 1
            number.innerText = num
        }
        const hate = ()=>{
            let num = parseInt(document.getElementById('number').innerText)
            num > 0 ? num -= 1 : num = num
            number.innerText = num
        }

        // 함수 호출
        let btn_like = document.getElementById('like')
        // btn_like.onclick = like
        btn_like.addEventListener('click',like)

        let btn_hate = document.getElementById('hate')
        // btn_hate.onclick = hate
        btn_hate.addEventListener('click',hate)
        
     </script>
</body>
</html>

속성

input 태그 안에 입력값을 가져오는 함수	.value
속성을 가져올 수 있는 함수	.getAttribute('속성이름') .속성이름
속성 값을 바꾸는 함수	.setAttribute('속성이름', '바꿀값') .속성이름 = '바꿀값'

▶ 연습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="input_txt">
    <img
    src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQQg4IpaaCH0NEYpa_Ex4kdRMsr7xvdf1F-lQn-E2HrxcXPnM-w"
    id="img1"
    width="200px"
    > 
    <button onclick="input_val()">인풋태그 값</button>
    <button onclick="img_val()">이미지 값 불러오기</button>
    <button onclick="img_val_change()">이미지 값 수정</button>

    <script>
        const input_val = ()=>{
            // input 태그 내에 내가 입력한 값을 가져오는 함수
            let inputTag = document.getElementById('input_txt')
            console.log(inputTag.innerText) 
            // innerText로는 값을 가지고 오지 못한다.
            // 왜? input은 컨텐츠가 없다
            console.log(inputTag.value)
            // 사용자가 input태그 안에 입력한 글자를 가져오려면
            // document.getElementById('input_txt').value를 사용해야 한다.

        }
        const img_val = ()=>{
            // 현재 img1의 속성 값을 출력하는 함수
            // src 뿐만 아니라 모든 속성들을 전부 가져올 수 있다.
            let imgTag = document.getElementById('img1')
            // Case 1 : getAttribute('속성이름')
            console.log('Case 1 : ',imgTag.getAttribute('src'))
            
            // Case 2 : .속성이름
            console.log('Case 2 : ',imgTag.src)
        }
        const img_val_change = ()=>{
            // img태그의 속성값을 변경

            // Case 1: setAttribute('속성이름','바꿀값')
            let imgTag = document.getElementById('img1')
            // imgTag.setAttribute('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR7svaeqyvRwo6JnIrJomZHDGEYnN8CAWgPHacLhg9LTSmdZvo')
            imgTag.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR7svaeqyvRwo6JnIrJomZHDGEYnN8CAWgPHacLhg9LTSmdZvo'

        }
    </script>
</body>
</html>

▶ 연습

사진을 두 장 구하기

조건에 맞게 사진을 배치

만약 버튼을 누른다면 input 태그 내의 내용을 가지고 오기

그 값에 따라 조건문 만들기

ex) 아이유 -> 아이유 사진, 수지 -> 수지 사진

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">
    <button id="btn">변경!</button>
    <img id="img1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQQg4IpaaCH0NEYpa_Ex4kdRMsr7xvdf1F-lQn-E2HrxcXPnM-w" id="img1" />

    <script>
        // Step1. 사진을 두장 구한다 
        // 기본 조건 / 조건 1 

        // Step2. 조건에 맞게 사진을 배치 
        // 2-1) 내가 만약 버튼을 누른다면
        // 2-2) input 태그 내의 내용을 가지고 온다 
        // 2-3) 그 값에 따라 조건문 
        //      ex) 아이유 -> 아이유 사진
        //      ex) 수지 -> 수지 사진
        document.getElementById('btn').addEventListener('click',()=>{
            let name = document.getElementById('name').value
            console.log(name)
            if (name == '123') {
                document.getElementById('img1').src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQQg4IpaaCH0NEYpa_Ex4kdRMsr7xvdf1F-lQn-E2HrxcXPnM-w'
            } else if (name == '456') {
                document.getElementById('img1').src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR7svaeqyvRwo6JnIrJomZHDGEYnN8CAWgPHacLhg9LTSmdZvo'
            }
        }) 
    </script>
</body>
</html>

저작자표시 비영리 변경금지

'HTML CSS JS' 카테고리의 다른 글

자바스크립트 비동기 통신 기본 (JavaScript Asynchronous communication) (0)	2023.01.21
자바스크립트 jQuery 기본 문법 (JavaScript jQuery) (0)	2023.01.20
자바스크립트 객체 (JavaScript Object) (0)	2023.01.15
자바스크립트 함수 (JavaScript Function) (0)	2023.01.14
자바스크립트 배열 (JavaScript Array) (1)	2023.01.14