DOM의 정의
DOM = Document Object Model
HTML요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model
즉, DOM으로 HTML로 구성된 웹 페이지를 동적으로 움직일 수 있게 만듦.
HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용함.
ex)
<script src="myScriptFile.js"></script>웹 브라우저는 작성한 코드를 해석하는 과정 중 <script> 요소를 만나면 HTML 해석을 잠시 멈추고, <script>요소를 먼저 실행함!(<script> 요소는 등장과 함께 실행된다)
<script> 요소를 추가하는 두 가지 방법
1. <head> 안쪽에 삽입하는 경우
2. <body> 요소가 끝나기 전에 삽입하는 경우
자식 노드 탐색
자식노드: 일반적으로 중첩 관계에 있는 본인 바로 아래 노드
후손노드: 일반적으로 중첩 관계에 있는 본인 아래의 모든 노드
| 특정 노드의 자식(후손)노드 접근 | |
|---|---|
| children | 요소노드만 포함 |
| childNodes | 텍스트, 주석, 요소 노드 포함 |
| - | - |
| 특정 노드의 마지막 자식 노드 접근 | |
| lastChild | 요소 노드만 포함 |
| lastElementChild | 텍스트, 주석, 요소 노드 포함 |
| - | |
| * 자식노드의 유무 확인하기 - hasChildeNodes() |
부모 노드 탐색
부모 노드: 일반적으로 바로 위에서 특정 노드를 감싸고 있는 노드
| 특정 노드의 부모노드 접근(가장 가까운 부모에 접근, 조상노드로 접근시 연속 사용) | |
|---|---|
| parentElement | 요소 노드만 포함 |
| parentNode | 텍스트, 주석, 요소 노드 포함 |
DOM 구조를 조회할 때에는 console.dir 이 유용함.
- console.log와 달리 DOM을 객체의 모습으로 출력함!
document.body.children의 첫 번째 요소를 조회한다.
document.body.children[1]트리 구조
body가 가장 상위에 있고, 아래에 여러 구성요소가 부모, 자식 관계를 가지고 있는 구조
CRUD
document 객체 내에는 많은 속성과 메서드가 있지만
CRUD (Create, Read, Update and Delete)에 집중해야 하고,
앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우더라도 CRUD에 가장 먼저 집중해야 한다.
CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법이다!
CREATE
document.createElement('div')
const tweetDiv = document.createElement('div')APPEND
document.body.append(tweetDiv)
READ
DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있는데, HTML요소("div"),id("#tweetList"),class(.tweet) 세 가지가 가장 많이 사용된다.
querySelector = 셀렉터를 조회한다는 의미,
query를 날리다 = ㅇㅇㅇ를 조회한다(개발자 간 jargon)
- jargon : 특정 영역에서만 사용되는 단어
const oneTweet = document.querySelector('.tweet')
//클래스 이름이 tweet인 HTML 요소를 조회한다.querySelectorAll : 여러개의 요소를 한 번에 가져올 때
이렇게 조회한 요소들은 배열처럼 for문을 사용할 수 있음!
앞에서 조회한 HTML요소는 배열이 아니고 유사배열, 배열형 객체이다(배열 아닌 배열, Array-like Object)
const tweets = document.querySelectorAll('.tweet')
//클래스 이름이 tweet인 모든 HTML 요소를 유사배열로 받아온다.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
//tweetDiv를 container의 마지막 자식 요소로 추가한다.UPDATE
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>const container = document.querySelector('#container')
container.append(oneDiv)DELETE
삭제하려는 요소의 위치를 알고있을때 remove를 사용한다
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 하면 append 했던 요소를 삭제할 수 있다.여러 개의 자식 요소를 지우려면 innerHTML을 사용한다.
document.querySelector('#container').innerHTML = '';
하지만 innerHTML은 몇가지 보안의 문제를 가지고 있다. 따라서
removeChild는 자식요소를 지정해서 삭제하는 메서드인데 모든 자식 요소를 삭제하기 위해 반복문을 활용해 삭제할 수 있다.
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}+작성중
