[javascript] Element 인터페이스 / Node 노드 추가 삭제

[javascript] Element 인터페이스 / Node 노드 추가 삭제

✔️ HTML 요소 인터페이스

: Element 인터페이스는 Document 안의 모든 객체가 상속하는 범용적인 기반 클래스이다.

(공통 메소드와 속성만 가지고 있다.)

: HTMLElement 는 HTML 에 특화된 Element 의 하위 인터페이스로서 id, style, title, dir, className 프로퍼티가 정의되어 있다.

✔️ Node

: DOM 의 기본 원자는 Node 이며, 노드는 HTML 문서의 트리를 구성하는 단위이다.

: Document, Element, Text, Comment 등 모두 노드로 부터 파생된다. Node의 속성은 DOM 의 모든 객체가 공통적으로 지원한다.

: HTML DOM 은 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 한다.

📓 HTML 문서의 정보는 노드 트리 라고 불리는 계층적 구조에 저장된다.

: 노드 트리는 최상위 레벨인 루트 노드로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 내려간다.

✔️ Node 노드 종류

📓 노드 종류

- 문서 노드 : HTML 문서 전체를 나타내는 노드

- 요소 노드 : 모든 HTML 요소는 요소 노드이다. 속성 노드를 가질 수 있는 유일한 노드

- 속성 노드 : 모든 HTML 요소의 속성은 속성 노드이다. 요소 노드에 관한 정보를 가지고 있다. 해당 요소 노드의 자식 노드에는 포함되지 않는다.

- 텍스트 노드 : HTML 문서의 모든 텍스트

- 주석 노드 : HTML 문서의 모든 주석

📓 노드간의 관계

: 노드 트리의 가장 상위에는 단 하나의 루트 노드가 존재한다.

: 모든 노드는 단 하나의 부모 노드를 가진다.

: 모든 요소 노드는 자식 노드를 가질 수 있다.

✨ 자손 노드는 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드이다.

✔️ 주요 속성 및 메소드

✔️ 노드 추가 및 삭제

<div id="subjectLayout" style="width: 300px; height: 300px; border: 1px solid blue;">
	<p>자바</p>
	<p>안드로이드</p>
	<p>프레임워크</p>
</div>
<hr>
<div>
	<p>
		<button type="button" onclick="fun1();">노드정보</button>
		<button type="button" onclick="fun2();">노드추가</button>
		<button type="button" onclick="fun3();">특정노드앞에노드추가</button>
		<button type="button" onclick="fun4();">노드삭제</button>
		<button type="button" onclick="fun5();">스타일속성없애기</button>
	</p>
</div>

👩‍💻 속성 및 자식 노드 확인버튼

function fun1() {
	// 속성 및 자식 노드 확인하기
	const div = document.getElementById("subjectLayout");
	let str;
	
	// 속성 추가
	div.setAttribute("title", "과목");
	
	// style 속성 알아보기
	str = div.getAttribute("style");
	
	// 자식노드수(공백도 노드의 자식으로 간주)
	// str += "\n자식노드수 : " + div.childNodes.length; // 7
	// console.log(div.childNodes); // [text, p, text, p, text, p, text]
	
	// children : 태그만 자식으로 간주
	str += "\n자식노드수 : " + div.children.length; // 3
	// console.log(div.children); // [p, p, p]
	
	alert(str);
}

💡 setAttribute : 속성 추가
getAttribute(가져올 속성) : 속성 알아보기!
children : 태그만 자식으로 간주한다. 
children.length : 태그 갯수에 맞춰서 결과가 반환된다.

👩‍💻 노드 추가

function fun2() {
	// 노드 추가(마지막에)
	const div = document.querySelector("#subjectLayout");
	
	let node = document.createElement("p");
	node.onclick = function(e) { sub(e); };
	node.setAttribute("title", "추가된과목...");
	
	let textNode = document.createTextNode("마지막...");
	node.appendChild(textNode);
	
	div.appendChild(node);
}

function sub(e) {
	alert(e.target.firstChild.nodeValue);
}

💡 createElement : 지정된 태그의 엘레멘트를 생성한다.
즉, <p></p> 와 같은 코드가 생성된다.

createTextNode : 텍스트가 찍힌다.
appendChild : 요소에 새 하위 요소를 끝에 추가한다.

👩‍💻 노드 가장 앞에 추가

function fun3() {
	const div = document.querySelector("#subjectLayout");
	
	let node = document.createElement("p");
	let textNode = document.createTextNode("앞...");
	node.appendChild(textNode);
	
	// 가장 앞에 추가
	div.insertBefore(node, div.children[0]);
}

💡 insertBefore : 지정된 하위 노드 앞에 새 노드를 추가한다.

👩‍💻 가장 앞 노드 삭제

function fun4() {
	// 가장 앞 노드 삭제
	const div = document.querySelector("#subjectLayout");
	
	if(div.children.length >= 1) {
		div.removeChild(div.children[0]);
	}
}

💡 removeChild 는 노드를 삭제한다.

👩‍💻 스타일 속성 제거

function fun5() {
	const div = document.querySelector("#subjectLayout");
 
	// div.style.border = "none";
	div.style.removeProperty("border");
}

💡 removeProperty : 속성을 제거한다.