KDT 포스코X코딩온 웹 과정 14기 11일 javascript의 DOM 객체란?

# DOM란 무엇인가?

1. Document Object Model의 약자.
2. HTML 문서의 집합으로 포현하여 컴퓨터로 하여금 문서에 접근할 수 있도록함.
3. HTML 문서는 각각의 node와 object의 집합으로 문서를 표현함.
4. node 또는 object에 id, name 등을 통해 접근하여 문서 구조/스타일/ 내용을 변경할 수 있도록 도와줌.
5. 각각의 object에 접근할 떄엔 트리 구조를 따라야함, 즉, 자식요소에서 부모의 부모요소로 바로 갈 수 없음.

 

1. Document 객체란?

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

 

 

DOM 테그는 주로 어떻게 사용되는가?

1. 새로운 HTML 요소나 속성의 추가
2. 존재하는 속성의 제거
3. HTML 문서의 모든 HTML 요소, 속성, 스타일 변경
4. HTML 문서에 새로운 HTML 이벤트 추가
5. HTML 문서의 모든 HTML 이벤트에 반응

 

 

DOM 요소의 선택

document.getElementById(아이디 속성값) : 해당 아이디 속성을 가지는 요소를 반환
document.getElementsByClassName(클래스 속성값) : 해당 클레스를 가지는 요소를 반환
document.getElementsByTagName(태그 이름) : 해당 이름을 가지는 녀석을 반환
document.getElementsByName(name 속성값) : 해당 name 속성값을 가지는 녀석을 반환
document.querySelector(CSS 선택자) : 지정 선택자를 만족하는 문서에서 만나는 첫번쨰 요소반환
document.querySelectorAll(CSS 선택자) : 모든 요소를 가져와서 배열과 같은 데이터로 반환(NodeList)

 

 

DOM 요소 다루는 법 - 생성

document.createElement(html요소) : 해당 html 요소를 DOM으로 생성함(단, 배치는 X)
document.write(텍스트) : 아직 배치되지 않은 TEXT를 가진 DOM을 생성함.

 

DOM 요소 다루는 법 - 정보 변경

• [].appendChild() : 해당 부모 연산자의 자식으로 DOM 요소를 배치함..
• [].append() : 해당 DOM요소 밑에다 DOM 요소를 배치함.
• [].removeChild() : 해당 연산자의 지시된 자식 요소를 제거함
• [].innerText = 내용; : 해당 DOM요소의 TEXT 값을 바꿈.
• [].remove(); : 해당 DOM 요소를 제거함.
• [].className  = 클래스 이름 : 해당 클래스를 DOM 요소에다가 추가함.

 

DOM 요소의 문자열 변경

textContent  : 해당 DOM 요소의 TEXT 값을 변경함.
innerText .: 해당 DOM 요소에 TEXT를 넣음.
innerHTML : 해당 DOM 요소의 자식으로 HTML을 넣을 수 있음

 

DOM 요소에 style class를 추가하는 방법

요소.classList.add(): 해당 DOM  요소에 class를 추가함.
요소.lassList.remove() : 해당 DOM 요소의 특정 class를 제거함.
요소.classList.contains() : 해당 DOM이 해당 클레스를 가졌는지 확인함.
요소.classList.toggle() : 해당 DOM이 특정 클래스를 가졌으면 제거, 없으면 추가함.
요소.setAttribute : 선택한 요소의 속성값을 직접 지정할 수 있는 메소드

 

특정 노드를 선택한 후, 그 노드의 형제, 부모, 자식 노드에 접근하는 방법

• 요소.children/ 요소.children[0] : 해당 노드의 자식 노드를 classList 형태로 접근함.
• 요소.parentNode : 해당 자식 Node의 부모 Node에 접근함.
• 요소.previousElementSiblings : 동등한 관계의 이전 테그를 반환하되, Text를 포함함
• 요소.nextElementSiblings :  동등한 관계의 이전 테그를 반환하되, TEXT는 포함하지 않음.

 

DOM 요소를 배치하는 방법

1.  요소.append()/요소.appendChild() ; 선택된 요소의 맨 뒤의 자식 요소를 추가함.
2.  요소.prepend() : 선택된 요소의 맨 앞쪽인 자식 요소로 추가됨.
3. 요소.before() : 선택된 요소의 앞에 있는 형제 요소로 추가됨.'
4. 요소.affter() ; 선택된 요소의 바로 뒤에 형제 요소로 추가됨.

 

DOM 요소를 삭제하는 방법

1. 요소.remove() ; 선택된 요소가 제거되니다.
2. 요소.removeChild(‘요소의 자식요소‘); : 자식요소 선택자를 만족하는 가장 빨리 접근한 자식요소 제거.