본문 바로가기
JavaScript

자바스크립트 문서 객체 조작하기

팽투더이 2022. 11. 8. 12:33
728x90

자바스크립트 문서 객체 조작하기

 

📌 문서객체(document object)

HTML 페이지에 있는 html, head, body, title, h1, div, span 등의 html 요소(element)를 자바스크립트에서는 문서객체라고 부릅니다.

 

📌 DOM

문서객체모델(Document Objects Model)

문서 객체를 조합해서 만든 전체적인 형태

 

문서객체를 조작하는 방법은 복잡하나 요즘에는 jQuery(라이브러리)와 React(프레임워크)를 사용해 문서 조작이 예전보다는 상대적으로 쉬워졌습니다.

📌 DOMContentLoaded 이벤트

HTML 페이지는 코드를 위에서 아래로 차례대로 실행합니다.

body태그가 생성되기 전에 head태그에서 body태그에 무언가를 출력하고자 할 때, 문제가 발생합니다.

그러므로 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트를 콜백함수로 호출해 줍니다.

즉, '이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라'는 의미입니다.

<!DOCTYPE html>
<html>
<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const h1 = (text) => `<h1>${text}</h1>`
            document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
        })
    </script>
</head>
<body>
    <h1>1번째 h1 태그</h1>
    <h1>2번째 h2 태그</h1>
</body>
</html>

코드를 실행하면 script태그가 body태그 이전에 위치해도 문제없이 코드가 실행됩니다.

문서 객체 가져오기

 

📌 querySelector() 메소드

요소를 하나만 추출

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const header = document.querySelector('h1')

            header.textContent = 'HEADERS'
            header.style.color = 'white'
            header.style.backgroundColor = 'black'
            header.style.padding = '10px'
        })
    </script>
</head>
<body>
    <h1></h1>
</body>

 

📌 querySelectorAll() 메소드

문서 객체를 여러 개 추출

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const headers = document.querySelectorAll('h1')

            headers.forEach((header) => {
                header.textContent = 'HEADERS'
                header.style.color = 'white'
                header.style.backgroundColor = 'black'
                header.style.padding = '10px'
            })
        })
    </script>
</head>
<body>
    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>
</body>

글자 조작하기

 

📌 문자객체.textContent

입력된 문자열을 그대로 넣어줍니다.

 

📌 문자객체.innerHTML

입력된 문자열을 HTML형식으로 넣어줍니다.

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const a = document.querySelector('#a')
            const b = document.querySelector('#b')

            a.textContent = '<h1>textContent/h1>'
            b.innerHTML = '<h1>innerHTML 속성</h1>'
        })
    </script>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>

속성 조작하기

 

📌 문서객체.setAttribute(속성이름, 값)

특성 속성에 값을 지정한다.

 

📌 문서객체.getAttribute(속성이름)

특정 속성을 추출한다.

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const rects = document.querySelectorAll('.rect')

            rects.forEach((rect, index) => {
                const width = (index + 1)*100
                const src = `http://placekitten.com/${width}/250`
                rect.setAttribute('src', src)
                // rect.src = src
            })
        })
    </script>
</head>
<body>
    <img class="rect">
    <img class="rect">
    <img class="rect">
    <img class="rect">
</body>

배열 [0,1,2,3]에 1을 더한 뒤 [1,2,3,4] 100을 곱해 각 넓이가 [100,200,300,400]인 고양이 그림을 넣어줍니다.

 

스타일 조작하기

CSS 속성 이름 자바스크립트 style 속성이름
background-color backgroundColor
text-align textAlign
font-size fontSize 
<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const divs = document.querySelectorAll('body > div')

            divs.forEach((div, index) => {
                console.log(div, index)
                const val = index*10
                div.style.height = `10px`
                div.style.backgroundColor = `rgba(${val}, ${val},${val})`
            })
        })
    </script>
</head>
<body>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
</body>

25개의 div태그를 조작해 검은색에서 흰색으로 변화하는 그레이디언트를 만들어 보는 코드

인덱스는 0부터 24까지 반복.

문서 객체 생성하기

 

📌 트리(tree)

문서객체를 만들었다고 해서 문서 객체가 배치되는 것이 아닙니다. 그래서 문서를 어떤 문서 아래에 추가할지 지정해줘야 합니다.

  • 부모(parent) : 어떤 문서 객체가 있을 때 위에 있는 것
  • 자식(child) : 어떤 문서 객체가 있을 때 아래에 있는 것

 

📌 appendChild() 메소드

부모 객체.appendChild(자식 객체)

부모 객체 아래에 자식 객체를 추가할 수 있습니다.

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const header = document.createElement('h1')

            header.textContent = '문서 객체 동적으로 생성하기'
            header.setAttribute('data-custom', '사용자 정의 속성')
            header.style.color = 'white'
            header.style.backgroundColor = 'black'

            document.body.appendChild(header)
        })
    </script>
</head>
<body>
    
</body>

문서 객체 이동하기

 

appendChild()메소드는 문서 객체를 이동할 때도 사용할 수 있습니다.

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            const divA = document.querySelector('#first')
            const divB = document.querySelector('#second')
            const h1 = document.createElement('h1')
            h1.textContent = '이동하는 h1 태그'

            const toFirst = () => {
                divA.appendChild(h1)
                setTimeout(toSecond, 1000)
            }
            const toSecond = () => {
                divB.appendChild(h1)
                setTimeout(toFirst, 1000)
            }          
            toFirst()
        })
    </script>
</head>
<body>
    <div id="first">
        <h1>첫 번째 div 태그 내부</h1>
    </div>
    <hr>
    <div id="second">
        <h1>두 번째 div 태그 내부</h1>
    </div>
</body>

1초 간격으로 h1태그가 위 아래로 이동하는 걸 볼 수 있습니다.

문서 객체 제거하기

 

문서객체.parentNode.removeChild(문서객체)

부모 객체에 접근해서 자식객체 제거

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            setTimeout(() => {
                const h1 = document.querySelector('h1')

                h1.parentNode.removeChild(h1)
            }, 3000)
        })
    </script>
</head>
<body>
    <hr>
    <h1>제거 대상 문서 객체</h1>
    <hr>
</body>

3초 뒤에 <h1>태그 제거

이벤트 설정하기

 

📌 이벤트(event)

문서 객체 생성되거나 마우스를 위에 올리거나 할때 이벤트를 발생해줌.

 

문서객체.addEventListener(이벤트 이름, 콜백 함수)

콜백함수는 이벤트 리스너(event listener) 또는 이벤트 핸들러(event handler)라고 부릅니다.

 

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            let counter = 0
            const h1 = document.querySelector('h1')

            h1.addEventListener('click', (event) => {
                counter++
                h1.textContent = `클릭 횟수: ${counter}`
            })
        })
    </script>
    <style>
        /* h1태그를 마우스로 클릭할때 글자가 선택되는 걸 막기 위함 */
        h1 {
            user-select: none;
        }
    </style>
</head>
<body>
    <h1>클릭횟수: 0</h1>
</body>

이벤트 연결 제거하기

 

📌 removeEventListener()메소드

문서객체.removeEventListener(이벤트 이름, 이벤트 리스너)

이벤트를 제거 할때 사용하는 메소드

<head>
    <title>DOMContentLoaded</title>
    <script>
        document.addEventListener('DOMContentLoaded', ()=> {
            let counter = 0
            let isContent = false

            const h1 = document.querySelector('h1')
            const p = document.querySelector('p')
            const connectButton = document.querySelector('#connect')
            const disconnectButton = document.querySelector('#disconnect')

            const listener = (event) => {
                h1.textContent = `클릭 횟수: ${counter++}`
            }

            connectButton.addEventListener('click', () => {
                if(isContent === false) {
                    h1.addEventListener('click', listener)
                    p.textContent = '이벤트 연결 상태: 연결'
                    isContent = true
                }
            })
            disconnectButton.addEventListener('click', () => {
                if(isContent === true) {
                    h1.removeEventListener('click', listener)
                    p.textContent = '이벤트 연결 상태: 해제'
                    isContent = false
                }
            })
        })
    </script>
    <style>
        /* h1태그를 마우스로 클릭할때 글자가 선택되는 걸 막기 위함 */
        h1 {
            user-select: none;
        }
    </style>
</head>
<body>
    <h1>클릭횟수: 0</h1>
    <button id="connect">이벤트 연결</button>
    <button id="disconnect">이벤트 제거</button>
    <p>이벤트 연결 상태: 해제</p>
</body>

이벤트 리스너가 여러번 연결되지 않게 isConnet라는 변수를 활용합니다.

참고한 책 : 혼자 공부하는 자바스크립트

저작자표시

'JavaScript' 카테고리의 다른 글

자바스크립트 이벤트 활용2  (0) 2022.11.08
자바스크립트 이벤트 활용1  (0) 2022.11.08
자바스크립트 객체와 배열 고급  (0) 2022.11.07
자바스크립트 객체의 속성과 메소드 사용하기  (2) 2022.11.07
자바스크립트 객체의 기본  (0) 2022.11.04

'JavaScript' Related Articles

티스토리툴바