[JavaScript/Web] Dom다루기

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

DOM 다루기

Dom의 CRUD( create, read, update, delete )에 대해서 배운다.

학습 목표

• DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE)
• DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ)
• DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE)
• DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE)
• 생성한 HTML Element를 부모 엘리먼트의 자식 엘리먼트로 포함할 수 있다. (APPEND)
• innerHTML과 textContent의 차이를 이해한다.

심화 목표

• DOM과 JavaScript의 차이에 대해 이해할 수 있다.
• createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
• HTML5 template tag 사용법을 이해할 수 있다.
• element와 node의 차이를 이해할 수 있다.
• children과 childNodes의 차이를 이해할 수 있다.
• remove와 removeChild의 차이를 이해할 수 있다.
• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
• offsetTop 등을 이용하여 좌표 정보를 조회할 수 있다.
• offsetWidth 등을 이용하여 크기 정보를 조회할 수 있다.

---

Create

document.createElement('div')

다음 코드는 새로운 div 요소를 만듭니다.
다음을 변수 tweetDiv에 넣는다하면 다음과 같습니다.

const tweetDiv = document.createElement('div')

이렇게 생성된 div는 어디에도 연결되어 있지 않기 때문에 아무런 영향을 줄수 없습니다.

Append

append는 create한 div를 연결할 수 있게 해줍니다.

document.body.append(tweetDiv)

이전에 create한 tweetDiv를 append를 통해 body에 연결했습니다.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

다음은 container라는 id의 요소를 찾아 container변수에 넣고, div를 생성하여 tweetDiv변수에 넣습니다.
tweetDiv변수의 div태그는 container변수의 container태그에 연결됩니다.

Read

이전에 javascript에서 html요소를 사용할때 querySelector 을 사용한 적 있습니다.

document.querySelector('.tweet')

다음은 tweet이라는 class명을 갖고 있는 엘레먼트를 조회합니다.
class의 경우 id와 달리 유일하진 않습니다.
즉, html에서 하나 이상 갖을수 있습니다.
하지만 querySelector는 첫번째 엘리먼트 하나만 출력합니다.

querySelectorAll을 사용하면 같은 이름의 클래스의 요소를 유사배열로 받아 옵니다.

Update

const oneDiv = document.createElement('div');            // div태그를 생성한다
oneDiv.textContent = 'dev';                                // 'dev'라는 text를 생성된 div에 넣는다
oneDiv.classList.add('tweet');                            // 생성된 div에 'tweet'이라는 class를 추가한다
const container = document.querySelector('#container')    // container라는 id를 갖고 있는 요소를 찾는다
container.append(oneDiv)                                // container와 생성한 div를 연결한다.

Delete

요소.remove() 를 하면 삭제가 가능하다.

const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

 

여러개의 자식 요소를 지우는 방법은 innerHtml을 사용하면 쉽게 가능하다.

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

다음은 container자식 요소를 전부 지운다.
하지만 innerHtml은 보안 의 문제를 갖고 있기 때문에 다른방법을 추천한다.

const container = document.querySelector('#container');
container.removeChild(container.firstChild);

다음은 container의 첫번째 자식 요소를 지우는 코드이다.
반복문과 함께 사용하면 처음부터 끝을 지우는 코드도 만들 수 있다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
  }

특정 클래스만 지울수도 있습니다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}