DOM 이란?
Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작할 수 있는 Model이라는 의미이다. 즉, 자바스크립트를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있다.
-
HTML에 자바스크립트 적용하기
HTML에 JavaScript를 적용하기 위해서는
<script>태그를 이용한다.
<script src="myScriptFile.js"></script> 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈추고 <script> 요소를 먼저 실행한다. 따라서 html의 본문에 있는 엘리먼트들을 이용하기 위해서는 <script>를 문서의 후반부, 즉 <body>태그가 끝나기 직전에 삽입하는 것이 좋다.
-
자식 엘리먼트 찾기
예)
document.body.children -
부모 엘리먼트 찾기
Node.parentElement예)
document.querySelector('.menu-wrapper').parentElement -
DOM 구조 조회하기
consol.dir(document)- console 메서드 dir()은 지정된 JavaScript 객체의 속성에 대한 목록을 표시한다. DOM 구조를 조회할 때 유용하다.
- console 창에 입력하면 document 객체를 조회할 수 있다.
C / R / U /D
CREATE - createElement
document.createElement('div')
console 창에 입력시 div 엘리먼트 생성document객체에만 적용할 수 있는 메소드이다.
READ - querySelector, querySelectorAll
-
Document.querySelector()
지정한 셀렉터 또는 셀렉터들과 일치하는 문서 내 첫번째 Element를 반환. 일치하는 요소가 없으면 null을 반환 -
Document.querySelectorAll()
지정된 셀렉터 그룹과 일치하는 NodeList를 반환. 반환객체는 nodeList이기때문에 for문 또는 foreach 문을 사용해야 함.
(',') 을 사용하면 여러요소를 한번에 가져올 수 있다. -
querySelector의 부모는 꼭 document 객체여야만 할까?
- 정답은 NO.
- querySelector는 지정된 node 내에서 엘리먼트를 찾아준다. 아래와 같이 사용 가능.
const body = document.querySelector('body');
body.querySelectorAll('div')UPDATE - textConent, classList.add
-
Node.textContent()노드와 그 자손의 텍스트 내용을 표시
Element.innerHTML과 기능적으로 유사하지만 성능과 보안에 더 강함
-
Element.classList.add()지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
-
Element.id엘리먼트에 아이디 값을 준다.
-
Element.setAttribute(name, value);엘리먼트의 속성 값을 설정한다. 속성이 이미 존재한다면, 값은 업데이트 되고 존재하지 않는다면 새로운 속성이 (name, value)와 함께 추가된다.
예)
oneDiv.setAttribute('class', 'tweet')
DELETE - remove, removeChild
ChildNode.remove()
ChildNode를 포함하는 트리로부터 ChildNode를 제거하고 종료 (자살)Node.removeChild()
자식 엘리먼트를 지정해서 삭제
노드를 삭제하는 것이 아님. 메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것. 최종적으로는 관계를 끊은 해당 노드의 참조를 반환.
APPEND - appendChild
const tweetDiv = document.createElement('div')
이걸 document의 body에 붙이려면
document.body.append(tweetDiv)
ParentNode.append()
ParentNode의 마지막 자식 뒤에 Node 객체 또는 DOMString 객체를 삽입
append() vs. appendChild()- append는 rest parameter를 이용해 여러개의 element 한번에 추가 가능, appendChild는 하나의 element만 추가 가능
- 문자열 노드 추가 - append는 가능 / appendChild는 노드 객체만 추가 가능
- 인터넷 익스플로러는 append 미지원
const div = document.createElement('div');
const span = document.createElement('span');
document.body.append('hello');
document.body.append('hello', div, span);ParentNode.prepend()
Node 객체 또는 DOMString 객체를 ParentNode의 첫 자식노드 앞(맨 앞)에 삽입.
- 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? ⬇️
html
<div class="a">
<span> </span>
</div>
<div class="b"></div>js
const span = document.querySelector(‘span’);
const divB = document.querySelector(‘.b’);
divB.appendChild(span); 정답은 NO. 복사 되지 않고 .a 에서 .b 로 '이동' 한다.
기존 노드에 대한 참조인 경우 현재 위치에서 새 위치로 이동
(다른 노드에 추가하기 전에 부모 노드에서 노드를 제거할 필요가 없음)
innerHTML, innerText, textContent
-
innerHTML은 'Element'의 속성으로, 해당 Element 안에 있는 HTML 전체 내용을 가져온다.
보안에 취약하기 때문에 사용을 지양하는 것이 좋다. -
innerText는 'Element'의 속성으로, 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어온다.
display: none인 엘리먼트는 읽어오지 않음
- textContent는 'Node'의 속성으로, innetText와는 달리
<script>나<style>태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다.
display: none인 엘리먼트도 읽어옴
element와 node의 차이
- node: DOM API상에 존재하는 모든 것을 포괄하는 개념
- element: 한 특정한 타입의 노드
- 즉, node는 element의 상위 개념
children과 childNodes의 차이
childNodes는 주석, 텍스트 등 모든 노드를 가져오고 children은 요소노드만을 가져온다.
https://velog.io/@beton/children%EA%B3%BC-childNode
why array method is not workong on nodelist
https://developer.mozilla.org/ko/docs/Web/API/NodeList
how to convert nodelist into javascript array
https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2
