DOM (Document Object Model)
- 문서 객체 모델
- HTML, XML 문서의 인터페이스
- 문서의 구조화 된 표현 제공
ex)
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width">
<title>제목</title>
</head>
<body>
<h1>DOM 문서구조</h1>
<ul>
<li><a href="http://www.google.com" id="link1">구글</a></li>
<li><a href="http://www.naver.com" id="link2">네이버</a></li>
</ula>
</body>
</html>
노드 (Node)
| 값 |
노드 분류 |
설명 |
nodeName |
nodeValue |
| 1 |
엘리먼트 노드 |
Element |
태그 하나 |
태그 이름 |
Null |
| 2 |
속성 노드 |
Attribute |
태그 속성 |
태그 속성 |
속성값 |
| 3 |
텍스트 노드 |
Text |
태그 안 내용 |
#text |
내용 |
| 8 |
주석 노드 |
Comment |
주석 |
#comment |
내용 |
| 9 |
문서 노드 |
Document |
문서 전체 |
#document |
내용 |
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width">
<title>제목</title>
</head>
<body>
<h1>DOM 문서구조</h1>
<ul>
<li><a href="http://www.google.com" id="link1">구글</a></li>
<li><a href="http://www.naver.com" id="link2">네이버</a></li>
</ul>
<script>
let tag = document.getElementById("title");
document.write(tag.nodeType) // 1
document.write(tag.nodeName) // H1
document.write(tag.nodeValue) // null
let tag2 = document.getElementById("link1");
document.write(tag2.nodeType) // 1
document.write(tag2.nodeName) // A
document.write(tag2.nodeValue) // null
</script>
</body>
</html>
| 속성 |
설명 |
| firstChild |
첫번째 자식 노드 구하기 |
| lastChild |
마지막 자식 노드 구하기 |
| parentNode |
부모 노드 구하기 |
| childNodes |
모든 자식 노드 구하기 |
| previousSibling |
이전 형제 노드 구하기 |
| nextSibling |
다음 형제 노드 구하기 |
| Attributes |
속성 구하기 |
| localName |
노드 명 구하기 |
| textContent |
문자열로 된 내용 구하기 |
| ownerDocument |
가장 상위 노드 구하기 |
DOM 활용 - 찾기
- ID를 이용하여 찾기 (거의 많이 사용)
- Name을 이용하여 찾기
- Class를 이용하여 찾기
- getElementsByClassName(ClassName)
- 태그 이름을 이용하여 찾기
- getElementsByTagName(name)
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width">
<title>제목</title>
</head>
<body>
<h1>DOM 문서구조</h1>
<ul>
<li>구글</li>
<li class="link-class" name="link-name">네이버</li>
<li class="link-class" name="link-name">카카오</li>
</ul>
<script>
// id 이용
document.write(document.getElementById("title").textContent); // DOM 문서구조
// name 이용
let nameArr = document.getElementsByName("link-name");
for (let i in nameArr) {
document.write(nameArr[i].firstChild.textContent); // 네이버
}
// class 이용
let classArr = document.getElementsByName("link-class");
for (let i in classArr) {
document.write(classArr[i].lastChild.textContent); // 카카오
}
// 수정
document.getElementById("title").innerText = "DOM 활용 - 찾기, 읽기, 편집";
</script>
</body>
</html>
DOM 활용 - 노드 추가
- createElement(name)
- createTextNode(text)
- createAttribute(name)
- createComment(text)
- appendChild(node)
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width">
<title>제목</title>
</head>
<body>
<h1 id="title">DOM 활용</h1>
<ul id="link">
<li>구글</li>
<li class="link-class" name="link-name">네이버</li>
<li class="link-class" name="link-name">카카오</li>
</ul>
<script>
// <li>라인</li>
let liTag = document.createElement("li");
let text = document.createTextNode("라인");
liTag.appendChild(text);
// appendChild
document.getElementById("link").appendChild(liTag);
</script>
</body>
</html>
DOM 활용 - 속성 추가
- setAttribute(name, value)
- getAttribute(name)
- setAttributeNode(name)
- getAttributeNode(node)
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width">
<title>제목</title>
</head>
<body>
<h1 id="title">DOM 활용</h1>
<ul id="link">
<li id="google"></li>
<li class="link-class" name="link-name">네이버</li>
<li class="link-class" name="link-name">카카오</li>
</ul>
<script>
// <a href="http://www.google.com">구글</a>
let linkId = document.createElement("google");
let link = document.createElemnt("a");
link.setAttribute("href", "http://www.google.com"); // 속성추가
link.innerText = "구글";
// appendChild
linkId.appendChild(link);
</script>
</body>
</html>
댓글