문서객체모델(DOM)
달리고 달려 도착한 책의 마지막 챕터 :)
웹에서 자바스크립스를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것
→ 웹 문서의 모든 요소를 따로 제어할 수 있어야 함
문서 객체 모델(DOM)
: 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
DOM을 구성하는 기본 원칙
- 모든 HTML 태그는 요소 노드입니다.
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드입니다.
- HTML 태그에 있는 속성은 자식 노드인 속성 노드입니다.
- 주석은 주석 노드입니다.
DOM에 접근하기
getElementById(id) : id명으로 접근
getElementsByClassName(class) : 클래스 명으로 접근하며 여러 요소가 배열 형태로 저장됨
getElementsByTagName(tag) : 태그명으로 접근하며 여러 요소가 배열 형태로 저장됨
querySelector() : id명이나 선택자를 사용해 접근
querySelectorAll() : 클래스명이나 태그명의 선택자를 사용해 접근, 여러 노드가 노드리스 형태로 저장됨
속성 가져오기 및 수정하기
getAttribute(속성)
: 태그해서 사용한 속성값을 가져옴
getAttribute(속성, 값)
: 태그의 속성을 특정한 값으로 지정
이벤트 처리하기
요소.addEventListener(이벤트, 함수, 캡쳐 여부)
CSS 속성에 접근하기
document.요소명.style.속성명
▽ 텍스트 노드를 사용하는 새로운 요소 추가하기
| 순서 | 매서드 | 설명 |
| 1 | createElement() | 새로운 요소 노드를 만듦 |
| 2 | createTextNode() | 새로운 텍스트 노드를 만듦 |
| 3 | appendChild() | 텍스트 노드를 요소 노드의 자식으로 연결 |
| 4 | appendChild() | 요소 노드를 DOM에 연결 |
▽ 속성값이 있는 새로운 요소 추가하기
| 순서 | 매서드 | 설명 |
| 1 | createElement() | 새로운 요소 노드를 추가 |
| 2 | createAttribute() | 새로운 속성 노드를 추가 |
| 3 | 속성값 지정하기 | 속성값을 프로퍼티로 지정 |
| 4 | setAttributeNode() | 속성 노드를 요소 노드의 자식으로 연결 |
| 5 | appendChild() | 요소 노드를 DOM에 연결 |
노드삭제
: parentNode 프로퍼티로 부모 노드를 찾아서 부모 노드에서 삭제
부모노드.removeChild(자식노드)
마무리 문제 ♥♡
1. 체크 표시를 누르면 항목 텍스트의 글자가 회색으로 바뀌면서 가로줄이 그려지는 소스를 작성하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 1</title>
<style>
ul{
list-style: none;
}
li {
font-size:20px;
line-height: 35px;
}
.check {
color:#999;
font-size:20px;
margin-right:25px;
}
</style>
</head>
<body>
<h1>할 일 목록</h1>
<ul>
<li><span class="check">✓</span>할 일 1 </li>
<li><span class="check">✓</span>할 일 2 </li>
<li><span class="check">✓</span>할 일 3 </li>
<li><span class="check">✓</span>할 일 4 </li>
<li><span class="check">✓</span>할 일 5 </li>
</ul>
<script>
var checks = document.querySelectorAll(".check");
for(var i = 0; i < checks.length; i++) {
checks[i].addEventListener("click", function() {
this.style.color = "#ccc";
this.parentNode.style.color = "#ccc";
this.parentNode.style.textDecoration="line-through";
});
}
</script>
</body>
</html>
2. 행과 열의 개수를 입력한 값에 따라 표를 그리는 소스를 작성하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
form {
margin-bottom:30px;
}
input[type="text"] {
width:30px;
height:20px;
text-align: center;
}
button {
margin-left:10px;
}
table {
width:300px;
}
table, td {
border:1px solid #ccc;
border-collapse: collapse;
}
td {
padding:10px;
}
</style>
</head>
<body>
<form>
<input type="text" id="rCount" value="1">행
<input type="text" id="cCount" value="1">열
<button onclick="drawTable(); return false;">작성</button>
</form>
<div id="contents"></div>
<script>
function drawTable() {
var rCount = document.querySelector("#rCount").value;
var cCount = document.querySelector("#cCount").value;
var newTable = document.createElement("table");
for(i = 0; i < rCount; i++) {
var newRow = document.createElement("tr");
for(j = 0; j < cCount; j++) {
var newCell = document.createElement("td");
var cellText = document.createTextNode(i + ", " + j);
newCell.appendChild(cellText);
newRow.appendChild(newCell);
}
newTable.appendChild(newRow);
}
var contents = document.querySelector("#contents");
contents.appendChild(newTable);
}
</script>
</body>
</html>'HTML_CSS_JavaScript' 카테고리의 다른 글
| 웹 사이트 시작 화면 만들기 (0) | 2023.03.15 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑨ (0) | 2023.03.13 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑧ (0) | 2023.03.09 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑦ (0) | 2023.03.08 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |