DOM(Document Object Model) - javascript 기본

DOM(Document Object Model)

JS HTML DOM : https://www.w3schools.com/js/js_htmldom.asp

DOM이란?

• DOM은 HTML 문서를 객체로 표현한 것으로,
• 자바스크립트를 이용해 HTML 문서를 제어할 수 있게 해준다.

const h1El = document.querySelector('h1')
console.log(h1El.textContent)

DOM 문서

Node vs Element(요소)

• Node : HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.
• Element : HTML 요소를 의미한다.

<div class="wrap">
    <!-- 주석 -->
    <header class="header">header</header>
    text1
    <main id="main" class="main">main</main>
    text2
    <div class="footer">footer</div>
</div>

const parent = document.querySelector('.wrap')

// parent의 자식 노드들을 출력한다.
console.log(parent.childNodes) // NodeList(7) [text, comment, text div.header, text, div.main, text]

// parent의 자식 요소들을 출력한다.
// 요소는 노드의 하위 개념으로 노드 중에서도 태그를 의미한다.
console.log(parent.children) // HTMLCollection(2) [div.header, div.main]

// parent의 첫 번째 자식 노드를 출력한다.
console.log(parent.firstChild) // #text

// parent의 첫 번째 자식 요소를 출력한다.
console.log(parent.firstElementChild) // div.header

// parent의 마지막 자식 노드를 출력한다.
console.log(parent.lastChild) // #text

// parent의 마지막 자식 요소를 출력한다.
console.log(parent.lastElementChild) // div.main

// parent의 부모 노드를 출력한다.
console.log(parent.parentNode) // body

// parent의 부모 요소를 출력한다.
console.log(parent.parentElement) // body

DOM 탐색

<div id="main">
    <section class="content-section">
        <h1>제목</h1>
        <p>첫 번째 문단</p>
        <p>두 번째 문단</p>
    </section>
    <aside class="sidebar">
        <ul>
            <li>목록 아이템 1</li>
            <li>목록 아이템 2</li>
        </ul>
        <a href="http://naver.com" class="link">네이버로 이동</a>
    </aside>
</div>

- HTML 요소 찾기

document.getElementById('main') // id로 요소를 찾는다.
document.getElementsByClassName('content-section') // 클래스로 요소를 찾는다.
document.getElementsByTagName('p') // 태그 이름으로 요소를 찾는다.
document.querySelector('.content-section') // CSS 선택자로 요소를 찾는다.
document.querySelectorAll('.content-section p') // CSS 선택자로 요소들을 찾는다.

- HTML 요소 변경

document.getElementByClassName('sidebar')[0].textContent = '사이드바' // 요소의 텍스트를 변경한다.
document.getElementByClassName('sidebar')[0].innerHTML = '<h2>사이드바</h2>' // 요소의 HTML을 변경한다.
document.getElementByClassName('sidebar')[0].style.backgroundColor = 'lightgray' // 요소의 스타일을 변경한다.

document.querySelector('.link').setAttribute('href', 'http://google.com') // 요소의 속성을 변경한다.
document.querySelector('.link').textContent = '구글로 이동' // 요소의 텍스트를 변경한다.

- HTML 요소 추가 및 제거

// .sidebar의 마지막 자식 요소로 새로운 요소를 추가한다.
const newElement = document.createElement('div')
newElement.textContent = '새로운 요소'

document.querySelector('.sidebar').appendChild(newElement) // 요소를 추가한다.

// .sidebar의 마지막 자식 요소를 제거한다.
document.querySelector('.sidebar').lastElementChild.remove() // 요소를 제거한다.

DOM 이벤트

<button id="btn">버튼</button>

const btn = document.getElementById('btn')

// 버튼을 클릭하면 이벤트가 발생한다.
btn.addEventListener('click', () => {
    console.log('버튼 클릭')
})

컨텐츠 변경하기

<div id="main">
    <h1>제목</h1>
    <p>첫 번째 문단</p>
    <p>두 번째 문단</p>
</div>

const main = document.getElementById('main')

// main의 첫 번째 자식 요소를 출력한다.
console.log(main.firstElementChild) // h1

// main의 첫 번째 자식 요소의 텍스트를 변경한다.
main.firstElementChild.textContent = '가을이는 넘나 귀엽다'

// main의 첫 번째 자식 요소의 HTML을 변경한다.
main.firstElementChild.innerHTML = '<h2>겨울이는 겁나 까다롭다.</h2>'

// main의 마지막 자식 요소를 출력한다.
console.log(main.lastElementChild) // p

// main의 마지막 자식 요소의 텍스트를 변경한다.
main.lastElementChild.textContent = '새로운 문단'

속성 값 변경하기

<a href="http://naver.com" class="link">네이버로 이동</a>

const link = document.querySelector('.link')

// link의 href 속성을 변경한다.
link.setAttribute('href', 'http://google.com')

// link의 텍스트를 변경한다.
link.textContent = '구글로 이동'

동적 요소 추가하기

<p id="demo"></p>

document.getElementById('demo').innerHTML = 'Date : ' + Date() // 현재 날짜와 시간을 출력한다.