DOM(Document Object Model) :
문서 객체 모델이라고 하며 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
▶ 요소를 추출 하는 메서드
- document.getElementById("아이디"); // 아이디에는 중복이 없음으로 요소 한개만 반환한다.
- document.getElementsByTagName("태그명"); // 동일한 태그명을 찾아서 배열(여러개일 테니까) 에 담아서 반환 한다.
- document.getElementsByClassName ("클래스명"); // 동일한 클래스명을 찾아서 배열에 담아서 반환한다.
▶ innerHTML
여는 태그와 닫는 태그 사이의 값 <div> 여기가 innerHTML의 자리 </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function a () { //아이디로 검색
let id_h = document.getElementById("h");
// let val = id_h.innerHTMLs;
let res = document.getElementById("res");
res.innerHTML = id_h.innerHTML;
//<div id = "res">여기 사이에 id_h를 넣으라는 뜻 </div>
}
function b () { //태그이름으로 검색
// document.getElementsByTagName("body")[0];
//body태그는 누가 봐도 1개 있자나 그러면 위에 처럼 표시해서 출력하기도 한다.
//그러면 루프 돌릴 일 도 없음
let tag_h3 = document.getElementsByTagName("h3");
let txt = "";
// 왜 만들어 줬냐면 결국우리가 배열로 그 요소들을 볼게 아니라
//텍스트로 볼껀데 담아줄 변수가 필요하기 때문이지
//현재 tag_h3 배열에는 h3태그를 가진 모든 것들이 들어가 있음
for(i=0; i<tag_h3.length;i++){
txt += tag_h3[i].innerHTML + "<br/>" ;
//txt ( "" ) 여기에 이어서 붙여줌
}
let 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 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>'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - DOM 요소 속성 값 변경 (0) | 2023.03.26 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - DOM 요소 속성 (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 이미지 슬라이드 쇼 (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 회원가입 (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 이벤트(event) (0) | 2023.03.26 |
