728x90
반응형
# 문서 객체 모델(Document Object Model)
XML이나 HTML문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
<html lang="ko">
<head>
<title>간단한 HTML 문서</title>
</head>
<body>
<h2>HTML 문서</h2>
<img src="images/apple.png">
</body>
</html>
● document
웹 페이지 그 자체를 의미합니다. 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 document 객체로부터 시작해야 합니다.
메소드
| getElementsByTagName() | 해당 태그 이름의 요소를 모두 선택합니다. |
| getElementById() | 해당 아이디의 요소를 선택합니다. (id는 중복xx) |
| getElementsByClassName( | 해당 클래스에 속한 요소를 모두 선택합니다. |
| getElementsByName() | 해당 name 속성값을 가지는 요소를 모두 선택합니다. |
| querySelectorAll() | 해당 선택자로 선택되는 요소를 모두 선택합니다. |
예시 1)
<body>
<h2 name="ryang">문서 객체 모델 - 1</h2>
<ul>
<li>김사과</li>
<li id="lee">이메론</li>
<li class="hot">오렌지</li>
<li id="lee">반하나</li>
<li class="hot">박수박</li>
<li name="ryang">박하량</li>
<li class="add">김씨</li>
<li class="add">박씨</li>
<li class="add">임씨</li>
</ul>
</body><script>
'use strict'
const tn = document.getElementsByTagName("li");
for(let i=0; i<tn.length; i++){
tn.item(i).style.color = "deepskyblue"; // item : 각각의 요소들을 뜻함
}
const id = document.getElementById("lee");
id.style.color = "deeppink";
const cl = document.getElementsByClassName("hot");
for(let i=0; i<cl.length; i++){
cl.item(i).style.color = "green";
}
const ryang = document.getElementsByName("ryang");
for(let i=0; i<ryang.length; i++){
ryang.item(i).style.color = "gold";
}
const query = document.querySelectorAll("li.add");
for(let i=0; i<query.length; i++){
query.item(i).style.color = "gray";
}
</script>
예시 2)
<body>
<h2>문서 객체 모델 - 2</h2>
<div>
<nav id="gnb">
<ul>
<li class="first">내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</nav>
</div>
</body><script>
'use strict'
window.onload = function(){ // 모든 문서를 다 읽은 후 실행
const gnb = document.getElementById('gnb');
console.log(gnb.parentNode);
}
</script>
<script>
'use strict'
window.onload = function(){ // 모든 문서를 다 읽은 후 실행
const gnb = document.getElementById('gnb');
console.log(gnb.children[0]);
}
</script>
<script>
'use strict'
window.onload = function(){ // 모든 문서를 다 읽은 후 실행
const gnb = document.getElementById('gnb');
console.log(gnb.children[0].nextElementSibling); // 형제 태그 xx
}
</script>
<script>
'use strict'
window.onload = function(){ // 모든 문서를 다 읽은 후 실행
const gnb = document.getElementById('gnb');
console.log(gnb.children[0].children[1]);
}
</script>
<script>
'use strict'
window.onload = function(){ // 모든 문서를 다 읽은 후 실행
const gnb = document.getElementById('gnb');
console.log(gnb.children[0].children[1].nextElementSibling);
}
</script>
<script>
'use strict'
window.onload = function(){ // 모든 문서를 다 읽은 후 실행
const gnb = document.getElementById('gnb');
console.log(gnb.children[0].firstChild);
}
</script>
* 빈 텍스트 처리
익스플로러를 제외한 대부분의 브라우저는 요소와 요소 사이에 빈 공백 또는 개행이 이루어지면 텍스트노드로 처리됩니다. 따라서 노드간의 관계에 텍스트 노드가 중간에 사용되면 노드 이동이 불명확해 질 수 있습니다.
728x90
반응형
'🎨 Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 15. 폼(Form) 객체 / 정규식 표현 (0) | 2020.09.19 |
|---|---|
| [JavaScript] 14. 노드(Node) (0) | 2020.09.19 |
| [JavaScript] 12. 브라우저 객체 모델(Browser Object Model) (0) | 2020.09.19 |
| [JavaScript] 11. 내장 객체(Math, String, Data) (0) | 2020.09.15 |
| [JavaScript] 10. 객체(Object) (0) | 2020.09.11 |
