쌓고 쌓다

[JavaScript] 문서 객체 가져오기, 생성, 이동, 삭제 본문

프로그래밍/JavaScript

[JavaScript] 문서 객체 가져오기, 생성, 이동, 삭제

승민아 2023. 1. 1. 19:52

문서 객체 가져오기

 

document.body로 body의 요소를 읽어 들일 수 있고 아래와 같은 방법들로도 요소 읽기가 가능하다.

document.head
ducument.body
document.title

 

head, body, 요소 내부에 만든 다른 요소들은 별도의 메소드를 통해 접근한다.

document.querySelector(선택자)
document.querySelectorAll(선택자)

querySelector 메소드는 요소를 하나만 추출하고, querySelectorAll 메소드는 문서 객체 여러 개를 추출한다.

 

선택자 부분에 CSS 선택자를 사용한다.

이름 선택자 형태 설명
태그 선택자 태그 특정 태그를 가진 요소 추출
아이디 선택자 #아이디 특정 id 속성을 가진 요소 추출
클래스 선택자 .클래스 특정 class 속성을 가진 요소 추출
속성 선택자 [속성=값] 특정 속성 값을 갖고 있는 요소 추출
후손 선택자 선택자_A 선택자_B 선택자_A 아래에 있는 선택자_B를 선택

 

querySelector() 메소드

h1 태그를 추출하여 조작해 본다.

<!DOCTYPE html>
<html>
<head>
    <title></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태그</h1>
</body>
</html>

 

querySelectorAll() 메소드

문서 객체 여러 개를 배열로 읽어 들이기에 forEach() 메소드를 통해 각각 접근한다.

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

            headers.forEach((header) => {
                header.textContent = 'HEADERS'
            })
        })
    </script>
</head>
<body>
    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>
</body>
</html>

 

innerHTML 속성과 textContext 속성

속성 이름 설명
문서 객체.textContent 입력된 문자열을 그대로 넣는다.
문서 객체.innerHTML 입력된 문자열을 HTML 형식으로 넣는다.

 

차이점을 보여주는 예제

    <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>

 

textContent 속성의 경우 글자 그대로 들어간다.

innerHTML 속성의 경우 <h1></h1>이 요소로 변환해서 들어간다.

 

속성 조작

메소드 이름 설명
문서 객체.setAttribute(속성이름, 값) 특정 속성의 값 지정
문서 객체.getAttribute(속성이름) 특정 속성을 추출

 

다음 형태의 URL을 입력하면 지정한 크기의 고양이 이미지를 얻는다.

http://placekitten.com/너비/높이

 

아래의 코드는 이미지 src 속성을 조작하여 이미지마다 width를 지정한다.

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const rects = document.querySelectorAll('.rect') // 특정 클래스로 요소 지정
            
            rects.forEach((rect, index) => {
                const width = (index+1)*100 // index가 0~3이므로 width는 100~400
                const src = `http://placekitten.com/${width}/250`
                rect.setAttribute('src', src) 
            })
        })
</script>
<body>
    <img class="rect">
    <img class="rect">
    <img class="rect">
    <img class="rect">
</body>

 

아래처럼 속성을 바로 읽어 지정도 가능하다.

rects.forEach((rect, index) => {
    const width = (index+1)*100
    const src = `http://placekitten.com/${width}/250`
    rect.src = src
})

 

스타일 조작

문서 객체 스타일을 조작할 때 style 속성을 사용한다.

style 속성은 객체이며 내부에 속성으로 CSS를 사용해 스타일을 지정한다.

 

자바스크립트에서 -기호를 식별자에 사용할 수 없어 캐멀 케이스로 나타낸다.

CSS 속성 이름 자바스크립트 style 속성 이름
background-color backgroundColor
text-align textAlign
font-size fontSize

 

아래의 방법들로 조작한다.

h1.style.backgroundColor
h1.style['backgroundColor']
h1.style['background-color']

 

EX)

<script>
        document.addEventListener('DOMContentLoaded', () => {
            const div = document.querySelector('div')
            div.style.height=`50px`
            div.style.backgroundColor = 'lightblue'
        })
</script>
<body>
    <div></div>
</body>

 

문서 객체 생성과 이동

 

문서 객체 생성(createElement)

document.createElement(문서 객체 이름)

객체를 만들었다고 배치가 되는 것이 아니다.

문서를 어디 문서 아래에 추가할지 지정해야 한다.

이때 appendChild() 메소드를 사용한다.

 

문서 객체 이동(appendChild)

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

 

EX) h1 태그를 생성하고 body 태그 아래에 추가해 보자.

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

            header.textContent = '문서 객체 동적 생성'
            header.style.color = 'white'
            header.style.backgroundColor = 'black'

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

</body>
</html>

 

EX) h1 태그를 hr 태그를 기준으로 위아래로 이동

<!DOCTYPE html>
<html>
<head>
    <title></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"> </div>
    <hr>
    <div id="second"> </div>
</body>
</html>

 

문서 객체 삭제

문서 객체를 삭제할 때 사용한다.

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

 

만약 appendChild() 등으로 부모 객체와 연결이 되어 있는 문서 객체인 경우 parentNode 속성으로 부모 객체에 접근하여

아래의 형태로 코드를 사용한다.

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

 

EX) 3초 뒤 h1 태그 삭제

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

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

h1 태그의 부모 객체는 body이다.

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

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JavaScript] 키보드 이벤트, 이벤트 리스너 외부로 분리  (0) 2023.01.03
[JavaScript] 이벤트 설정(연결, 해제)  (1) 2023.01.01
[JavaScript] DOMContentLoaded 이벤트  (0) 2023.01.01
[JavaScript] 얕은 복사, 깊은 복사  (1) 2022.12.27
[JavaScript] 속성 존재 여부 확인, 다중 할당  (0) 2022.12.27
'프로그래밍/JavaScript' Related Articles more
Comments