DOM

브라우저는 HTML과 CSS 명세에 따라서 파일을 해석해서 화면에 표시하게된다.

DOM?

Document Obect Model
HTML 요소를 Object처럼 조작할 수 있는 Model
웹 문서를 브라우저에 렌더링하기위해 웹 문서를 로드한 후, 파싱하여 브라우저가 이해할 수 있는 구조로 구성 후 메모리에 적재하게 되는데 이를 DOM이라고 한다.
DOM은 HTML문서의 구조와 관계를 객체 기반으로 표현한 것으로, DOM을 통해 웹페이지의 구조, 컨텐츠, 스타일을 읽고 조작할 수 있음
간단하게 말하면 웹 페이지에 대한 인터페이스라고 할 수 있다.
브라우저 화면에서 보이는 것은 render tree로 이 트리를 만들기 위해서는 DOM과 CSSOM이 필요하다.
DOM - element를 표현하는 Object Model
CSSOM - element와 연결된 스타일이 표현된 Object Model
DOM의 객체 구조는 node tree로 표현된다.
document 객체는 페이지의 기본 진입점 역할을 함
자바스크립트에서 DOM은 document 객체에 구현되어있음
DOM이 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹페이지 요소나 모델, 개념들에 대한 정보를 갖지 못하게 된다.
자바스크립트와 밀접하게 연결되어있으나 각각 분리되어 발전했음
API = DOM + JS

Node

DOM은 node의 계층 구조로 이루어져 있음
각 node는 부모와 자식을 가진다.
HTML의 tag<>들은 node를 표현

property

•
node.parentNode
•
node.firstNode
•
node.lastNode
•
node.childNodes → element + text까지
•
node.parentElement
•
node.children → element만

Element

node의 특정 타입
Node.ELEMENT_NODE

HTML에 JS 적용하기

정적인 HTML에 동적인 JS를 사용하기 위해서는 <script> 태그를 사용해 HTML에 JS를 적용해주어야 한다.
<script src="index.js"></script>
HTML
복사
웹 브라우저가 작성된 코드를 해석하는 과정에서 script 요소를 만나면 웹 브라우저는 HTML 해석을 잠시 멈추고 script 요소를 먼저 실행한다.
→ script 태그를 추가하는 위치에 따라 실행 결과가 달라지게 된다.
엘리먼트를 선언하기 전 script를 실행하면 JS에서 해당 엘리먼트를 찾을 수 없다.
→ body가 끝나기 전에 script를 삽입하는 것이 좋다.
console.dir : DOM을 객체의 모습으로 출력

자식 엘리먼트 찾기

element의 자식 엘리먼트를 찾고싶다면?
document.element.children
childNode

부모 엘리먼트 찾기

node.parentElement
element.closet(Selector) : 인터넷 지원 안함

형제 엘리먼트 찾기

nextElementSibling
nextSibling
•
createElement - CREATE
•
querySelector, querySelectorAll - READ
•
textContent, id, classList, setAttribute - UPDATE
•
remove, removeChild, innerHTML = "" , textContent = "" - DELETE
•
appendChild - APPEND
•
innerHTML과 textContent의 차이
•
createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
•
element와 node의 차이를 이해할 수 있다.
•
children과 childNodes의 차이를 이해할 수 있다.
•
remove와 removeChild의 차이를 이해할 수 있다.
•
좌표 정보 조회를 할 수 있다. - offsetTop...
•
크기 정보 조회를 할 수 있다. - offsetWidth...

Create

document.createElement()

새로운 엘리먼트 생성
Document.createDocumentFragment()

Element.append()

엘리먼트의 자식 요소로 추가
노드 객체나 DOMString 사용가능, 여러개 추가 가능
리턴값 없음

Element.prepend()

엘리먼트의 자식 요소로 추가되나 맨 앞에 추가한다.

appendChild()

Node 객체만 받을 수 있음
한번에 오직 하나의 노드만 추가 가능
리턴값은 추가한 노드
기존 엘리먼트를 다른 곳으로 appendChild하면 기존 엘리먼트 복사하지 않고 이동

prependChild

Read

querySelector()

인자로 selector를 전달하여 해당하는 selector를 가진 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다.

querySelectorAll()

여러개의 엘리먼트를 한번에 가져오는 경우
이렇게 조회한 엘리먼트들은(유사 배열 객체) 배열처럼 for문 사용가능

getElementById()

id로 엘리먼트를 조회
오래된 방식으로 인터넷 익스플로러 호환성을 신경써야할 때 사용

Update

.textContent

엘리먼트에 문자열 입력
해당 요소의 텍스트와 내부 자식들 텍스트 가져옴? 이건 찾아봐야하ㅏㅁ innerText랑 비교

.innterText

해당 요소의 텍스트만 가져옴
textContent보다 더 많은 성능 요구

.innerHTML

해당 요소의 HTML

.classList.add()

엘리먼트에 class를 추가

setAttribute(attribute_name, attribute_value)

엘리먼트에 속성 추가

Delete

Element.remove()

엘리먼트를 삭제
엘리먼트위치를 알고 있는 경우 사용

removeChild

자식 엘리먼트를 첫 번째부터 삭제
반복문을 사용하면 모든 자식 엘리먼트 삭제 가능

value

className

dataset

dataset.<>
<div data-<> = ''>
•
element와 node의 차이 (difference between element and node in javascript dom)
node는 element의 상위 개념
잠시 Node와 Element에 대해 알아보겠습니다! Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다
•
children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
•
removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
•
tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
nodelist는 array는 아니지만 유사배열로 forEach를 사용해서 반복가능
•
tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
insertBefore
insertAfter
cloneNode

이벤트 발생 시 작동하는 함수 할당

function displayAlert() { alert('hello') } document.querySelector('#apply').onclick = displayAlert
JavaScript
복사
함수 할당 시 함수의 실행값을 할당하면 안되고 함수 그 자체를 할당해야한다.
document.querySelector('#apply').addEventListener('click', function(){ alert("hello") })
JavaScript
복사