TY blog

HTML 요소 Node Property 정리, Element 요소 선택하기 본문

프로그래밍 언어/JavaScript

HTML 요소 Node Property 정리, Element 요소 선택하기

주짓수하는 개발자 2024. 1. 26. 14:11

 

1. DOM (Document Object Model)

 

문서객체의 동적으로 액세스 하고 업데이트할 수 있게 해주는 플랫폼 및 언어 중립적인 인터페이스 

 

2. Node

 

DOM의 기본 자료형, Node는 트리 구조로 계층적 관계를 맺고 있어  선택된 요소의 관계로도 요소 접근이 가능하다.

노드에는 여러 종류가 있으며, 가장 일반적인 노드 유형에는 Element Node, Text Node, Comment Node, Attribute Node 가 존재하며, DOM 트리의 모든 요소는 노드로 간주된다. 

노드 간의 관계를 이용하여 접근하기 위한 Node property

 

1. parentNode 부모 노드
2. childNodes 자식 노드 리스트
3. firstChild 첫 번째 자식 노드
4. lastChild 마지막 자식 노드
5. nextSibling 다음 형제 노드 
6. previousSibling 이전 형제 노드

 

<!DOCTYPE html>
<html>
<body>
<div id="Test0"></div>
<div id="Test">
	<h2>목록</h2>
	<ul>
		<li>항목 1</li>
		<li>항목 2</li>
		<li>항목 3</li>
	</ul>
</div>
<div id="Test2"></div>

<script>
    var test = document.getElementById("Test");

    console.log("부모 노드:", test.parentNode);

    console.log("자식 노드 목록:", test.childNodes);

    console.log("첫 번째 자식 노드:", test.firstChild);

    console.log("마지막 자식 노드:", test.lastChild);

    console.log("다음 형제 노드:", test.nextSibling);

    console.log("이전 형제 노드:", test.previousSibling);
</script>

</body>
</html>

 

위에 코드를 html로 띄워 보면 

 

html 실행결과

 

부모노드를 제외한 값에 #text 값이 들어 있는 것을 확인할 수 있는데 

이유는 Element 요소 사이에 들여쓰기한 공백이 Text node로 포함되어 있기 때문에 Text Node도 선택하는 것이다. 

 

<!DOCTYPE html>
<html>
<body>
<div id="Test0"></div><div id="Test"><h2>목록</h2><ul><li>항목 1</li><li>항목 2</li><li>항목 3</li></ul></div><div id="Test2"></div>

<script>
    // div 요소를 선택합니다.
    var test = document.getElementById("Test");

    // div 요소의 부모 노드를 출력합니다.
    console.log("부모 노드:", test.parentNode);

    // div 요소의 자식 노드 목록을 출력합니다.
    console.log("자식 노드 목록:", test.childNodes);

    // div 요소의 첫 번째 자식 노드를 출력합니다.
    console.log("첫 번째 자식 노드:", test.firstChild);

    // div 요소의 마지막 자식 노드를 출력합니다.
    console.log("마지막 자식 노드:", test.lastChild);

    // div 요소의 다음 형제 노드를 출력합니다.
    console.log("다음 형제 노드:", test.nextSibling);

    // div 요소의 이전 형제 노드를 출력합니다.
    console.log("이전 형제 노드:", test.previousSibling);
</script>

</body>
</html>

 

공백을 제외한 결과

 

HTML에 공백을 제거해서 TextNode를 제외한 Element 요소를 가져왔지만 Element 요소를 가져올 다른 방법이 있다. 

 

부모 요소의 접근

 

1. parentNode와 parentElement

 

parentNode는 부모노드를 반환하고 parentElement는 노드를 거치지 않고 Element를 반환한다.

둘 간의 차이점이 있다면 요소가 최상위 요소인 경우 parentNode는 #document를 반환하고 parentElement는 부모요소가 없기 때문에 null을 반환한다. 

 

자식 요소의 접근

 

1. NodeType을 이용한 자식 Element 접근 

 

// div 요소를 선택합니다.
var test = document.getElementById("Test");

for (var i = 0; i < test.childNodes.length; i++) {
	if (test.childNodes[i].nodeType === Node.ELEMENT_NODE) {
		console.log("Element 자식요소 :", test.childNodes[i]);
	}
}

 

NodeType 사용

 

Text Node를 포함한 자식 노드 리스트 중에 NodeType이 Element인 노드들만 선택해서 Element 요소를 접근한다.

 

2. children 속성 사용 

 

Node가 아닌 Element 요소만 포함되는 속성으로 Element 요소만을 선택할 때 사용한다.

 

var test = document.getElementById("Test");

for (var i = 0; i < test.children.length; i++) {
	console.log("Element 자식요소 :", test.children[i]);
}

 

children 속성 사용

 

형제 Element 가져오기 
// div 요소를 선택합니다.
var test = document.getElementById("Test");

// div 요소의 다음 형제 노드를 출력합니다.
console.log("다음 형제 노드:", test.nextSibling.nextSibling);

// div 요소의 이전 형제 노드를 출력합니다.
console.log("이전 형제 노드:", test.previousSibling.previousSibling);

 

형제Element 선택

 

형제 Element는 중간 옆에 공백이 들어가 TextNode가 들어가서 TextNode 다음 또는 이전의  형제노드를 선택하면 Element를 선택할 수 있다.  

저작자표시

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

HTML 요소 선택 JS 함수 정리  (0) 2023.12.31
Form submit 기본흐름 제어  (0) 2023.11.11
onfocus, onblur 이벤트  (0) 2023.09.22
JavaScript 이미지 규격 체크 onload 함수  (0) 2023.03.13
js 정규식 문자열 변환  (1) 2023.01.28
'프로그래밍 언어/JavaScript' Related Articles more
Comments