[JavaScript] Node 객체
- 웹/자바스크립트
- 2021. 7. 12.
JAVASCRIPT / NODE
Node
DOM객체의 모든 것은 Node에 속한다.
요소를 더욱 세분화 하면 element node와 text node로 나눌 수 있다.
(주석은 comment node)
각각의 노드에 접근하고 변경할 수 있다.
element node, text node
element node
HTML의 태그들이라고 생각하면 된다. (<p>, <div> 등 )
ex > <p> 이거는 text node 입니다. </p>
text node
각각의 태그 사이에 들어가는 정보
ex > <p> 이게 text node 입니다. </p>
문법
// element node에 text node를 삽입한다.
element_node.appendChild(text_node)
// text node가 삽입된 (안돼도 됨) element node를 html 요소의 맨 뒤에 추가한다
element.appendChild(element_node)
element node ,text node생성
// 1. p 태그를 생성하는 변수 생성 (new_para)
const new_para = document.createElement("p");
// 2. 텍스트를 담고 있는 textNode 생성
const text_node = document.createTextNode("This is new paragraph");
// 3. element node(new_para)에 text node 추가
new_para.appendChild(text_node);element node와 text node 를 생성하고 두개를 연결하면
<p>This is new paragraph</p> 이런 형태를 담고 있는 노드가 된다.
예제
버튼 클릭시 특정 id를 가진 <div>태그에 node 삽입
<!DOCTYPE html>
<head>
<meta charset="euc-kr">
</head>
<body>
<button onclick="doPush();">Push</button>
<div id="content">
<p>This is paragrape 1.</p>
<p>This is paragrape 2.</p>
</div>
<script>
const content = document.getElementById("content");
function doPush() {
const new_para = document.createElement("p");
const text_node = document.createTextNode("This is new paragraph");
new_para.appendChild(text_node); // new_para에 text_node를 뒤에 추가
content.appendChild(new_para); // content(<div>)맨뒤에 new_para를 추가
}
</script>
</body>
</html>
버튼을 누를 때 마다 영역의 맨 뒤에 node가 추가 된다.
특정 요소 앞에 node 추가
기본적인 appendChild(node)는 맨 뒤에 추가를 하지만
insertBefore(node, element)를 사용하면 특정 요소 앞에 추가할 수 있다.
// content.appendChild(new_para); : 맨 뒤에 추가
var first_para = document.querySelector("#content > p:first-child"); // 특정 요소 선택
content.insertBefore(new_para, first_para); // first_para 앞에 new_para 추가id가 content인 요소 안에 p태그중 첫번째 요소 앞에 노드가 추가 된다.
요소 제거
element.remove() 를 사용하면 해당 요소를 제거할 수 있다.
element_to_delete = document.querySelector("#content > :last-child");
element_to_delete.remove();id가 content인 요소 안에 마지막 요소를 제거한다.
'웹 > 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 숫자 타입 메소드 (0) | 2021.07.13 |
|---|---|
| [JavaScript] 자바스크립트 문자열 메소드 (0) | 2021.07.13 |
| [JavaScript] 자바스크립트 비교연산 (0) | 2021.07.10 |
| [JavaScript] element.style.property / HTML요소의 스타일 변경 (0) | 2021.07.09 |
| [JavaScript] element.getAttribute / 요소의 속성값에 접근 (0) | 2021.07.09 |