Javascript 특정 자식 노드 찾기 - Javascript teugjeong jasig nodeu chajgi

Question

어제 오늘 내일

Javascript를 이용하여

dom에서 특정 부모 노드가 가지는 특정 자식 노드를 찾는 방법입니다.

부모 노드를 선택합니다.
부모 노드에서 특정 자식 노드를 선택합니다.

부모 노드를 선택하거나,

특정 자식 노드를 선택할 때

getElementById(), getElementsByClassName(), querySelector() 등의

노드 선택 함수를 사용할 수 있습니다.

노드를 선택하는 방법은 지난 포스팅을 참조하세요.

[Javascript] 선택자, DOM 특정 요소(element) 찾기

Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName() 4. querySelector() 5. querySelectorAll() 1. getElementById(..

hianna.tistory.com

예제

<ul id='fruit'>
  <li class='p1'>바나나</li>
  <li class='p2'>사과</li>
</ul>
<ul id='animal'>
  <li class='p1'>강아지</li>
  <li class='p2'>토끼</li>
</ul>

<div> ======== 결과 ======== </div>

// animal element 선택
const parent = document.getElementById('animal');

const p1 = parent.getElementsByClassName('p1');

// animal 중 p1 class 노드 값 찍기
document.write(p1.length); // 1
document.write('<br>');
document.write(p1[0].innerText); // 강아지

위 예제의 dom에는 'fruit', 'animal' 2개의 <ul>이 있습니다.

그리고, 그 2개의 <ul> 하위에는

'p1', 'p2' 클래스를 가지는 <li>가 각각 존재합니다.

여기서는 'animal' 노드 하위에 'p1' 클래스를 가지는 노드를 선택하려고 합니다.

'fruit' 노드 하위의 'p1' 클래스를 선택해서는 안됩니다.

const parent = document.getElementById('animal');

부모 노드를 먼저 선택합니다.

const p1 = parent.getElementsByClassName('p1');

클래스 이름으로 부모 노드 하위의 노드를 검색합니다.

동일한 클래스 이름은 여러번 중복될 수 있기 때문에

getElementsByClassName() 함수는 유사 배열 형태인 HTMLCollection을 리턴합니다.

p1.length;

p1[0].innerText;

'animal' 노드 하위의 'p1' 클래스 노드는 1건입니다.

그리고, 그 노드의 텍스트는 '강아지'입니다.

예제에서는 하위의 특정 노드를 선택하기 위해

getElementsByClassName() 메소드를 사용하였지만

getElementById()를 사용하여 id로 노드를 검색하거나,

getElementByTagName()을 사용하여 태그 이름으로 노드를 검색할 수도 있습니다.

querySelector(), querySelectorAll() 함수를 사용하여

id, 클래스 이름, 태그 이름 등 다양한 형태로 노드를 검색할 수도 있습니다.

자세한 방법은 아래의 지난 포스팅을 참조하세요.

[Javascript] 선택자, DOM 특정 요소(element) 찾기

Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName() 4. querySelector() 5. querySelectorAll() 1. getElementById(..

hianna.tistory.com

getElementsByTagName(), getElementsByClassName() : 의 결과 값은 검색된 모든 노드를 NodeList 라는 객체에 담아서 반환이 됨. NodeList 는 자주 사용하는 배열과 비슷한 일종의 ArrayList 컬렉션 객체로 DOM 객체 중 하나임.

createElement() : 노드 생성 및 추가

createTextNode() : 텍스트 노드 생성 및 추가

appendChild() : 특정 태그의 자식 노드로 추가

insertBefore() : 특정 노드 이전에 노드 추가

NodeList 객체에서 제공하는 프로퍼티와 메서드
- length : 결과 값의 전체 갯수 정보가 담겨져 있음.
- item() : 결과 값을 항목별로 접근할 때 사용함.

- childNodes : 모든 자식 노드의 정보가 담겨져 있음.

- parentNode : 부모 노드의 정보가 담겨져 있음.

- previousSibling.previousSibling : 현 위치에서 이전 형제 노드

- nextSibling.nextSibling : 현 위치에서 이후 형제 노드

기본 뼈대

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<div id="sample_page" class="page">
		샘플 페이지(div, id=sample_page class=page)
		<div id="header">
			헤더 영역(div, id=header)
		</div> <!-- id="header" end -->
		
		<div id="content" class="sample_content">
			콘텐트 영역(div, id=content class=sample_content)
			<div>
				JavaScript란?(div)
				<p id="data_1">자바스크립트 Core(p, id=data_1)</p>
				<p id="data_2">자바스크립트 BOM(p, id=data_2)</p>
				<p id="data_3">자바스크립트 DOM(p, id=data_3)</p>
			        을 배운다는 것.
			</div>
			
			<div class="content_data">
				JavaScript에서 배울 내용(div, class=content_data)
				<p>1. JavaScript DOM(p)</p>
				<p>2. JavaScript Ajax(p)</p>
			</div> <!-- class="content_data" end -->
			
			<div class="content_data">
				JQuery에서 배울 내용(div, class=content_data)
				<p>1. JQuery DOM(p)</p>
				<p>2. JQuery Ajax(p)</p>
			</div>
		</div> <!-- id="content" class="sample_content" end -->
		
		<div id="footer">
			푸터 영역(div, id=footer)
		</div> <!-- id="footer" end -->
	</div> <!-- id="sample_page" class="page" end -->
	
</body>
</html>

특정 태그의 n번째 노드에 접근하기

<script type="text/javascript">

	// 문서에서 특정 태그 이름을 지닌 노드를 찾자.
	onload = function() {
		// 문서에서 태그 이름이 div인 노드를 찾아보자.
		let divs = document.getElementsByTagName("div");
		
		alert("문서 내의 div 태그 갯수 >>> " + divs.length);
		
		for(let i=0; i<divs.length; i++) {
			// item() : 찾은 노드에서 n번째 노드에 접근하는 메서드.
			let div = divs.item(i);
			div.style.border = "1px solid red";
		}
	}

</script>

자식 노드에서 특정 태그 이름을 반환받아 특정 위치의 노드 찾기

<script type="text/javascript">

	// 특정 노드의 자식 노드에서 특정 태그 이름을 지닌 노드 찾기
	onload = function() {
		let divs = document.getElementsByTagName("div");
		
		// 찾은 노드 가운데 3번째(2번째 인덱스) 노드를 찾아 보자.
		let div2 = divs[2];
		
		let div2Child = div2.getElementsByTagName("div");
		
		for(let i=0; i<div2Child.length; i++) {
			div2Child[i].style.border = "3px solid red";
		}
		
	}


</script>

특정 클래스가 적용된 노드 찾기

<script type="text/javascript">

	// 문서에서 특정 클래스가 적용된 노드를 찾기
	onload = function() {
		let content = 
			document.getElementsByClassName("content_data");
		
		alert("content_data 요소 갯수 >>> " + content.length);
		
		for(let i=0; i<content.length; i++) {
			content[i].style.border = "3px solid blue";
		}
	}
	
</script>

특정 ID를 가진 노드 찾기

<script type="text/javascript">

	// 문서에서 특정 ID를 가진 노드를 찾기
	onload = function() {
		let header = document.getElementById("header");
		let footer = document.getElementById("footer");
		
		header.style.border = "3px solid red";
		
		footer.style.border = "3px solid blue";
	}

</script>

자식 노드 찾기

<script type="text/javascript">

	// 문서에서 자식 노드를 찾기
	onload = function() {
		let page = document.getElementById("sample_page");
		let nodes = page.childNodes;
		
		alert("#sample_page의 자식 노드 갯수 >>> " + nodes.length);
		
		// 자식 노드 중에서 첫번째 자식 노드 접근.
		let firstChild = page.firstChild;
		
		// 텍스트 노드는 스타일을 적용할 수 없음.
		firstChild.style.border = "3px solid red";
		
		// 자식 노드 중에서 첫번째 자식 노드 접근.
		let lastChild = page.lastChild;
		
		// 텍스트 노드는 스타일을 적용할 수 없음.
		lastChild.style.border = "3px solid red";
	}
	
</script>

텍스트 노드는 스타일을 적용할 수 없으므로 스타일이 변화하지 않는다.

부모 노드 찾기

<script type="text/javascript">

	// 문서에서 부모 노드를 찾기
	onload = function() {
		// #header인 노드의 부모 노드 찾기
		let header = document.getElementById("header");
		
		// let parent = header.parentNode;
		
		header.parentNode.style.border = "3px solid blue";
		
		// [문제] id="data_1" 노드의 부모 노드를 찾아서 스타일을 적용해 보기.
		//       스타일 : 3px solid red
		let data1 = document.getElementById("data_1");
		
		data1.parentNode.style.border = "3px solid red";
		
	}


</script>

형제 노드 찾기

<script type="text/javascript">

	// 문서에서 형제 노드를 찾기
	onload = function() {
		let content = document.getElementById("content");
		
		// 내 위치에서 이전 형제 노드를 찾는 방법
		let pre = content.previousSibling.previousSibling;
		
		pre.style.border = "3px solid red";
		
		// 내 위치에서 이후 형제 노드를 찾는 방법
		let next = content.nextSibling.nextSibling;
		
		next.style.border = "3px solid blue";
	}


</script>

Document.createElement() 메서드를 이용하여 노드 생성 및 추가하기

<script type="text/javascript">

	onload = function() {
		// 1. 추가(p태그 추가)
		let page = document.getElementById("sample_page");
		
		// 기준  노드를 찾아 보자.
		let firstChild = page.firstChild;
		
		// <p> 태그를 동적으로 생성.
		let pNode = document.createElement("p");
		
		// 텍스트 노드도 동적으로 생성.
		let textNode = document.createTextNode("추가내용1");
		
		// p태그의 자식노드로 텍스트 노드를 추가.
		pNode.appendChild(textNode);
		
		pNode.style.border = "3px solid red";
		
		page.insertBefore(pNode, firstChild);
		
		
		
		// 2. 추가(div 태그 추가)
		let content = document.getElementById("content");
		
		let div1 = document.createElement("div");
		
		let textNode1 = 
			document.createTextNode("생성할 노드가 많은 경우, ");
		
		let span1 = document.createElement("span");
		
		let textNode2 = document.createTextNode("어떤 방법을? ");
		
		span1.appendChild(textNode2);
		
		let textNode3  = document.createTextNode("사용해야 할까요?");
		
		// div 태그에 자식노드로 텍스트 노드와 span태그를 추가해 주어야 한다.
		div1.appendChild(textNode1);
		div1.appendChild(span1);
		div1.appendChild(textNode3);
		
		div1.style.border = "3px solid blue";
		
		// 생성된 div 태그를 content id의 윗쪽에 추가
		page.insertBefore(div1, content);
		
		// 3. 추가(p태그 추가)
		let p2Node = document.createElement("p");
		
		let textNode4 = document.createTextNode("추가내용2");
		
		p2Node.appendChild(textNode4);
		
		p2Node.style.border = "3px solid red";
		
		page.appendChild(p2Node);
		
	}
	
</script>

Node.cloneNode() 메서드를 이용하여 노드 생성

<script type="text/javascript">

	onload = function() {
		
		let page = document.getElementById("sample_page");
		
		let first = page.firstChild;
		
		let pNode = document.createElement("p");
		
		let textNode = document.createTextNode("추가내용1");
		
		pNode.appendChild(textNode);
		
		pNode.style.border = "3px solid red";
		
		page.insertBefore(pNode, first);
		
		// pNode를 그대로 복사
		let p2Node = pNode.cloneNode(true);
		
		p2Node.firstChild.nodeValue = "추가내용2";
		
		page.appendChild(p2Node);
		
	}

</script>

노드 삭제

<script type="text/javascript">

	// 문서에서 노드를 삭제하기
	onload = function() {
		// 지우려고 하는 노드가 포함된 부모 노드를 찾기.
		let page = document.getElementById("sample_page");
		
		// 지우려는 노드를 찾자.
		let content = document.getElementById("content");
		
		// 부모 노드의 removeChild() 메서드를 이용하면 됨.
		page.removeChild(content);
	}
	
</script>

노드 이동시키기

<script type="text/javascript">

	// 노드 이동시키기
	onload = function() {
		// 이동시킬 노드를 찾아보자.
		let header = document.getElementById("header");
		
		// 이동 위치의 노드를 구해보자.
		let content = document.getElementById("content");
		
		// header를 content의 자식 노드로 이동
		content.appendChild(header);
		
		header.style.border = "3px solid blue";
	}

</script>

javascript 자식요소 가져오기 자바스크립트 자식노드 개수 Javascript 자식 노드

Javascript 특정 자식 노드 찾기 - Javascript teugjeong jasig nodeu chajgi

어제 오늘 내일

관련 게시물

Javascript ul li 삭제 - Javascript ul li sagje

애프터이펙트 gif 고화질 - aepeuteoipegteu gif gohwajil

Function 호출 - Function hochul

자바스크립트 $ 의미 - jabaseukeulibteu $ uimi

광고하는

최근 소식

한국 가상 전화번호 만들기 - hangug gasang jeonhwabeonho mandeulgi

이케아 매트리스 방수커버 - ikea maeteuliseu bangsukeobeo

안드로이드 아이폰 벨소리 다운 - andeuloideu aipon belsoli daun

2옥 라 디시 - 2og la disi

디저트페어 2022 - dijeoteupeeo 2022

카카오톡 pc 페이스톡 카메라 오류 - kakaotog pc peiseutog kamela olyu

아스트로니어 테더 설치 - aseuteulonieo tedeo seolchi

우크라이나 우회 지원 - ukeulaina uhoe jiwon

스페이스마린 식사 - seupeiseumalin sigsa

낫또 이소 플라본 - nastto iso peullabon

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의