반응형
HTML DOM
Documnet Object Model (문서 객체 모델)
HTML DOM 모델은 HTML등의 문서를 위한 객체의 인터페이스라고 보면 된다.
DOM은 아래와 같은 구조로 표현된다.
DOM은 HTML의 요소를 받고, 변경하고, 추가하고, 삭제하는 방법 등을 제공한다.
1. 요소 추출 메서드
id를 받아오는 메서드는 아이디 한개만 받아오니 문법 사용에 주의해야한다.
document.getElementById("아이디");
//요소 한개 (id) 반환
//아이디는 중복되지 않으니 element, s를 붙이지 않는다.
document.getElementsByTagName("태그명");
//<h1></h1> 등의 태그. 동일한 태그명을 찾아서 배열에 담아 반환
document.getElementsByClassName("클래스명");
// 동일한 클래스명을 찾아서 배열에 담아 반환
document.getElementById
id가 h인 값만을 받아와 출력
function a() { //id=h인 값을 받아와 aaa만 추출 후 div 공간에 나타나게 해줌.
let id_h = document.getElementById("h");
//<h3 id = "h">aaa</h3> 이 내용을 id_h에 넣은 것.
let id_res = document.getElementById("res");
res.innerHTML = id_h.innerHTML;
//id로 요소 찾아오기 getElementById
// 태그 사이의 값 innerHTML
}
<body>
<!-- (결과값이 나타날 영역 div) -->
<div id="res"></div>
<input type="button" value="id로 검색" onclick="a()">
<h3 id="h">aaa</h3>
<h3 class="c1">bbb</h3>
<h3>ccc</h3>
<h3 class="c1">ddd</h3>
<h3>eee</h3>
<h3 class="c1">fff</h3>
</body>
document.getElementsByTagName
<h3></h3> 태그를 갖는 요소 모두 검색하여 출력
function b() {
let arr = document.getElementsByTagName("h3");
//태그명이 h3인 요소를 모두 추출. 무조건 배열 반환
let txt = "";
for (i = 0; i < arr.length; i++) {
txt += arr[i].innerHTML+"<br/>";
}
//id가 res인 요소의 내용으로 txt 출력
let id_res = document.getElementById("res");
res.innerHTML = txt;
}
<body>
<!-- (결과값이 나타날 영역 div) -->
<div id="res"></div>
<input type="button" value="태그명으로 검색" onclick="b()">
<h3 id="h">aaa</h3>
<h3 class="c1">bbb</h3>
<h3>ccc</h3>
<h3 class="c1">ddd</h3>
<h3>eee</h3>
<h3 class="c1">fff</h3>
</body>
document.getElementsByClassName
클래스명이 c1인 것들을 받아와 출력
function c(){
let class_c1 = document.getElementsByClassName("c1");
let txt = "";
for (i=0;i<class_c1.length; i++){
txt += class_c1[i].innerHTML+"<br/>";
}
let id_res = document.getElementById("res");
res.innerHTML = txt;
}
<body>
<!-- (결과값이 나타날 영역 div) -->
<div id="res"></div>
<input type="button" value="클래스명으로 검색" onclick="c()">
<h3 id="h">aaa</h3>
<h3 class="c1">bbb</h3>
<h3>ccc</h3>
<h3 class="c1">ddd</h3>
<h3>eee</h3>
<h3 class="c1">fff</h3>
</body>
전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function a() { //id=h인 값을 받아와 aaa만 추출 후 div 공간에 나타나게 해줌.
let id_h = document.getElementById("h"); //<h3 id = "h">aaa</h3> 이 내용을 id_h에 넣은 것.
// let val = id_h.innerHTML; //innerHTML : 여는 태그와 닫는 태그 사이의 값
let id_res = document.getElementById("res");
res.innerHTML = id_h.innerHTML;
//id로 요소 찾아오기 getElementById
// 태그 사이의 값 innerHTML
}
function b() {
let arr = document.getElementsByTagName("h3"); //태그명이 h3인 요소를 모두 추출. 무조건 배열 반환
let txt = "";
for (i = 0; i < arr.length; i++) {
txt += arr[i].innerHTML+"<br/>"; //왜 <br/>은 document.어쩌구 필요업슨지
}
//id가 res인 요소의 내용으로 txt 출력
let id_res = document.getElementById("res");
res.innerHTML = txt;
}
function c(){
let class_c1 = document.getElementsByClassName("c1");
let txt = "";
for (i=0;i<class_c1.length; i++){
txt += class_c1[i].innerHTML+"<br/>";
}
let id_res = document.getElementById("res");
res.innerHTML = txt;
}
</script>
</head>
<body>
<!-- (검색해서 결과값) -->
<div id="res"></div>
<!-- 공간 값이 나타날 -->
<input type="button" value="id로 검색" onclick="a()">
<input type="button" value="태그명으로 검색" onclick="b()">
<input type="button" value="클래스명으로 검색" onclick="c()">
<h3 id="h">aaa</h3>
<h3 class="c1">bbb</h3>
<h3>ccc</h3>
<h3 class="c1">ddd</h3>
<h3>eee</h3>
<h3 class="c1">fff</h3>
</body>
</html>
반응형
