| 💖 DOM 🌠 DOM의 의미 🌠 DOM의 종류 ① Core DOM ② XML DOM ③ HTML DOM 💖 HTML 태그 요소와 DOM 💖 HTML문서를 제어하기 위한 내장 객체 🌠 document 객체 🌠 image 객체 🌠 form 객체 - id값에 의한 객체 획득 방법 - name값에 의한 객체 획득 방법 |
💖 DOM (Document Object Model)
🌠 DOM의 의미
⦁ HTML과 XML 문서에 대한 구조적 정보를 제공하는 양식.
⦁ 문서 구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수 있는 방법을 제공.
⦁ document의 내용, 구조, 스타일 등을 접근하여 동적으로 수정, 추가, 삭제 등을 할 수 있도록 프로그램으로 제공하는 언어체계이다.
⦁ 문서를 객체로 표현하기 위한 표준으로서 HTML이나 XML등의 문서를 객체로 표현할 때 사용하는 API이다.
🌠 DOM의 종류
① Core DOM(모든 구조화된 문서의 표준 모델)
② XML DOM(XML 문서의 표준 모델)
③ HTML DOM(HTML 문서의 표준 모델) 등이 존재한다.
⦁ DOM은 노드라고 부르는 요소들이 모여 계층 구조를 이룬다.
⦁ DOM은 HTML 문서의 계층적인 구조를 트리(tree)로 표현한다.
| 구성요소 | 설 명 |
| element | 하나의 태그 요소를 의미한다 (= HTML 태그) |
| attribute | 하나의 Element에 속해 있는 속성들을 의미한다 (= HTML 태그 속성) |
| node | 하나의 Element에서 시작되는 트리 구조를 말한다 (하나의 노드안에는 여러 개의 노드가 포함되어 있을 수 있다) |
DOM(Document Object Model)
<html>
<head>
<title>HomePage</title>
</head>
<body>
<h1>A heading</h1>
<a href="#">Link</a>
</body>
</html>
💖 HTML 태그 요소와 DOM
✨ 태그 요소는 DOM의 객체로 표현 됨
⦁ 태그 요소에 포함된 다른 요소는 객체내에 소속된 객체 형태로 표현 (하위객체)
✨ 태그 속성은 DOM 객체의 속성으로 표현 됨
✨ 요소 전체가 하나의 객체
| <input type = "text" name = "username" id = "username" /> |
⦁ type과 name은 속성
⦁ "text"와 "username"은 type과 name의 속성값
💖 HTML문서를 제어하기 위한 내장 객체
🌠 document 객체
document 객체는 자바스크립트에서 가장 핵심적인 객체라고 할 수 있다.
HTML문서의 구조나 내용을 제어하기 위한 기본 기능을 갖고 있을 뿐만 아니라, image 객체나 form 객체들이 document 객체의 하위 객체이다.
⦁ 특정 HTML 요소를 객체 형태로 가져오기
let some_element = document.getElementById("id 속성 값");
⦁ HTML 요소의 내용 제어
객체화 된 HTML 요소의 innerHTML 속성을 사용하면
해당 태그에 속해 있는 내용을 새롭게 설정하거나 읽어 올 수 있다.
⦁ HTML 요소의 CSS 제어하기
자바스크립트에 의해 객체화 된 HTML 요소는 style이라는 하위 객체를 내장한다.
style 객체는 CSS 속성에 대응하는 프로퍼티들을 내장하고 있으며,
이 프로퍼티에 특정 값을 대입하는 것으로 자바스크립트를 통한 특정 요소의 CSS 제어가 가능해 진다.
document.getElementById("id 속성값").style.css속성="적용할 값";
⦁ HTML 요소의 CSS 클래스 제어하기
특정 element 객체에 포함되어 있는 className 속성은 해당 요소의 css 클래스를 설정할 수 있는 기능이다.
let some_element = document.getElementById("id 속성 값");
some_element.className = "css클래스 이름";
🌠 image 객체
image 객체의 기본 프로퍼티 document.getElementById("id값")으로 객체화 한 요소가 <img>태그일 경우,
이 객체는 src, width, height 프 로퍼티를 포함하게 된다.
⦁ image 객체의 기본 메서드
| 메소드 | 설 명 |
| src | 객체가 표시하고 있는 이미지 파일의 경로를 설정한다 |
| width | 객체가 표시하고 있는 이미지의 가로 넓이를 설정한다 |
| height | 객체가 표시하고 있는 이미지의 세로 높이를 설정한다 |
🌠 form 객체
form 객체의 하위에 속해 <input>, <select>, <textarea>, <button> 태그 등은 모두 사용자에게 입력을 받기 위한 용도로 사용되는 HTML 태그이다.
⦁ 입력 양식에 대한 객체 획득하기
<form name="memForm" id="memForm">
… <input type="text" name="user_name" id="user_name" />
</form>
- id값에 의한 객체 획득 방법
let input = document.getElementById("user_name");
- name값에 의한 객체 획득 방법
let input = document.memForm.user_name
- 사용자가 직접 텍스트를 입력하는 형태의 컴포넌트 객체는 모두 value 속성을 갖는다. 이 속성의 값을 읽으면 사용자가 입력한 내용을 String 형태로 얻을 수 있다.
'Language > Javascript' 카테고리의 다른 글
| 정규 표현식(Regular Expression) (0) | 2022.05.22 |
|---|---|
| 2. DOM 선택자 (0) | 2022.05.20 |
| 2. Javascript 내장 객체 (0) | 2022.05.17 |
| 1. Javascript 사용자 정의 객체 (0) | 2022.05.15 |
| JavaScript - Event (0) | 2022.05.12 |