DOM

DOM

: DOM 이란 Document Object model이라는 약자다. 여기서 Document를 HTML이라고 생각해도 좋을것같다. 즉 HTML을 자바스크립트로 제어하기 위해서 사용되어지는 객체 모델이라고 생각하면 좋겠다.

DOM은 트리구조를 가지고 있다. 아래와 같은 사진의 모습을 띄고 있다. 이 부분은 객체와 같은 구조라 한다.

DOM 으로 어떻게 객체를 제어할 수 있을까 ? 우선 대표적으로 CRUD를 할 수 있다.

create

document.createElement('element')를 생성할 수 있고,

const makeElement = document.createElement('div')
console.log(makeElement) // <div></div> 

read

document.qeurySelector 와 document.qeurySelector 로 조회도 가능하고,
(document.getElementById 나 ClassName으로 조회가능하지만 old-fashion한 방법)

const findSelector = document.querySelector('#fivestars')
//fivestars라는 아이디를 가지고있는 선택자를 찾는다.
//class를 설정한경우, 가장 먼저 찾을 수 있는 클래스 하나만 찾는다.
const findOutAll = document.querySelectorAll('#user')
//user라는 클래스를 가지고 있는 모든 선택자를 찾는다.

update

.textContent('element')로 엘리멘트 값과 (innerHTML도 사용가능하지만, 성능과 보안상의 이유로 권장되어지지 않는다.)
classList.add('element')로 클래스를 만들 수 있고,
또, element.id를 사용하여 아이디값을 줄 수도 있다.

const test = document.createElement('div')
test.textContent = 'hello'
console.log(test) 
// <div>hello</div>
test.id = 'greeting'
console.log(test) 
//<div id='greeting'>hello</div>
test.classList.add('world')
console.log(test) 
//<div class='world'>hello</div>

append

위처럼 엘리멘트를 만들고, 선택자를 추가만 하면 HTML로 옮겨지는것이 아니다. 우리가 만든것을 추가하고 싶다면 append라는 키워드를 사용하자.

seletor.append(test)
//여기서 selector는 class가 될 수도 있고, id 가 될 수도 있다. 우리가 넣고 싶은 선택자를 선택하며 된다.

remove

바로 위에서 실행했던 append를 했다면, 이젠 마지막으로 remove() 와 removeChild()로 삭제도 가능하다.

seletor.append(test)
test.remove()
//test라는 엘리먼트를 바로 삭제가능하다.
selector.removeChild(selector.firstChild);
//selector의 첫번째 child를 삭제 할 수 있다.
//여기서는 child가 붙은 만큼, 자식 요소를 제거할 수 있다.

**음.... DOM이라는것 어느정도 무슨 느낌인지 알겠다. 다들 중요하다고해서 중요하다는것도 알겠다. front-end 개발자에게 필수적으로 중요하다느것도 알겠다.

근데 나는 알겠는게 없다. 모르겟다. 어렵다....