DOM (Document Object Model) - 문서객체 모델
- 웹페이지가 로드되면 자바스크립트는 해당페이지의 모든 html 구성요소를 객체로 인식하고 관리한다.
- html 의 구성요소인 각각의 태그는 객체로 인식되며, 또 계층형의 구조를 갖는다.
- html 자식은 head와 body 등의 객체로 인식
- head자식은 title, titele 자식은 텍스트 글자를 가진 텍스트 노드이며 객체로 인식
- 위와 같이 html 의 모든 구성요소를 객체로 파악하는 모델을 DOM 이라고 한다.
- DOM 객체 모델을 이용해 동적인 html을 표현할 수 있다.
- 사용자 요청에 의하여 새로운 노드 추가, 필요없는 노드를 제거, 수정
정적 html vs 동적 html
- 정적 html : 웹 페이지를 실행할 때 처음부터 HTML 태그로 적힌 문서 객체를 말한다.
- 동적 html : 처음에는 없엇는데 실행 중에 사용자의 요청에 의하여 만들거나 수정하거나 제거하는 것을 뜻한다.
DOM 객체의 잘못된 사용
- 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//html이 모두 만들어지기도 전에 자바스크립트가 동작하기 때문에 오류가 발생한다.
//TypeError: Cannot read properties of null (reading 'style')
//널인 것으로 style 을 설정할 수 없음을 나타냄
document.getElementById("title").style.background="red";
</script>
</head>
<body>
<h1 id="title">JavaScript</h1>
</body>
</html>- 해결책1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="title">JavaScript</h1>
<script>
document.getElementById("title").style.background="red";
</script>
</body>
</html>- 해결책2 : 보통은 자바스크립트를 head에 둔다. 그 대신 html 이 모두 만들어지고 난 다음에 동작시키기 위하여 window.onload 라는 이벤트를 연결하여 그 안에 자바스크립트를 써준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
document.getElementById("title").style.background="red";
}
</script>
</head>
<body>
<h1 id="title">JavaScript</h1>
</body>
</html>
대상이 되는 노드 찾기
- 위의 것들 모두 getElementById 를 제외한 getElementByClassName(), getElementsByName(), getElementsByTagName() 등은 배열로 반환된다.
- getElementByClassName(), getElementsByName(), getElementsByTagName() 등은 문서 안에 하나밖에 없더라도 배열로 반환한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let members = document.getElementsByClassName("member");
//배열 요소를 모두 배경색을 모두 분홍색으로 설정하기
for(i = 0; i< members.length; i++){
members[i].style.background="pink";
}
}
</script>
</head>
<body>
<h1 class="member">강동균</h1>
<h1>홍길동</h1>
<h1 class="member">박성빈</h1>
<h1 class="member">유현진</h1>
<h1>이순신</h1>
<h1 class="member">최가은</h1>
<h1>유관순</h1>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let h1 = document.getElementsByTagName("h1");
//h1 요소를 모두 배경색을 모두 노랑색으로 설정하기
for(i = 0; i< h1.length; i++){
h1[i].style.background="yellow";
}
}
</script>
</head>
<body>
<h1>강동균</h1>
<h3>서울시 종로구 관철1동</h3>
<h1>박성빈</h1>
<h3>서울시 종로구 관철2동</h3>
<h1>유현진</h1>
<h3>서울시 종로구 관철3동</h3>
</body>
</html>- 자바의 for each 와 다르게 js 의 for each 는 속성값(배열이면 인덱스)를 가져온다.
추가적인 선택자(css처럼 선택할 수 있는 선택자들)
- querySelector() --> 1개 반환한다.
- querySelectorAll() --> 여러개를 반환한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let css = document.querySelector("#css");
css.style.background="red";
}
</script>
</head>
<body>
<h1>HTML</h1>
<h1 id="css">CSS</h1>
<h1>JavaScript</h1>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let members = document.querySelectorAll(".member");
//배열 요소를 모두 배경색을 모두 분홍색으로 설정하기
for(i = 0; i< members.length; i++){
members[i].style.background="pink";
}
}
</script>
</head>
<body>
<h1 class="member">강동균</h1>
<h1>홍길동</h1>
<h1 class="member">박성빈</h1>
<h1 class="member">유현진</h1>
<h1>이순신</h1>
<h1 class="member">최가은</h1>
<h1>유관순</h1>
</body>
</html>
