DOM이란?
Document Object Model의 약자.
HTML 요소를 Object처럼 조작할 수 있는 Model을 일컬음. 즉, 'HTML의 아주 작은 부분까지 접근할 수 있도록 만들어진 구조'.
DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 할 수 있음.
- HTML에 JavaScript를 적용하는 법 : <script> 태그를 이용.
- 웹 브라우저는 <script> 요소를 만나면, HTML 해석을 중지함.
- <script> 요소는 등장과 함께 실행.
- <script>는 HTML에서
- <head> 안쪽에 삽입 하거나,
- <body> 요소가 끝나기 전 삽입 : (HTML 요소를 이용하려면 이 방법이 좋다고 생각됨)
- 자바스크립트에서 DOM은 document 객체에 구현되어 있음.
- DOM 구조 조회 시, console.dir() 를 사용하면 DOM을 객체의 모습으로 출력해 줌.
- ex) console.dir(document.body)
- 트리 구조 : 부모가 여러 자식을 갖고, 부모가 하나인 구조가 반복되는 구조 (마치 가문의 족보나 회사 조직도와 비슷하다고 생각하면 됨).
★잠깐! 코딩에서 중요한 학습 개념은 ?
CRUD(create, read, update and delete)
- CREATE : DOM을 이용하여 HTML Element를 추가하는 법
: document.createElement('태그명')이용 -> 지정한 태그명의 HTML 요소를 만들어 반환해줌. 이를 변수에 할당하여 활용 - APPEND : DOM을 이용하여 HTML Element를 부모 노드에 포함하는 방법
: document.body.append(변수명) 메소드 이용 - READ : DOM을 이용하여 HTML Element를 조회하는 방법
: document.querySelector(셀렌터) 이용.
ex) document.querySelector('.tweet') : 클래스 이름이 'tweet'인 HTML 엘리먼트 중 첫 번째 엘리먼트 조회 가능.
여러개의 요소를 한 번에 가져오려면 'querySelectorAll' 사용. - UPDATE : DOM을 이용하여 HTML Element를 변경하는 방법 (아래 예시 참고. 출처 : 코드스테이츠)
변수명.textContent = 와
변수명.classList.add() 를 활용
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
5. DELETE : DOM을 이용하여 HTML Element를 삭제하는 방법
변수명.remove() 메서드 사용
▶︎ 헷갈렸던 점
: .textContent와 .value의 차이 (아래 글 참고하기)
Dom 기본개념 정리(2)_알아두면 좋은 이벤트와 이벤트의 기본 문법, value와 textContent의 차이
이번 글에서는 Dom에서 event의 기본문접과 알아두면 좋은 event와 'value와 textContent의 차이 3가지에 대해 이야기해보겠습니다. 첫번째 value와 textContent의 차이는 html 태그를 생각해보시면 됩니다. 우
miracleground.tistory.com
'코딩' 카테고리의 다른 글
| [Git] Git / Github / Git repository (0) | 2022.05.19 |
|---|---|
| [Java Script / DOM] 유효성 검사 및 이벤트 (0) | 2022.05.18 |
| [Java Script] Koans 문제 풀이 (0) | 2022.05.16 |
| [Java Script] 선언 방식 let, const, var의 비교 (0) | 2022.05.13 |
| [Java Script] 데이터 유형과 특징 (0) | 2022.05.13 |
