[javascript] 노드 찾기 (자식/부모/형제) / innerText, innerHTML

[javascript] 노드 찾기 (자식/부모/형제) / innerText, innerHTML

✔️ 자식 노드 검색

<div>
	<p><a>HTML</a></p>
	<p class="css"><a>CSS</a></p>
	<p>
		<a>javascript</a>
		<span>jquery</span>
	</p>
</div>

// 자식 노드 검색
var ps = document.getElementsByTagName("p");
 
var c1 = ps[2].childNodes; // text(문자열, 공백, 엔터)등도 검색
var c2 = ps[2].children; // 태그만 검색
var c3 = ps[2].getElementsByTagName("a");
var c4 = ps[2].getElementsByTagName("a")[0];
console.log(c1); // [text, a, text, span text]
console.log(c2); // [a, span]
console.log(c3); // [a]
console.log(c4); // <a>javascript</a>

👩‍💻 childNodes 는 text(문자열, 공백, 엔터) 등도 검색한다.

ps[2].childNodes; 는 3번째 p 태그의 자식들 노드 정보를 반환한다.

	<p>
		<a>javascript</a>
		<span>jquery</span>

💡 공백, 엔터도 검색한다.

👩‍💻 children 는 태그만 검색한다.

console.log(c2); // [a, span]

👩‍💻 var c4 = ps[2].getElementsByTagName("a")[0]; 

태그 이름에 순번을 붙이면 모두 출력된다.

✔️ 부모 노드 검색

<div class="ss">
	<div class="s">
		<div class="c1">javascript</div>
		<div class="c2">css</div>
	</div>
</div>

var dc = document.querySelector(".c1");
// 부모 검색
var p1 = dc.parentNode; // 부모노드. 빈공간을 포함
var p2 = dc.parentElement; // 부모노드(태그 만)
var p3 = dc.parentElement.parentElement; // 부모의 부모
console.log(p1); //div.s
console.log(p2);  //div.s
console.log(p3);  //div.ss

👩‍💻 parentNode : 부모 노드를 반환하는데 빈공간을 포함한다. (div.s)

parentElement 는 태그 정보만 반환한다. (div.s)

parentElement.parentElement; 는 부모의 부모! (div.ss)

✔️ 형제 노드 검색

var s1 = dc.nextSibling; // 텍스트 빈공간도 포함
var s2 = dc.nextElementSibling; // 태그만
console.log(s1); // javascript의 형제... #text (공백이 있어서 그럼)
console.log(s2); // css

✔️ 텍스트 검색

var t = s2.firstChild.nodeValue; //firstChild.nodeValue; 이거 자주씀!!!
console.log(t);

✔️ innerText, innerHTML

	const pc = document.querySelector(".pc");
	
	var c1 = pc.firstChild.nodeValue;
	var c2 = pc.innerText;
	var c3 = pc.innerHTML; //안에 들어있는 모든 html을 긁어오는 것이다.
	
	console.log(c1); //null
	console.log(c2); //자바 (눈에 보이는거)
	console.log(c3); //<span style="color:red;">자바</span>
	
	var s = "<span style='color:red;'>자바스크립트</span>";
	const pc2 = document.querySelector(".pc2");
	const pc3 = document.querySelector(".pc3");
	
	pc2.innerText = s; //그대로 텍스트로 인식해서 때려박음 
	pc3.innerHTML = s; //html 로 인식해서 적용해버려