DOM 알아보기

DOM이란

DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있다. 즉, 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미다.

html 에서 javascript를 사용하여 자식과 부모를 아래와 같은 방법으로 찾을 수 있다.

document.body.children : 자식 찾는 법
node.parentElement : 자식의 부모를 찾는 법

DOM의 CRUD

어떤 언어를 배우더라도 그 언어의 CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 공부하는 방법이라고한다.

CREATE - createElement

DOM에서는 document.createElement('태그') 를 통해 새로운 엘리먼트를 생성할 수 있고
document.createDocumentFragment() 는 한번에 트리에 추가할 수 있다.

document.createElement('div')
// ==> <div></div>

READ - querySelector, querySelectorAll

querySelector 와 querySelectorAll 를 통해 조회할 수 있다.
querySelector는 () 안에 클래스나 태그를 단일 조회하고
querySelectorAll는 () 안에 클래스나 태그를 전부 조회한다.

const oneTweet = document.querySelector('div')
const tweets = document.querySelectorAll('div')

UPDATE - textContent, classList.add

위에서 만든 div태그는 빈 깡통과도 같기 때문에 내용을 추가해주거나 클래스나 아이디를 부여해줘야 할 수도 있다.
내용을 추가해줄때는 아래와 같이

let newDiv = document.createElement('div')
newDiv.textContent = 'hello'
console.log(newDiv) // ==> <div>hello</dlv>

textContent를 이용해 내용을 추가할 수 도 있다.

클래스를 부여해주려면

newDiv.classList.add('hi')
console.log(newDiv) // ==> <div class="hi">hello</div>

아이디를 부여하려면 element.id = 'id'

element.setAttribute(name, value) : 지정요소(name)의 속성값을 설정. 요소가 없다면 새 요소가 추가
속성의 현재 값 조회 getAttribute()
속성 제거 removeAttribute()

DELETE - remove, removeChild

삭제하는 방법은 여러방법이 있다. 먼저 내가 해당 엘리먼트가 어디있는지 알고 있는 경우에는
remove 메소드를 활용해 삭제할 수 있다.

let mainDiv = document.querySelector('#main')
let newDiv = document.createElement('div')
mainDiv.append(newDiv)
newDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

간단하게 자식 엘레먼트를 지우는 방법인 innerHTML 을 이용하는 법도 있다.

document.querySelector('#main').innerHTML = '';

간단하고 편리한 방식이지만 innerHTML은 여러 보안상 문제를 가지고있다.