문서 객체 모델
- Document object Model의 약어로 DOM이라고도 함
- 웹 문서를 로드할 때, 브라우저는 구성 요소들을 객체화하여 트리 구조의 DOM 생성
- HTML DOM은 HTML 구성요소들을 획득, 변경, 추가, 삭제하기 위한 표준
- HTML 문서를 브라우저에서 로드 시 각 구성요소들을 객체화하여 객체 트리 구조를 나타냄
위의 HTML의 문서 객체 구조를 그림으로 표현하면 다음과 같이 트리 구조로 되어있다. 즉 그림을 거꾸로 뒤집으면 나무가 가지를 뻗은 모양과 비슷하다. 여기서 html 태그는 뿌리(root)를 의미한다. 이 뿌리로 부터 가지처럼 뻗어나가는 것을 노드라고 한다.
DOM의 기능
1.HTML 문서에 대한 모델 구성
브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다.
이때, 모델은 객체의 트리로 구성된다.
2.HTML 문서 내의 각 요소에 접근 및 수정
DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메서드를 제공합니다.
DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용이 변경
DOM tree의 노드
문서 노드(Document Node)
트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.
요소 노드(Element Node)
요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다.
어트리뷰트 노드(Attribute Node)
어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.
텍스트 노드(Text Node)
텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.
선택자 종류
|
구분
|
종류
|
설명
|
|
직접선택자
|
document.getElementById(“아이디명”)
|
아이디를 이용해 요소를
선택해 옵니다.
|
|
document.getElementsByTagName
(“요소(태그)명”)
|
요소의 이름을 이용해 요소를 선택해 옵니다.
|
|
|
document.formName.inputName
|
폼 요소에 name 속성을 이용해 요소를 선택합니다.
|
|
|
인접 관계
선택자
|
parentNode
|
선택한 요소의 부모 요소를 선택해 옵니다.
|
|
childNodes
|
선택한 요소의 모든 자식 요소를 선택해 옵니다. 선택한 모든 요소가 배열 객체로 저장됩니다.
|
|
|
children
|
선택한 요소의 자식 요소인 태그만 선택해 오니다. 선택한 모든 요소가 배열 객체로 저장됩니다.
|
|
|
firstChild
|
선택한 요소의 첫 번째 자식 요소만 선택해 옵니다.
|
|
|
previousSibling
|
선택한 요소의 이전에 오는 형제 요소만 선택해 옵니다.
|
|
|
nextSibling
|
선택한 요소의 다음에 오는 형제 요소만 선택해옵니다.
|
html과 Javascript에서 CSS 사용
|
html에서 css사용 시
|
자바스크립트에서 css사용 시
|
|
background-color
|
backgroundColor
|
|
font-size
|
fontSize
|
문서 객체의 속성 메소드
|
종류
|
풀이
|
|
요소 선택.속성명
|
요소의 지정한 속성값을 불러옵니다.
|
|
요소 선택.속성명=“새 값”
|
요소의 지정한 속성값을 새 값으로 변경 또는 생성합니다.
|
|
요소 선택.getAttribute(“속성”)
|
요소의 지정한 속성값을 불러옵니다.
|
|
요소 선택.setAttribute(“속성”.“새값”)
|
요소의 지정한 속성값을 새값으로 변경 또는 생성합니다.
|
innerHTML 속성
|
종류
|
풀이
|
|
요소 선택.innerHTML;
|
선택한 요소의 모든 하위 요소를 문자 데이터로 반환합니다.
|
|
요소 선택.innerHTML=새요소;
|
선택한 요소의 전체 하위 요소를 변경 또는 새롭게 생성합니다.
|
문서 객체 이벤트 핸들러
|
이벤트
|
설명
|
|
onclick
|
선택한 요소를 마우스로 클릭했을 때 이벤트가 발생합니다.
|
|
onmouseover
|
선택한 요소에 마우스를 올렸을 때 이벤트가 발생합니다.
|
|
onmouseout
|
선택한 요소에 마우스가 벗어났을 때 이벤트가 발생합니다.
|
|
submit
|
선택한 폼에 전송이 일어났을 때 이벤트가 발생합니다.
|
폼 요소 선택자 - 선택방식
|
구분
|
종류
|
설명
|
|
입력 요소
선택자
|
document.getElementById(“아이디 명”)
|
폼 요소를 아이디로 선택할 때 사용합니다.
|
|
document.폼이름.입력요소이름
|
폼 요소를 이름으로 선택할 때 사용합니다.
|
|
|
select
option
선택자
|
document.폼이름.입력 요소 이름.options[index]
|
<select>에
<option>을 선택할 때 사용합니다.
|
|
var i =document.폼이름.입력요소이름.selectdeIndex;
document.폼이름.입력요소.selectedIndex;
document.폼이름.입력 요소 이름.options[i]
|
<select>에 선택 된 <option>을 선택할 때 사용합니다.
|
폼 요소 선택자 - 속성 종류
|
구분
|
속성
|
설명
|
|
전체
|
value
|
입력 요소의 value속성을 변경하거나, 값을 가져옵니다.
|
|
disabled
|
입력 요소의 disabled속성을 변경하거나, 현재 상태의 값을 가져옵니다.
|
|
|
defautValue
|
입력 요소 초기에 입력된 value의 값을 가져옵니다.
|
|
|
선택 박스
|
selected
|
<select>태그에 <option>선택된 상태의 값을 가져옵니다. 선택한 <option>태그가 선택되어 있을 경우에는 true를 반환하고, 이와 반대로 선택되어 있지 않을 경우에는 false를 반환합니다.
|
|
체크 박스 라이오버튼
|
checked
|
체크 박스 또는 라디오 버튼 태그에 체크 상태 값을 반호나하거나 또는 체크 여부를 제어할 수 있습니다. 체크가 되어 있으면 true를 반환하고, 해지되어 있을 경우에는 false를 반환합니다.
|
예제1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>선호하는 음식</h1>
<div id="food_1">
<h2 id="title">한식</h2>
<ol>
<li><a href="#">김치</a></li>
<li>불고기</li>
<li>비빔밥</li>
</ol>
</div>
<div id="food_2">
<h2>양식</h2>
<ol id="list">
<li>돈까스</li>
<li id="pizza"> 피자</li>
<li>파스타</li>
</ol>
</div>
</div>
<script>
document.getElementsByTagName("h1")[0].style.color="green";
document.getElementById("title").style.color="red";
var myList = document.getElementById("food_1").getElementsByTagName("li")[1];
myList.style.backgroundColor="red";
</script>
</body>
</html>
예제2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>월요일</h1>
<h2>화요일</h2>
<script>
document.body.style['backgroundColor']="gold";
document.getElementsByTagName("h1")[0].style['fontSize']="50px";
document.getElementsByTagName("h2")[0].style['fontSize']="50px";
document.body.style['color']="red";
</script>
</body>
</html>
예제3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="title">마우스아웃</h1>
<a href="#" id="btn"><img
src="https://images.unsplash.com/photo-1463947628408-f8581a2f4aca?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="button" width="200" height="100"></a>
<p id="img_src"></p>
<script>
var theBtn = document.getElementById("btn");
var s = document.getElementById("img_src");
theBtn.onmouseover = function () {
document.getElementById("title").innerHTML = "마우스 오버";
theBtn.firstChild.src = "https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80";
s.innerHTML = theBtn.firstChild.src;
}
theBtn.onmouseout = function () {
document.getElementById("title").innerHTML = "마우스 아웃";
theBtn.firstChild.src = "https://images.unsplash.com/photo-1463947628408-f8581a2f4aca?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80";
s.innerHTML = theBtn.firstChild.src;
}
</script>
</body>
</html>
예제4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="chk1" id="c1">자바스크립트
<h3>check</h3>
<button>click</button>
<script>
document.getElementsByTagName('button')[0].onclick=function(){
if(document.getElementsByTagName('input')[0].checked==true){
document.getElementsByTagName('h3')[0].innerHTML="true";
}else{
document.getElementsByTagName('h3')[0].innerHTML="false";
}
}
</script>
</body>
</html>
예제5 - 약관동의 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get" name="f1">
<fieldset>
<legend>폼 요소1</legend>
<p>
<label for="user_pw1">비밀번호</label>
<input type="password" name="user_pw1" id="user_pw1">
</p>
<p>
<label for="user_pw2">비밀번호 확인</label>
<input type="password" name="user_pw2" id="user_pw2">
<input type="submit" value="확인">
</p>
</fieldset>
</form>
<form action="#" method="get" name="f2">
<fieldset>
<legend>폼 요소2</legend>
<div id="terms">
회사는 법령이 정하는 바에 따라 "회원"의 개인정보를 보호하기 위해 노력합니다.
개인정보의 보호 및 사용에 대해서는 관련법 및 회사의 개인정보취급방침이
적용됩니다.
</div>
<p>
<input type="checkbox" name="accept" id="accept">
<label for="accept">약관 동의합니다.</label>
</p>
<p>
<input type="checkbox" name="allChk" id="allChk">
<label for="allChk">전체선택</label><br>
<input type="checkbox" name="subject1" id="subject1" value="s1">
<label for="subject1">과목1</label><br>
<input type="checkbox" name="subject2" id="subject2" value="s2">
<label for="subject2">과목2</label><br>
<input type="checkbox" name="subject3" id="subject3" value="s3">
<label for="subject3">과목3</label><br>
</p>
<p>
<input type="submit" value="등록 완료">
<input type="reset" value="등록 취소">
</p>
</fieldset>
</form>
<script>
// 첫 번째 폼요소에 전송버튼 눌렀을 때 실행
document.f1.onsubmit = function(e){
var pw1 = document.f1.user_pw1;
var pw2 = document.f2.user_pw2;
pw2.value = pw1.value;
pw2.disabled= true;
return false;
}
// 전체 선택 체크박스를 클립했을 때
document.f2.allChk.onclick = function(){
if(this.checked){
document.f2.subject1.checked=true;
document.f2.subject2.checked=true;
document.f2.subject3.checked=true;
} else{
document.f2.subject1.checked=false;
document.f2.subject2.checked=false;
document.f2.subject3.checked=false;
}
}
// 두 번째 폼요소에 전송버튼 눌렀을 때 실행
document.f2.onsubmit=function(){
var act = document.f2.accept;
if(act.checked==false){
alert("약관 동의해야 합니다!");
act.focues();
return false;
}
}
</script>
</body>
</html>참고
DOM | PoiemaWeb
브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저
poiemaweb.com
[출처] 16_문서 객체 모델(DOM)|작성자 구름
구름 : 네이버 블로그
자기소개가 없습니다.
blog.naver.com
'JavaScript > 기본' 카테고리의 다른 글
| 정규표현식 (0) | 2022.06.30 |
|---|---|
| 내장객체 (0) | 2022.06.30 |
| 객체 (최소, 최대 평균) (0) | 2022.06.29 |
| 객체 (생성자) (0) | 2022.06.24 |
| 객체 (0) | 2022.06.24 |
댓글