노드 유형과 그 값을 출력

ELEMENT_NODE = 1
ATTRIBUTE_NODE = 2
TEXT_NODE = 3
CDATA_SECTION_NODE = 4
ENTITY_REFERENCE_NODE = 5
ENTITY_NODE = 6
PROCESSING_INSTRUCTION_NODE = 7
COMMENT_NODE = 8
DOCUMENT_NODE = 9
DOCUMENT_TYPE_NODE = 10
DOCUMENT_FRAGMENT_NODE = 11
NOTATION_NODE = 12
DOCUMENT_POSITION_DISCONNECTED = 1
DOCUMENT_POSITION_PRECEDING = 2
DOCUMENT_POSITION_FOLLOWING = 4
DOCUMENT_POSITION_CONTAINS = 8
DOCUMENT_POSITION_CONTAINED_BY = 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32

노드를 다루기 위한 속성 및 메서드
Node 속성

  • childNodes
  • firstChild
  • lastChild
  • netSibling
  • nodeName
  • nodeType
  • nodeValue
  • parentNode
  • previousSibling

Node 메서드

  • appendChild()
  • cloneNode()
  • compareDocumentPosition()
  • contains()
  • hasChildNodes()
  • insertBefore()
  • isEqualNode()
  • removeChild()
  • replaceChild()

Document 메서드

  • document.createElement()
  • document.createTextNode()

HTML *Element 속성

  • innerHTML
  • outerHTML
  • textContent
  • innerText
  • outerText
  • firstElementChild
  • lastElementChild
  • nextElementChild
  • previousElementChild
  • children

HTML element 메서드

  • insertAdjacentHTML()

노드의 유형과 이름 식별하기

JavaScript 메서드를 사용해서 Element 및 Text 노드를 생성하기

  • CreateElement()
  • CreateTextNode()

다른 메서들(예: CreateAttribute(), CreateComment() )도 존재하지만, 흔히 사용 되지는 않는다.
https://codepen.io/singihae/pen/Gmarvo
CreateAttribute()메서는 사용이 금지 되었으며, attribute 노드를 만드는 데 사용되어서는 안 된다. 대신에, 통상적으로 개발자들은 getAttribute(), setAttribute(), removeAttribute() 메서드를 사용한다 .

insertAdjacentHTML() : 시작 태그의 앞, 시작 태그의 뒤, 종료 태그 앞, 종료 태그 뒤에 노드를 삽입하는 것이 가능하다.

appendChild(): 하나의 노드(혹은 여러 노드)를 메서드가 호출된 노드의 자식 노드 끝에 삽입할 수 있다.
insertBefore(): 자식 노드 목록 끝에 노드를 추가하는 것 외에 삽입 위치를 조정하는 할 때 사용된다.

See the Pen DOM을 깨우치다 1-10 by Singihae (@singihae) on CodePen.

insertBefore() 메서드는 2개의 매개변수를 필요로 하는데, 삽입될 노드와 해당 노드를 삽입하고자 하는 문서 내의 참조 노드다.
※ insertBefore 메서드의 두번째 매개변수를 전달하지 않으면, 이 메서드는 appendChild()처럼 동작한다.

reomoveChild(), replaceChild()
부모 노드에 접근한 뒤에 삭제할 노드에 대한 참조를 전달하여 removeChild() 메서드를 호출한다.

See the Pen DOM을 깨우치다 1-11 replaceChild() 메서드 따라하기 by Singihae (@singihae) on CodePen.

replaceChild();
노드를 업데이트 한다.

cloneNode() 메서드를 사용하여 단일 노드 혹은 노드 및 모든 자식 노드를 복제 할 수 있다.

단일 노드를 복제하려면 cloneNode();만 사용하면된다.

See the Pen DOM을 깨우치다 1장 cloneNode() 노드 복제하기! by Singihae (@singihae) on CodePen.

childNodes 속성을 사용하면 직계 자식 노드에 대해 배열 형태의 리스트가 나온다.
childNodes가 Element 노드뿐만 아니라 다른 노드 유형 (Text, Commen 노드)도 포함 된다.

DOM 내의 노드 탐색

* parentNode
* firstChild
* lastChild
* nextSibling
* previousSibling

* firtstElementChild
* lastElementChild
* nextElementSibling
* previousElementSibling
* children
* parentElement

노드의 contains() 메서를 사용하면 특정 노드가 다른 노드 내에 포함되었는지를 알 수 있다.
var inside = document.querySelector(‘html’).contains(docuement.querySelector(‘body’));
DOM 트리 내에서 주변 노드와 연관된 노드 위치에 대해 보다 확실한 정보를 얻고 싶을 경우, 노드의 compareDocumentPostion() 메서드를 사용하면 된다.

※ contains()는 선택된 노드와 전달된 노드가 동일한 경우 true를 반환한다.
※ compareDocumentPostition()은 특정 노드가 다른 노드와 하나 이상의 관계를 가질 수 있기 땜누에, 다소 혼동될 수 있다.

DOM 내의 노드에 대해 isEqualNode() 메서드를 호출하면, 매개변수로 전달하는 노드와 동일한지를 물어보게 된다.
colsole.log(input[0].isEqualNode(input[1]));