1. 문서 객체 모델 기본 용어
- 문서 객체 모델(DOM) : 웹 브라우저가 HTML 페이지를 인식하는 방식, 웹 브라우저가 HTML 파일을 분석하고 표시하는 방식
- 문서 객체는 태그(또는 요소)를 자바스크립트에서 사용할 수 있는 객체로 만든 것
- 문서 객체를 조작한다 = 태그를 조작한다.
요소 노드
<h1> 태그와 <script> 태그 처럼 요소를 생성하는 노드
텍스트 노드
화면에 출력되는 문자열
정적 생성
웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것
동적 생성
웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것
2. 실행 순서에 따른 문서 객체 사용 오류
<!DOCTYPE html>
<html lang="en">
<head>
...
<script>
document.querySelector('h2').style.color='red';
</script>
</head>
<body>
<h1>h1 첫 번째</h1>
<h2>h2 두 번째</h2>
</body>
</html>웹 실행은 위에서 아래로 실행되기 때문에 script 태그를 읽는 시점에 h1과 h2태그는 생성되지 않아서 오류가 발생한다.
해결 방법1) script 태그의 위치를 옮긴다.
<body>
<h1>h1 첫 번째</h1>
<h2>h2 두 번째</h2>
<script>
document.querySelector('h2').style.color='red';
</script>
</body>해결 방법2) 이벤트 활용하기
onload(메서드/익명함수) : 웹 브라우저에 있는 모든 내용을 읽은 후 실행해라
<script>
window.onload=function(){
document.querySelector('h2').style.color='red';
};
</script>3. 문서 객체 선택
document
- 웹 페이지에서 가장 최상위라 할 수 있는 html을 포함하고 있는 객체
- 즉, 문서 전체를 대표하는 객체
문서 객체 선택
이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것
즉, 자바스크립트를 사용해 실행 중에 내부 글자를 변경하거나 스타일을 변경할 수 있다.
| 구분 | 메서드 | 설명 |
|---|---|---|
| 1개 선택 | document.getElementById(아이디) | 아이디 1개로 선택 |
| document.querySelector(선택자) | 선택자로 1개 선택 | |
| 여러 개 선택 | document.getElementsByName(이름) | name 속성으로 여러개 선택 |
| document.getElementsByClassName(클래스) | class 속성 여러 개 선택 | |
| document.querySelectorAll(선택자) | 선택자로 여러개 선택 |
예시1) getElementById() 메서드를 사용해 문서 객체 1개 선택하기
<head>
...
<script>
window.onload=function(){
document.getElementById('header').style.color='red';
};
</script>
</head>
<body>
<h1 id="header">header</h1>
</body>
예시2) querySelector() 메서드를 사용해 문서 객체 1개 선택하기
<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>
<script>
window.onload=function(){
document.querySelector('h1').style.color='blue';
};
</script>
</head>
<body>
<h1 id="header">header</h1>
</body>예시3) querySelectorAll() 메서드를 사용해 문서 객체 여러개 선택하기
배열의 형태로 문서 객체가 반환
<head>
...
<script>
window.onload=function(){
var headers = document.querySelectorAll('h1')
for (var i =0;i<headers.length;i++)
headers[i].style.color='green'
};
</script>
</head>
<body>
<h1>header</h1>
<h1>header</h1>
<h1>header</h1>
</body>4. 문서 객체 조작
글자 조작
| 속성 | 설명 |
|---|---|
| textContent | 문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경 |
| innerHTML | 문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경 |
스타일 조작
자바 스크립트로 CSS속성 값을 추가/제거/변경
| 스타일시트의 스타일 속성 | 자바스크립트의 스타일 식별자 |
|---|---|
| background-image | backgroundImage |
| background-color | backgroundColor |
| box-sizing | boxSizing |
| list-style | listStyle |
속성 조작
| 메서드 | 설명 |
|---|---|
| setAttribute(속성 이름,속성 값) | 속성 지정 |
| getAttribute(속성 이름) | 속성 추출 |
배운 걸 기록하는 곳입니다.