-
문서 객체 모델자바 초보개발/HTML 2023. 12. 6. 15:01
HTML 문서 객체 모델 기본 용어와 사용에 대해서.
정적 생성: 웹페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는것
동적 생성: 웹페이지 실행중 스크립트로 문서 객체를 생성하는것
문서 객체 모델: 웹 브라우저가 HTML파일을 분석하고 출력하는 방식. DOM(Document Object Model) 이라고 줄여 부르기도 한다.
웹페이지 실행 순서
HTML 스크립트는 일반적으로 위에서 아래로 시작되기 때문에, 위에 선행되지 않은 요소에 대해서 속성값을 변경할 수 없다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM fault example</title>
<script>
//h1 태그 배경 색상 변경
document.querySelector('h1').style.backgroundColor= 'red';
//h2 태그 글자 색상 변경
document.querySelector('h2').style.color= 'red';
</script>
</head>
<body>
<h1>process - 1</h1>
<h2>process - 2</h2>
</body>
</html>
위 예시를 보면 수정하려는 h1태그보다 <script> 태그로 변경하려는 값이 선행되어서 . 오류가 날 것을 예상할 수 있다.
코드 실행 결과 h1, h2 태그의 변화가 없고 오류가 발생한 것을 확인할 수 있다.
스크립트를 수정하려는 태그보다 아래에 위치시키는 방법으로도 해결 가능하지만,
EventHandler 중 하나인 onload 를 이용하여 처음 로딩이 된 후 처리를 하는 방법이 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM Basic</title>
<script>
//이벤트를 연결.
window.onload = function(){
//문서객체 선택.
var header = document.getElementById('header');
//문서객체 조작
header.style.color = 'orange';
header.style.background = 'red';
header.innerHTML = "From JavaScript";
};
</script>
</head>
<body>
<h1 id="header">Header</h1>
</body>
</html>
window.onload 에 함수를 직접 연결한 예시이다.
실행 결과
객체 선택
이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것을 문서 객체를 선택한다고 한다.
문서 객체를 선택하는 메서드는 아래와 같다.
- document.getElementById(아이디) : 태그의 아이디를 검색해서, 동일한 id 중 맨 위에 써져있는 태그를 객체로 선택한다. 동일한 아이디의 다른 태그들은 무시되므로 주의가 필요하다.
- document.get.querySelector(선택자) : 선택자로 1개를 선택한다. 아이디 메서드와 똑같이 맨 위 1개만 선택된다. 선택자로도 아이디를 찾는것이 가능하나, 아이디의 경우 "#" 을 붙이고, 클래스의 경우 " . " 기호를 앞에 붙여주는 것을 기억하자.
- document.getElementsByName(이름) : name 속성이 같은 태그들 여러개를 선택한다.
- document.getElementsByClassName(클래스) : class 속성이 같은 태그들 여러개를 선택한다.
- document.querySelectorAll(선택자) : 선택자로 같은 태그를 여러개 선택한다.
여러개를 선택하는 메서드는 해당 태그들을 배열로 받아오게 되는데,
배열.style.color = 'red' 처럼 바로 속성 변경은 불가능하다.
그러므로 반복문과 인덱스를 사용해서 배열 요소를 각각 바꿔주는 과정이 필요하다.
'자바 초보개발 > HTML' 카테고리의 다른 글
JQuery 기초 (1) 2023.12.07 페이지 이동 처리 (+이클립스 서버 설정) (2) 2023.12.06 JS 기초 (0) 2023.12.04 CSS 기초 (2) 2023.11.30 양식 <form> 태그 (2) 2023.11.28