[TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드로의 접근
HTML 문서에서 HTML DOM 노드에 접근하는 방법은 다음과 같다.
1. getElementsByTagName() 메소드를 이용하는 방법
2. 노드 간의 관계를 이용하는 방법
getElementsByTagName() 메소드를 이용하는 방법
https://cheolyong.tistory.com/295
[TCP School/자바스크립트] 문서 객체 모델(DOM) - DOM 요소
DOM 요소의 선택 HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야 한다. 자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같다. 1. HTML 태그 이름을 이용한 선택 2. 아이디를 이용
cheolyong.tistory.com
링크 참조
노드 간의 관계를 이용하는 방법
HTML DOM에서 노드 간의 관계는 다음과 같은 프로퍼티로 정의된다.
1. parentNode : 부모 노드
2. childNodes : 자식 노드
3. firstChild : 첫 번째 자식 노드
4. lastChild : 마지막 자식 노드
5. nextSibling : 다음 형제 노드
6. previousSibling : 이전 형제 노드
노드에 대한 정보
노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.
1. nodeName
2. nodeValue
3. nodeType
nodeName
nodeName 프로퍼티는 노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티이다.
요소 노드의 nodeName 프로퍼티는 언제나 해당 HTML 요소의 태그 이름을 대문자로 저장한다.
| 노드 | 프로퍼티 값 |
| 문서 노드(document node) | #document |
| 요소 노드(element node) | 태그 이름 (대문자) |
| 속성 노드(attribute node) | 속성 이름 |
| 텍스트 노드(text node) | #text |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>nodeName</title>
</head>
<body>
<h1>nodeName 프로퍼티</h1>
<p id="document"></p>
<p id="html"></p>
<script>
document.getElementById('document').innerHTML = document.childNodes[1].nodeName;
document.getElementById('html').innerHTML = document.childNodes[1].childNodes[0].nodeName;
</script>
</body>
</html>
위 예제에서 HTML 문서의 첫 번째 자식 노드는 <!DOCTYPE html>이며, 두 번째 자식 노드는 <html>이다.
nodeValue
nodeValue 프로퍼티는 노드의 값을 저장한다.
| 노드 | 프로퍼티 값 |
| 요소 노드 | undefined |
| 속성 노드 | 해당 속성의 속성값 |
| 텍스트 노드 | 해당 텍스트 문자열 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>nodeValue</title>
</head>
<body>
<h1 id="heading">nodeValue 프로퍼티</h1>
<p id="text1">텍스트</p>
<p id="text2">텍스트</p>
<script>
var headingtext = document.getElementById('heading').firstChild.nodeValue;
document.getElementById('text1').innerHTML = headingtext;
document.getElementById('text2').firstChild.nodeValue = headingtext;
</script>
</body>
</html>
innerHTML 프로퍼티 대신 firstChild.nodeValue를 사용해도 같은 결과를 얻을 수 있다.
nodeType
nodeType 프로퍼티는 노드 고유의 타입을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티이다.
대표적인 HTML 노드별 nodeType 프로퍼티 값은 다음과 같다.
| 노드 | 프로퍼티 값 |
| 요소 노드 | 1 |
| 속성 노드 | 2 |
| 텍스트 노드 | 3 |
| 주석 노드 | 8 |
| 문서 노드 | 9 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>nodeType</title>
</head>
<body>
<h1 id="heading">nodeType 프로퍼티</h1>
<p id="head"></p>
<p id="document"></p>
<script>
var headingType = document.getElementById('heading').firstChild.nodeType;
document.getElementById('head').innerHTML = headingType;
document.getElementById('document').innerHTML = document.nodeType;
</script>
</body>
</html>
파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급한다.
하지만 익스플로러는 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급하지 않는다.
따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 하면 브라우저 간에 차이가 발생하게 된다.
이 때 nodeType 프로퍼티를 사용해서 차이를 없앨 수 있다.
var lastNode;
function findLastChild(parentNode) {
lastNode = parentNode.lastChild;
while (lastNode.nodeType != 1) {
lastNode = lastNode.previousSibling;
}
}
function printLastChild() {
var parentNode = document.getElementById("parentNode");
findLastChild(parentNode);
document.getElementById("nodename").innerHTML = lastNode.nodeName;
}TCP School의 강의 내용을 정리한 포스트입니다.
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'공부 > JavaScript' 카테고리의 다른 글
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드의 관리 (0) | 2023.04.24 |
|---|---|
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드리스트 (0) | 2023.04.24 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드 (0) | 2023.04.24 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - DOM 요소 (0) | 2023.04.24 |
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - Document 객체 (0) | 2023.04.24 |
