1. DOM이란?
Document Object Model의 약자로 프로그래머의 관점에서 바라본 HTML이다.
또한 HTML 요소를 Object처럼 조작할 수 있는 모델이다.
2. CRUD란?
어떤 종류의 개발이나 컴퓨터 언어를 배우는 초기에 집중해야 할 요소들이다.
CREATE(만들고) READ(조회하고) UPDATE(갱신하고) DELETE(삭제하는)의 약자로 오늘은 DOM의 CRUD와 적용할 수 있는 APPEND를 중점으로 포스팅을 해보려고 한다.
3. CREAT - createElement
const makeDiv = document.createElement('div')div element를 만드는 방법이다.
주의할 점은 div를 따옴표로 감싸야 한다는 점이다.
4. APPEND - append, appendChild
document.body.append(makeDiv)좀 전에 만들었던 div element를 body 태그에 추가하는 방법이다.
여기서 append와 appendChild의 차이점이 있다.
- Element.append()는 반환되는 value가 없지만 Node.appendChild()는 Node object를 반환한다.
- Element.append()는 여러 개의 node와 문자열을 추가할 수 있지만 Node.appendChild()는 하나의 node만 추가할 수 있다.
5. READ - querySelector, querySelectorAll
const oneLine = document.querySelector('.line')
const lines = document.querySelectorAll('.line')querySelector은 인자에 tag, class, id 이름을 넣으면 HTML 엘리멘트 중 첫 번째 엘리먼트를 조회할 수 있다.
하지만 querySelectorAll은 인자에 들어간 tag, class, id 이름으로 된 모든 엘리먼트를 조회할 수 있다는 차이점이 있다.
6. UPDATE - textContent, classList.add
const makeDiv = document.createElement('div')
console.log(makeDiv) // <div></div>
makeDiv.textContent = 'make';
console.log(makeDiv) // <div>make</div>위는 새로 만든 태그안에 문자를 삽입하는 방법을 나타낸 코드이다.
그렇다면 문자열만 삽입이 가능할까?
class나 id는 삽입이 불가능한 것일까?
그렇지 않다.
클래스 명을 삽입하는 코드는 다음과 같다.
makeDiv.classList.add('input')
console.log(makeDiv) // <div class = "input">make</div>7. DELETE - remove, removeChild
const container = document.querySelector('#container')
const makeDiv = document.createElement('div')
container.append(makeDiv)
makeDiv.remove() // 엘리먼트 삭제 방법- remove()는 node를 삭제하지만 removeChild()는 node는 그대로 두고 부모-자식 관계를 끊어 DOM tree에서 제거한다.
- remove()는 반환값이 없지만 removeChild()는 삭제한 node 참조를 반환한다.
아직 아리송한 개념들이 많지만 반복적으로 읽고 개발자 도구에 직접 실행을 하면서 내 것을 만들기 위해 노력해야겠다 :)