[TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드리스트
2023. 4. 24. 18:11
노드 리스트는 getElementsByTagName() 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체이다.
이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>nodelist</title>
</head>
<body>
<h1>노드 리스트의 텍스트 노드</h1>
<ul id="list">ul 요소 다음의 텍스트
<li>첫 번째 아이템</li>첫 번째 li 요소 다음의 텍스트
<li>두 번째 아이템</li>두 번째 li 요소 다음의 텍스트
<li>세 번째 아이템</li>세 번째 li 요소 다음의 텍스트
</ul>
<script>
var listItems = document.getElementById('list').childNodes;
for (var i = 0; i < listItems.length; i++) {
document.write(listItems[i].nodeValue + '<br>')
}
document.write('<br>')
for (var i = 0; i < listItems.length; i++) {
if (i % 2 != 0)
document.write(listItems[i].firstChild.nodeValue + '<br>')
}
</script>
</body>
</html>
HTML DOM에서 각 요소 노드 다음에는 별도의 텍스트 노드가 존재한다.
따라서 아이디가 'list'인 요소의 자식 노드 리스트의 첫 번째 자식 노드에는 아이디가 'list'인 요소 다음에 존재하는 텍스트 노드가 저장된다.
TCP School의 강의 내용을 정리한 포스트입니다.
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'공부 > JavaScript' 카테고리의 다른 글
| [TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드의 조작 (0) | 2023.04.25 |
|---|---|
| [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 |
