반응형
문서 객체 모델 DOM (Document Object Model)
DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스로, 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.
즉, 소스 코드 내 객체들을 트리 구조로 표현하는 형식
HTML DOM
HTML 문서를 조작하고 접근하는 표준화된 방법.
즉, 모든 HTML 요소를 조작하고 접근하고자 할 때, HTML DOM을 통해 접근이 가능하다.
Document method
HTML 요소와 관련된 작업을 도와주는 다양한 메서드를 제공한다.
1. 선택 메서드
document.getElementById()
document.getElementByClassName()
document.getElementByName()
document.querySelectorAll()
document.querySelector()
2. 생성 메서드
document.createElement()
document.write()
3. 이벤트 핸들러 추가
요소.click = function( ) { ... }
[DOM 요소 선택]
// HTML <img> 요소를 선택하도록 코드를 작성하세요.
var imgs = document.getElementsByTagName("img");
// HTML <div> 요소를 선택하도록 코드를 작성하세요.
var selectedTagName = document.getElementsByTagName("div");
// 아이디가 “gtomato"인 요소를 선택하도록 코드를 작성하세요.
var selectedId = document.getElementById("gtomato");
// 클래스가 "vegetable"인 모든 요소를 선택하도록 코드를 작성하세요.
var selectedClassNameS = document.getElementsByClassName("vegetable");
// name 속성값이 "tomato"인 모든 요소를 선택하도록 코드를 작성하세요.
var selectedNameS = document.getElementsByName("tomato");
// 선택된 요소들을 출력합니다. 출력 순서를 변경하면 오답 처리가 됩니다.
document.write(imgs + "<br>");
document.write(imgs[0] + "<br>");
document.write(selectedTagName + "<br>");
document.write(selectedId + "<br>");
document.write(selectedClassNameS + "<br>");
document.write(selectedNameS[0] + "<br>");
document.write(selectedTagName[1].textContent + "<br>");
document.write(selectedId.textContent + "<br>");
document.write(selectedClassNameS[2].textContent + "<br>");
document.write(selectedNameS[0].textContent + "<br>");
DOM 트리 구조
자주 쓰이는 자바스크립트 선택 메서드 : getElementsByTagName
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 기초</title>
</head>
<body>
<div name="red" class="fruit" id="apple">apple</div>
<div name="yellow" class="fruit" id="banana">banana</div>
<div name="red" class="vegetable" id="carrot">carrot</div>
<div name="white" class="vegetable" id="onion">onion</div>
<script src="index.js"></script>
</body>
</html>// alert("Hello world!");
// HTML <div> 요소를 선택하도록 코드를 작성하세요
var selectedTagName = document.getElementsByTagName('div');
// 아이디가 “banana"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElementById('banana') ;
// 클래스가 "vegetable"인 모든 요소를 선택하도록 코드를 작성하세요
var selectedClassNameS = document.getElementsByClassName('vegetable');
// name 속성값이 "red"인 모든 요소를 선택하도록 코드를 작성하세요
var selectedNameS = document.getElementsByName('red');
// 선택된 요소들을 출력합니다.
document.write(selectedTagName);
document.write(selectedId);
document.write(selectedClassNameS);
document.write(selectedNameS);
DOM 요소의 스타일 변경: selectedId.style.colo
// 아이디가 "apple"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElementById("apple");
// 선택한 요소의 색깔을 red로 바꿉니다.
selectedId.style.color = "red";
// 아이디가 "banana"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElementById("banana");
// 선택한 요소의 색깔을 yellow로 바꿉니다.
selectedId.style.color = "yellow";
DOM 요소의 내용 변경: innerHTML
// 아이디가 "apple"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElementById('apple');
// 선택한 요소의 내용을 "strawberry"로 바꿉니다.
selectedId.innerHTML = "strawberry";
// 아이디가 "onion"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElementById('onion');
// 선택한 요소의 내용을 "garlic" 바꿉니다.
selectedId.innerHTML = "garlic";
반응형
'프론트엔드 > javascript' 카테고리의 다른 글
| [javascript] IndexedDB 브라우저 스토리지 (0) | 2022.09.27 |
|---|---|
| [javascript] 파일 리더기, FileReader( ) 및 callback (0) | 2022.09.27 |
| [javascript] 이벤트(Event) (1) | 2022.09.20 |
| [javascript] 노드(Node)와 노드 트리 (0) | 2022.09.20 |
| [javascript] 기본 문법 (0) | 2022.09.19 |