728x90
🌈 DOM, Document Object Model
DOM 이란 HTML 문서의 구조와 관계를 Object 로 표현한 모델이다.
즉 자바스크립트를 이용하여 엘리먼트의 속성값을 얻어내거나 변경하는 등, HTML을 자유자재로 조작할 수 있는 것이다.
DOM이 자바스크립트는 아니고, 그저 접근을 JavaScript로 한다고 생각하면 된다.
- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.
- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.
- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.
- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.
- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.
- 자바스크립트는 HTML 문서의 새로운 HTML 이벤트를 추가할 수 있다.
- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.
💡 자바 스크립트의 속성과 속성에 대한 값
<body>
<div id="practice" class="highlight red">
<span>여기 엘리먼트가 하나 있음.</span>
</div>
</body>| 속성 | 속성에 대한 값 |
| 태그 이름 | div |
| id | practice |
| class | highlight, red |
| 안쪽에 담긴 내용 | 여기 엘리먼트가 하나 있음. |
| 부모 엘리먼트 | body |
| 자식 엘리먼트 | span |
728x90
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] DOM 으로 HTML 조작하기(2) - querySelector, querySelectorAll (0) | 2022.05.02 |
|---|---|
| [HTML] DOM 으로 HTML 조작하기(1) - createElement, append, appendChild (0) | 2022.05.02 |
| [HTML] HTML이란? 자주 사용하는 HTML 요소 (0) | 2022.04.27 |
| [HTML] 간단히 정리해보는 HTML5란 무엇인가 (0) | 2022.04.27 |
댓글