Node properties, methods MDN

Node 프로퍼티

Node.firstChild

node.firstChild : 노드의 첫 번째 자식을 반환하는 읽기 전용 속성
노드가 자식이 없으면 null을 반환한다.

const div1 = document.createElement('div');
const span1 = document.createElement('span');
div1.appendChild(span1);

console.log(div1.firstChild); // <span></span>

---

Node.childNodes

: 요소의 모든 자식 요소를 포함하는 NodeList를 반환하는 속성

const nodeList = document.body.childNodes; 
// body 요소의 자식 요소를 포함하는 NodeList를 변수 nodeList에 할당한다.

Node.childNodes와 Element.children의 차이점

Node.childNode는 NodeList를 반환하고, Element.children은 HTMLCollection을 반환한다.

<!--HTML-->
<p>
  Hello world!
  <span>Bye world!</span>
</p>

//JS
const p1 = docuemnt.querySelector('p');
p1.childNode; // NodeList : [HTMLElement, Text]
p1.children;  // HTMLCollection : [HTMLElement]

https://dev-dain.tistory.com/128

---

Node.parentNode

node.parentNode : 지정된 노드의 부모 노드를 반환하는 속성

if (node.parentNode) {...
// 만약 해당 노드에 부모 노드가 있다면...

---

Node.parentElement

node.parentElement : 해당 노드의 부모 요소를 나타내는 속성
부모 요소가 없거나, 부모 요소가 DOM 요소가 아니라면 null을 반환한다.

if(node.parentElement) {                    // 해당 노드의 부모 요소가 있다면
	node.parentElement.style.color = "red"; // 그 부모 요소의 글자색을 red로 바꾼다.
}

parentNode()와 parentElement()의 차이점

---

Node 메소드

Node.cloneNode()

node.cloneNode(deep) : 이 메서드를 호출한 노드의 복제된 노드를 반환하는 메소드

• node : 복제할 노드
• dupNode : 복제된 새로운 노드
• deep : 해당 노드의 자식 요소까지 복제하려면 true, 해당 노드만 복제하려면 false

const dupNode = node.cloneNode(true);

---

Node.insertBefore()

node.insertBefore(insertedNode, referenceNode) : 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입하는 메소드

• node : 부모 노드
• insertedNode : 삽입되는 자식 노드
• referenceNode : insertedNode가 삽입되는 노드

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertAfter() 메소드는 존재하지 않는다.

---

Node.appendChild()

node.appendChild(node) : 해당 부모 노드의 마지막 자식 노드 뒤에 특정 노드를 추가하는 메소드

var p = document.createElement("p");
document.body.appendChild(p);
// p 요소를 생성하고 body 요소의 끝에 추가한다.

prependChild() 메소드는 존재하지 않는다.

---

Node.removeChild()

node.removeChild(node) : 해당 부모 노드의 특정 노드를 삭제하고 삭제한 노드를 반환하는 메소드

const list = document.getElementById("myList");

while (list.hasChildNodes()) {       // list가 자식 노드가 있다면,
  list.removeChild(list.firstChild); // 반복해서 첫 번째 자식을 삭제한다.
}