✏️Achievement Goals

✅ DOM의 개념을 이해할 수 있다.
✅ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
✅ DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.

📝summary

DOM Document Object Model의 약자로,
html 문서의 구조와 관계를 객체(object)로 표현한 모델

🤯그래서 도대체 돔이 뭔데????????

자바스크립트는 HTMl 조작에 특화된 언어다
HTML 조작을 하기 위해서는 HTMl을 자바스크립트가 해석하고 이용할 수 있는
객체(Object) 자료형으로 만들어주는 작업이 필요하다

<div id="practice" class="red">안녕하세요</div>

이렇게 HTMl 파일에 div 태그가 있으면 자바스크립트로 변경이 가능하다
이때 자바스크립트로 div를 조작하기 위해서 컴퓨터가 div를 객체(Object)
자료형으로 정리를 해놓는다는 것이다

var document = {
	div태그 : {
    	id : {practice}
        style : {color : "red"}
        innerHTML : "안녕하세요"
    }
}

위의 코드와 비슷하게 객체 형식의 자료에 정리를 해 두어야 원하는 자료를 가져오고 변경 할 수 있다 이게 바로 DOM이다 !

이렇게 html문서의 태그를 자바스크립트가 이용할 수 있는 객체(Object)로 만드는 것을 DOM 이라고 한다
DOM은 자바스크립트를 사용해서 엘리먼트의 속성을 얻어내거나 변경할때 사용 한다

📚DOM 으로 HTML 조작하기

브라우저는 DOM tree를 찾고 조작하는 걸 쉽게 도와주는 여러 가지 메소드를(DOM API)를 제공한다
여러가지 메소드를 배워보자!

1. 새로운 엘리먼트 만들기

활용하기 위해서는 변수에 할당해주면 된다

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

2. 문자열 입력

newEl.textContent = '문자열 입력은 textContent'
console.log(newEl) // <div>문자열 입력은 textContent<div>

3. 클래스 추가

newEl.classList.add('red')
console.log(newEl) // <div class = 'red'>문자열 입력은 textContent<div>

4. 엘리먼트 안에 추가하기

document.body.append(newEl)

엘리먼트가 아직 화면상에는 보이지 않는다
화면에 보이게 하고 싶다면 append 메소드를 사용해서 body 태그 안에 넣어준다

이렇게 추가된 웹페이지를 볼 수 있다

이때 바디태그가 아닌 원하는 곳에 넣기 위해서는
원하는 곳의 정보를 조회할 수 있어야 한다

5. 정보 조회 (객체 반환)

element = document.querySelector(selectors);
// selector의 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 
// 일치하는게 없으면 null을 반환한다

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의
첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있고
셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용된다

  <body>
    <div id="container">
      <h2>Tweet List</h2>
      <div class="tweet">hello</div>
      <div class="tweet">world</div>
      <div class="tweet">code</div>
      <div class="tweet">states</div>
    </div>
  </body>

이런 코드가 있다면

querySelector : 선택자가 선택하는 요소의 첫번째 요소를 반환

console.log(document.querySelector(".tweet")) 
// <div class="tweet">hello</div>

querySelectorAll : 모든 요소(NodeList)를 반환

console.log(document.querySelectorAll(".tweet")) 
// NodeList {0: HTMLDivElement, 1: HTMLDivElement, 2: HTMLDivElement, 3: HTMLDivElement, entries: ƒ entries()…}
// 0: <div class="tweet">hello</div>
// 1: <div class="tweet">world</div>
// 2: <div class="tweet">code</div>
// 3: <div class="tweet">states</div>

위의 코드에서 container 안에 div 태그를 추가해 주고 싶다면 이렇게 사용 할 수 있다

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

6. 삭제

1) 삭제하려는 엘리먼트의 위치를 알고 있는 경우

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // append 했던 엘리먼트를 삭제할 수 있다

2) 여러개의 자식 엘리먼트 삭제

document.querySelector('#container').innerHTML = '';
// id가 container인 엘리먼트 아래의 모든 엘리먼트를 지운다

innerHTML은 보안상의 문제를 가지고 있기 때문에 다른 방법을 사용한다

innerHTML은 크로스 사이트 스크립팅 공격에 취약하다는 문제가 있다 innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에, 해커가 <script> 태그를 사용해 JavaScript 코드를 작성한 뒤 실행되도록 만들 수 있다

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
// removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드이다
// 모든 자식 엘리먼트를 삭제하기 위해, 반복문을 활용할 수 있다
// 자식 엘리먼트가 남아있지 않을 때까지, 
// 첫 번째 자식 엘리먼트를 삭제하는 코드이다

3) 원하지 않는 부분까지 지워지는 경우 방지

<h2>Tweet List</h2> 제목에 해당하는 h2 태그는 남겨놓고 싶을 경우

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}
// container의 자식 엘리먼트가 1개만 남을 때까지
// 마지막 자식 엘리먼트를 제거

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

// 직접 클래스 이름이 tweet인 엘리먼트만 찾아서 지우는 방법

Author And Source

이 문제에 관하여(코드스테이츠 4주차 / DOM), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@support/코드스테이츠-4주차-DOM

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

코드스테이츠 4주차 / DOM