[ JavaScript ] DOM(Document Object Model) 과 node에 대해서

브라우저가 실행될 때 전역객체인 window가 있고

그 안에 DOM, BOM, JavaScript 객체가 있다.

 

DOM ( Document Object Model ) : 웹페이지의 문서에 대한 객체

BOM ( Browser Object Model ) : 브라우저에 관련된 객체

JavaScript core : 자바스크립트 언어에 정의되어 있는 객체

 

 

DOM (Document Object Model) 문서 객체 모델

• 웹 문서용 프로그래밍 인터페이스로 문서를 노드와 객체로 나타내는 것.
• 웹 사이트를 구축하는 데 사용되는 Web API.
• DOM node는 이 API를 쓰는데 필수적인 인터페이스라고 할 수 있다.
• 우리가 웹 페이지를 만들면 html파일을 브라우저에서 읽는데 브라우저에서 태그를 분석해 노드로 변환한다.
• 페이지 별로 요소가 tree구조로 표현된다.
• 돔 노드 안에는 document와 element가 있고 모든 노드는 eventTarget을 상속한다. ( Element는 Node를 구현하고 Node는 EventTarget을 구현한다. 
• 모든 DOM노드는 공통된 조상으로부터 만들어 지기 때문에 공통된 프로퍼티와 메서드를 지원한다.
• 모든 노드는 이벤트가 발생할 수 있다.document 노드도 노드를 상속하기 때문에 이벤트가 발생할 수 있다.

 

 

노드는 형제요소, 부모요소도 받아올 수 있고 

const broNode = node.nextSibling;
const parentNode = node.parentNode;

 

 

자식 요소도 추가하거나 삭제하고 이용할 수 있다.

// 노드생성
createElement()

// 기존 노드에 추가하기
appendChild() // 하나의 노드만, 오직 노드객체만 받을 수 있음
append() // 여러 요소 추가가능, 노드와 string 받을 수 있음

// 자식 노드 삭제
removechild()

// 자식 노드가 있는지
node.hasChildNodes() // true,false 반환

 

 

 

childNodes와 children

그리고 검색하다보니 알게된 childNodes와 children의 차이!

node.childNodes 같은 경우에는

줄바꿈, 주석 등 비요소 노드까지도 반환된다는 것을 알았다.

parentNode.childNodes
//비요소 노드 포함된(주석까지) NodeList 반환

parentNode.children
//비요소 노드가 제거된 자식요소가 포함된 HTML Collection반환

 

보통 노드에 접근하는 일보다 HTML태그에 접근해서 활용하는 것들이 많을 것 같아서

node.children을 잘 기억해서 사용해야 할 것 같다.

 

 

 

노드는 노드의 이름이나 노드의 타입도 받아올 수 있다.

node.nodeType
node.nodeName

 

isConnected()

노드가 document객체에 연결되었는지 true false를 반환

const childNode = document.createElement('div');
console.log(childNode.isConnected); //false

document.parentNode.appendChild(childNode);
console.log(childNode.isConnected); //true

 

 

 

개발자 도구에서 $0을 사용해 nodeName이뭔지 

type이나 value를 알 수 있다.