• DOM(Document Object Model) : HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model. 즉, 자바스크립트를 알면 DOM을 활용하여 HTML을 조작할 수 있다는 의미

• console.dir(조회할 DOM) : DOM 구조를 조회하기 위해서는 console.dir이 유용. console.log와 달리 DOM을 객체의 모습으로 보여준다.

console.dir(document.body)
console.dir(document.body.children)
// body의 children 조회
console.dir(document.body.children)[1]
// body의 children의 첫번째 element 조회

매번 document.body 로부터 찾아가는 것은 정말 번거로우니 따로 변수 선언을 하여 이 정보를 저장.

let newsContents = console.dir(document.body.children)[1];

• 트리 구조의가장 큰 특징 : 부모가 자식을 여러개 가지고, 부모가 하나인 구조가 계속 반복된다는 점. 즉, 부모가 가진 하나, 혹은 여러개의 자식 엘리먼트를 조회하는 코드를 계속 반복해서 실행.

DOM 조작

CRUD : Create / Read / Update / Delete

Create : createElement

document.createElement('div')
const createDiv = document.createElement('div')

div를 만들고 변수에 담아줘도 변화가 없다. createDiv는 현재 공중에 떠있는 것이나 다름 없다. 트리 구조에서 아무것도 연결이 되어있지 않은 하나의 노드 상태이다. 이 공중에 떠있는 엘리먼트를, APPEND 해야만 실제 웹 페이지 상에서도 확인할 수 있다.

• Append : append

document.body.append(tweetDiv)
// document.body에 createDiv를 붙인다.

아직 웹 화면상에서 보이지는 않지만 이제 HTML에 새로운 div가 추가되었다 (개발자 도구에서 확인 가능)

READ : document.querySelector, document.querySelectorAll

const selectTweet = document.querySelector('.tweet')
// class 명이 tweet인 HTML element 조회

const selectTweets = document.querySelectorAll('.tweet')
// class 명이 tweet인 HTML elements 모두 조회

내부에 담아주기

const container = document.querySelector('#container')
// querySelector로 container라는 id를 선택하여 변수(container)에 담아준다.

const createDiv = document.createElement('div')
// div element를 생성하는 코드를 변수(createDiv)에 담아주기

container.append(createDiv)
// container에 createDiv를 붙여주기.

// 위 코드와 아래 코드는 같다. 변수에 담아줘서 편하게 사용

document.querySelector('#container').append(document.createElement('div'))

• getElementById / getElementByClassName 등 getElement는 비슷한 역할을 하는 오래된 방식.

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

Update : textContent / classList.add

• textContent : text 추가

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

createDiv.textContent = 'dev';
console.log(createDiv) // <div>dev</div>

• classList.add : class 추가

createDiv.classList.add('tweet')
console.log(createDiv) // <div class="tweet">dev</div>

• id.add :id 추가

createDiv.setAttribue('id', 'only')
console.log(createDiv) // <div class="tweet" id='only'>dev</div>

• append :내부에 담아주기

const container = document.querySelector('#container')
container.append(oneDiv)

• setAttribute: 속성 추가

엘리먼트.setAttribute(추가할 속성 이름, 값);

DELETE - remove, removeChild

• remove() :element 삭제

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // tweetDiv 엘리먼트 삭제

• removeChild : 자식 element 삭제

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.removeChild(li) // tweetDiv의 자식 엘리먼트 li 삭제

• textContent = “” : 이 방법으로도 삭제 가능.

APPEND : append / appendChild

• append : ParentNode의 마지막 자식 뒤에 Node 객체 또는 DOMString 객체를 삽입한다. DOMString 객체는 Text 노드처럼 삽입한다.

• appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.

[textContent vs innerText vs innerHTML]

• textContent : 가급적 textContent를 사용하는 것이 좋습니다. 성능과 보안에 강점이 있고, 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문입니다.

• innerText : 특정 노드에 렌더링 된(화면에 보이는 그대로의) 텍스트를 읽어올 때 유용합니다. 하지만 내부에 특별히 스타일 적용이 없는 문자열을 할당할 때는 성능상 적합하지 않습니다. 단, IE(IE8 이하) 환경을 중점으로 고려한 프로젝트라면 textContent 대신 사용하도록 합니다.

• innerHTML : HTML Parsing이 필요한 문자열에만 사용하도록 합니다. 그게 아니라면, 성능상 좋지 않고 XSS 공격에도 취약하므로 innerHTML은 사용하지 않는 것이 좋습니다.

출처 : https://velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

[Advanced Challenge]

• createDocumentFragment
• HTML5 template tag 사용법
• element vs node
• children vs childNodes
• remove vs removeChild
• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
• 좌표 정보 조회 - offsetTop…
• 크기 정보 조회 - offsetWidth…

DOM 추가 공부

addEventListener vs .onclik

```