innn

Node.appendChild() 메서드와 Node에 대하여 본문

FE/HTML CSS 자바 스크립트

Node.appendChild() 메서드와 Node에 대하여

33삼 2023. 5. 1. 16:59

https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

 

Node.appendChild() - Web API | MDN

Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노

developer.mozilla.org

 

JS 로 과제를 풀다가 이제까지는 HTML의 요소(element)를 js 쿼리셀렉터로 가져와서 썼다면

(가령, 아래와 같은 식으로)

const toDoInput = document.querySelector('#todo-form input');

=> todo-form 이라는 id를 가진 요소의 하위 input을 가져온 것

 

이제는 createElement() 메서드와 appendChild() 메서드로 HTML의 요소를 js로 만들어서 써야했다. (랜덤 이미지나 동적으로 생겼다 지워지는 투두리스트 때문에)

 

mdn 문서를 보면 appendChild() 메서드는 부모 노드의 자식 리스트 중 끝에 Node가 붙는 건데 어렴풋이는 알겠으나, 정확한 Node에 대한 개념이 없어서 정리하고자 쓴다.

 

appendChilde() 메서드의 쓰임

 

JavaScript의 appendChild() 메서드는 새로운 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙이는 역할을 한다.

이 appendChild() 메서드는 'Node' 객체의 메서드이다. 따라서 해당 메서드가 호출되는 노드 객체는 새로운 자식이 추가될 부모 노드인 것. 

 

예를 들어 이렇게 생긴 HTML 이 있다고 가정한다.

<body>
  <div id="parent">
    <p> 첫 번째 자식</p>
  </div>
</body>

위 코드에서 div 태그는 parent라는 id를 가지는 요소다. 이 요소의 내부에는 첫째 자식인 p 태그가 있다.

여기서 JS를 통해 새로운 자식 요소를 추가할 수 있다. p 다음으로 두번째 자식인 span을 추가한다고 치자.

// parent 요소를 찾는다.
const parent = document.getElementById('parent');

// 새로운 자식 요소를 생성한다.
const newChild = document.createElement('span');
newChild.innerText = '두 번째 자식';

// parent 요소에 새로운 자식 요소를 추가한다.
parent.appendChild(newChild);

 

위 코드를 실행하면, parent 요소 내부에 span 태그가 추가되어 아래와 같은 HTML 코드가 된다.

<body>
  <div id="parent">
    <p>첫 번째 자식</p>
    <span>두 번째 자식</span>
  </div>
</body>

 

Node.~ 노드 객체란

노드 객체(Node object)는 HTML, XML 또는 JS 문서의 요소를 나타내는 객체다. 노드 객체는 문서의 구조를 형성하며 문서 내의 모든 요소들을 나타낸다. 

 

HTML 문서의 경우, 노드 객체는 문서 내의 모든 HTML 요소들을 나타내며 HTML 요소의 텍스트, 속성, 스타일 등에 접든할 수 있는 메서드(가령, 위의 appendChild() 와 같은 메서드)와 속성을 제공한다.

 

노드 객체는 Document, Element, Text, Comment, ProcessingInstruction 등의 타입으로 나뉘며 각각의 타입은 다양한 속성과 메서드를 갖는다. 

 

가령 쿼리 셀렉터를 사용하는 코드에서

const bodyNode = document.querySelector('body');

이는 body 요소를 나타내는 노드 객체를 선택하는 코드이다. 쿼리 셀렉터 등으로 html 요소를 가져와서 변수에 담을 때 그 담아진 변수를 노드 객체라고 이해하면 될 것 같다.

 

즉, 위의 코드는 CSS 선택자 body를 사용하여 <body> 요소를 나타내는 노드 객체를  bodyNode 라는 이름의 변수에 할당한 것이다.

 

(document.querySelector() 메서드는 괄호 안에 CSS 선택자를 사용하여 문서 내에서 요소를 찾아 해당 요소를 나타내는 노드 객체를 반환한다. )

 

'FE > HTML CSS 자바 스크립트' 카테고리의 다른 글

JSON.parse()와 JSON.stringify()인데... todo list 예시를 곁들인  (0) 2023.06.26
Node에 대하여(2)  (2) 2023.05.01
Tailwind 사용기 (1)  (0) 2023.04.15
box와 inline 차이는?  (0) 2022.09.16
JavaScript와 HTML의 연결성(2)  (0) 2022.09.02
'FE/HTML CSS 자바 스크립트' Related Articles more