DOM(Document Object Model)
-
DOM이란 XML이나 HTML 문서에 접근하기 위한 인터페이스로 DOM을 이용하여 HTML 문서 구조, 스타일, 내용 등을 변경할 수 있다.
DOM
-
HTML DOM은 node라고 불리는 계층적 단위에 정보를 저장한다.
Node와 Element
추후 추가
createElement
- createElement는 인자로 tagname을 전달하여 전해준 tagname의 html요소를 만들어
반환합니다.const div = document.createElement('div'); console.log(div) // <div></div>
querySelector와 querySelectorAll
HTML element 정보를 얻기 위한 메소드로 주로 querySelctor와 querySelectorAll을 쓴다.
- querySelector
querySelector는 인자로 전해진 값에 해당하는 요소 중 첫번째 요소를 반환한다.
const div = document.querySelector('div')인자로 태그를 적어주면 document에서 div태그를 가지는 첫번째 요소를 반환한다.
const classname = document.querySelector('.classname')classname으로 요소를 찾을 때는 classname앞에 .을 붙여 인자로 전해준다. 해당하는 요소 중 첫번째 요소를 반환한다.
const id = document.querySelector('#id')id로 요소를 찾을 때는 id앞에 #을 붙여 인자로 전해준다.
- querySelectorAll
querySelectorAll은 전해진 값에 해당하는 모든 요소를 유사배열 형태로 반환한다.
const divs = document.querySelectorAll('div')querySelectorAll을 사용하면 하나의 요소가 아니라 div태그를 가지는 모든 요소를 유사배열로 반환한다.
const classnames = document.querySelectorAll('.classname')classname을 가지는 모든 요소를 유사배열로 반환한다.
id는 고유한 요소로 querySelectorAll을 쓰지 않는다.
append와 appendChild
append와 appendChild 모두 부모노드에 자식노드를 추가하기 위한 메소드다. 두 메소드의 차이점에 대해 알아보자.
- append
- append는 요소 노드뿐만 아니라 텍스트 노드도 추가할 수 있다.
- 한번에 여러개의 요소를 삽입할 수 있다.
const div = document.createElement('div') const p = document.createElement('p') const body = document.createElement("body") body.append(div, p, 'text') // result <body> <div></div> <p></p> "text" </body>
- appendChild
- appendChild는 요소 노드만 추가 가능하다.
- 한번에 하나의 요소만 삽입할 수 있다.
- 삽입한 요소를 반환한다.
const span = document.createElement('span') const div = document.createElement('div') console.log(div.appendChild(span)) // <span></span> console.log(div) // <div><span></span></div>
remove와 removeChild
remove와 removeChild는 둘 다 노드를 삭제하는 메소드다. 두 메소드의 차이점을 알아보자
- remove
remove는 삭제하는 노드를 반환하지 않고 메모리에서 제거한다. 삭제할 노드에 바로 사용하면 된다.
const div = document.querySelector("div"); console.log(div.remove()); // undefined - removeChild
removeChild는 자식노드를 삭제하는 메소드다. 부모 노드에 사용하여 삭제할 자식노드를 인자로 보내준다. 삭제한 노드를 반환한다.
const div = document.querySelector("div"); const div2 = div.querySelector("div"); console.log(div.removeChild(div2)); // <div></div>
classList
classList 메소드는 요소의 클래스 속성을 유사배열로 반환한다. add, remove, toggle메소드를 이용하여 클래스를 추가, 제거 할 수 있다.
-
classList
클래스를 유사배열로 반환한다.
const classname = document.querySelector('.classname') console.log(classname.classList) // ['classname'] -
add
클래스를 추가한다.
const classname = document.querySelector('.classname') classname.classList.add('classname2') console.log(classname) //<div class= 'classname classname2'></div> -
remove
클래스를 제거한다.
const classname = document.querySelector('.classname') classname.classList.remove('classname') console.log(classname.classList) // [] -
toggle
- 클래스가 이미 존재하면 제거하고 없으면 추가한다.
const classname = document.querySelector('.classname') classname.classList.toggle('classname') console.log(classname.classList) // [] classname.classList.toggle('classname') console.log(classname.classList) // ['classname'] - 두번째 인자가 있을 때 true이면 클래스를 추가하고 false이면 제거한다.
const classname = document.querySelector('.classname') classname.classList.toggle('classname',true) console.log(classname.classList) // ['classname'] classname.classList.toggle('classname',false) console.log(classname.classList) // []
- 클래스가 이미 존재하면 제거하고 없으면 추가한다.
textContent와 innerHTML
textContent는 노드 안의 모든 자식요소의 text를 반환하며 설정할 경우 자식요소가 모두 사라지고 설정한 text만 남는다.
innerHTML은 해당 노드의 자식들의 HTML내용을 설정하거나 반환할 때 사용한다. HTML내용을 설정할 때 텍스트뿐만이 아니라 HTML요소들을 설정할 수 있다.
- textContent
const div = document.querySeletor("div"); // <div><p>hi</p></div> console.log(div.textContent); // "hi" div.textContent = "hello"; console.log(div); // <div>hello</div>- innerHTML
const div = document.createElement("div"); // <div></div> div.innerHTML = "<p>hi</p>"; console.log(div); // <div><p>hi</p></div> console.log(div.innerHTML); // <p>hi</p>
