JS : DOM이란?

배경

- 자바스트립트는 html을 조작하기 위해 만들어진 언어

- 웹문서를 객체화해서 제어할 수 있도록 한 것을 DOM이라고 한다.

 

DOM (문서객체모델)

: Document Object Model

- DOM tree의 구조를 가지고 있음, 각 요소를 노드라고 함

 

도메인 

- 인터넷 상에서 주소인 URL의 일부

- 외우기 힘든 IP주소를 기억하기 쉽게 만들어줌

- 예시: www.naver.com

 

URL

: Uniform Resource Locator

- 도메인을 포함한 경로

- 예시: https://serch.naver.com/serch.naver?query=카카오+API 

 

DOM에서 가능한 작업

- 새로운 HTML 요소/속성 추가

- 존재하는 HTML 요소/속성 제거

- HTML 문서의 모든 HTML 요소/속성 변경

- HTML 문서의 모든 CSS 스타일 변경

- HTML 문서에 새로운 HTML 이벤트 추가

- HTML 문서의 모든 HTML 이벤트에 반응

 

Document

- 웹페이지에 존재하는 HTML 요소에 접근해 행동을 하고자 할 때 사용하는 객체 

 

Document 속성

document.documentElement
document.head
document.title
document.body

document.URL
document.domain

 

Document 요소 선택

document.getElementById('아이디 속성값')
document.getElementsByClassName('클래스 속성값')
document.getElementsByTagName('태그 이름')
document.getElementsByName('name 속성값')

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

 

Document 요소 다루기

document.createElement('html요소')
// document.createElement('li');
document.write('텍스트')

[].appendChile()
[].removeChilde()

[].append()
//  ul.append(newTodo)
[].removeChilde()

[].innerHTML = '내용'
// div1.innerHTML = '여기는 <b>첫번째</b> 태그입니다. &hearts;';
[].ineerText = '내용'
// div1.innerText = '안녕하세요!!';
[].className = '클래스 이름'