01. 노드 생성하기
DOM 트리를 수정하는 메서드를 배우면 HTML 코드를 자바스크립트로 자유롭게 생성하고 삭제할 수 있습니다.
🔨 노드 생성하기
var element = document.createElement(요소의 이름);
🔨 텍스트 노드 객체 생성하기
var textnode = document.createTextNode(텍스트);
creatElement로 생성한 노드 객체는 메모리에 생성되어 있을 뿐 문서의 DOM 트리와는 아무런 관계가 없습니다. createTextNode 로 만든 노드 객체도 문서의 DOM 트리와는 아무런 관계가 없습니다.
(DOM 트리의 계층 구조를 뜻하는 프로퍼티 값은 모두 null)
🔨 노드 객체를 생성하는 주요 메서드
| 메서드 | 생성하는 노드 객체 |
| document.createElement(요소 이름) | 요소 노드 객체 |
| document.createAttribute(속성 이름) | 속성 노드 객체 |
| document.createTextNode(텍스트) | 텍스트 노드 객체 |
| document.createComment(텍스트) | 주석 노드 객체 |
| document.createDocumentFragment() | 도큐먼트 프래그먼트 |
| document.importNode(다른 문서의 노드, deep) | 다른 문서에 있ㄴ는 노드를 복사한다. deep을 true로 설정하면 자식 노드까지 복사하고, false로 설정하면 얕은 복사를 한다. |
| document.cloneNode(deep) | 노드를 복사한다. deep을 true로 설정하면 자식 노드까지 복사하고, false로 설정하면 얕은 복사를 한다. |
02. 노드 삽입하기
노드 객체를 만들었으므로, DOM 트리에 삽입합니다. 노드 객체를 DOM 트리에 삽입하는 메서드는 Node 객체에 있는 appendChild와 insertBefore 메서드 입니다.
그래서 각 노드에는 DOM 트리 안의 텍스트 노드를 무시하고 HTML 문서에서 요소의 계층 구조만 가져오기 위한 프로퍼티가 마련되어 있습니다.
🔨 appendChild 메서드
요소 노드.appendChild(삽입할 노드)
해당 요소의 마지막 자식 노드로 삽입합니다.
ul 요소에 마지막 자식 요소로 <li>불독</li>를 삽입하기 위한 코드
<html>
<body>
<ul id="doglist">
<li>포메라니안</li>
<li>달마시안</li>
</ul>
</body>
</html>
<script>
var doglist = document.getElementById("doglist")
var element = document.createElement("li") // li 요소 객체를 생성한다
var text = document.createTextNode("불독") //텍스트 노드를 생성한다
doglist.appendChild(elemnet); //ul 요서에 element를 삽입한다.
element.appendChild(text); //element에 텍스트 노드를 삽입한다.
</script>
>> 결과
<ul id="doglist">
<li>포메라니안</li>
<li>달마시안</li>
<li>불독</li>
</ul>💡 appendChild 를 이용해서 노드를 옮기는 방법은 다음 포스팅에서 자세하게 다루겠습니다.
🔨 insertBefore 메서드
요소 노드.insertBefore(삽입할 노드, 자식 노드)
지정한 자식 노드 바로 앞에 노드 객체를 삽입합니다.
03. 노드 삭제하기
노드.removeChild(자식 노드)
삭제할 수 있는 노드가 해당 노드의 자식 노드라는 점에 유의합니다. 즉, 삭제하려는 노드의 부모 노드 객체에서 removeChild 메서드를 호출합니다.
03. 노드 치환하기
노드.replaceChild(새로운 노드,자식 노드)
노드의 자식 노드만 치환할 수 있다는 점에 유의합니다. 즉, 치환하려는 노드의 부모 노드에서 replaceChild 메서드를 호출합니다.
참고 문헌
📌 모던 자바스크립트 입문 책
'FRONTEND > JS' 카테고리의 다른 글
| [JS] 객체 생성과 프로토타입 (0) | 2022.03.24 |
|---|---|
| [JS] appendChild 를 이용해서 노드를 옮기는 방법 (1) | 2022.03.16 |
| [JS] innerHTML vs innerTEXT vs textContent 차이 (0) | 2022.03.13 |
| [개발의 본질] 행맨 게임 JS로 만들기 | 토이 프로젝트 01 (0) | 2022.03.13 |
| [JS] 속성 값의 읽기와 쓰기 (0) | 2022.03.12 |
