day40 - JavaScript(DOM)

KIC/JavaScript,CSS

day40 - JavaScript(DOM)

바차 2021. 8. 10. 18:44

[DOM]

-> 문서 객체 모델

-> 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식이다.

-> 좁은 의미로는 document 객체와 관련된 객체 집합

-> 사용시 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다

-> 문서 객체 - 태그를 자바스크립트에서 이용할 수 있는 객체로 만드는 것을 뜻한다.

-> 태그를 html 페이지에 존재하는 html이나 body 태그를 뜻함

00 23 00 설명 듣기

[domEx1]

<!DOCTYPE html>
<html>

<head>
    <title>DOMContentLoaded</title>
    <script>
        //HTML 태그를 쉽게 만들 수 있는 콜백 함수를 선언하기
        const h1 = (text) => `<h1>${text}</h1>`

    </script>
    <script>
        document.body.innerHTML += h1('1번째 script 태그')

    </script>
</head>

<body>
    <script>
        document.body.innerHTML += h1('2번째 script 태그')
    </script>
    <h1>1 번째 h1 태그</h1>
    <script>
        document.body.innerHTML += h1('3번째 script 태그')
    </script>
    <h2>2번째 h2 태그</h2>
</body>

</html>

[domEx2]

-> DOMContentLoaded는 페이지가 로딩될때 자동으로 지정해두었던 콜백함수를 호출한다.

<!DOCTYPE html>
<html>

<head>
    <title>DOMContentLoaded</title>
    <script>
        //DOMContentLoaded 이벤트를 연결
        document.addEventListener('DOMContentLoaded', () => {
            const h1 = (text) => `<h1>${text}<h1>`
            
            // h1을 body에 넣겠다는 의미
            document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
        })

    </script>

</head>

<body>

</body>

</html>

[domEx3]

<!DOCTYPE html>
<html>

<head>
    <meta charset="EUC-KR">
    <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>

</html>

[domEx4]

<!DOCTYPE html>
<html>

<head>
    <meta charset="EUC-KR">
    <title>DOMContentLoaded</title>
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            //요소를 읽어들인다.
            const headers = document.querySelectorAll('h2')


            //forEach로 여러개를 받을 수 있다.
            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>
    <!-- 이렇게 미리 지정해두었던 h2에서만 효과가 표현된다. -->
    <h2></h2>
    <h2></h2>
</body>

</html>

[domEx5]

-> #a 는 id .a 는 클래스를 뜻한다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="EUC-KR">
    <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>

</html>

[domEx6]

<!DOCTYPE html>
<html>

<head>
    <meta charset="EUC-KR">
    <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 {
            /* 클릭을 여러번 했을 때 글자가 선택되는 것을 막기 위한 스타일 설정 */
            user-select: none;
        }
    </style>
</head>

<body>
    <h1>클릭 횟수: 0</h1>

</body>

</html>

[domEx7]

<!DOCTYPE html>
<html>

<head>
    <meta charset="EUC-KR">
    <title>DOMContentLoaded</title>
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const h1 = document.querySelector('h1')
            const print = (event) => {
                let output = ''
                output += `alt: ${event.altKey}<br>`
                output += `ctrl: ${event.ctrlKey}<br>`
                output += `shift: ${event.shiftKey}<br>`
                output += `code: ${event.code !== 'undefined' ? event.code : event.keyCode}<br>`
                h1.innerHTML = output
            }

            document.addEventListener('keydown', print)
            document.addEventListener('keyup', print)


        })



    </script>
</head>

<body>
    <h1></h1>
</body>

</html>