Unit.10 DOM

DOM과 CRUD 

---

CREATE

 

document.createElement

createElement 메서드는 요소를 만들어 준다.

document.createElement('div') //<div>요소를 만든다

자바스크립트로 DOM 을 조작하려면 변수에 담아야 한다.

const tweetDiv = document.createElement('div') // tweetDiv 라는 변수에 <div>요소를 할당한다.

---

APPEND

 

document.target.append(변수)

append 메서드는 요소가 할당된 변수를 타겟에 넣어준다.

document.body.append(tweetDiv)

---

READ

 

querySelector

querySelector 에 '.target 을 첫 번째 인자로 넣으면, 클래스 이름이 target 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

const oneTweet = document.querySelector('.tweet') 
// 클래스이름이 tweet인 요소 중,가장 첫 번째 엘리멘트를 변수onetweet에 할당해줌

 

querySelectorAll

querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아옵니다.

const tweets = document.querySelectorAll('.tweet')

이때 반환된 element 들은 NodeList라는 유사배열로 반환됩니다. 유사배열이란 배열은 아니지만, 마치 배열 처럼 처리할 수 있는 객체를 의미하며, 숫자로 인덱싱 된 key와 length 프로퍼티가 특징입니다.

NodeList는 forEach를 사용할 수 있지만, 배열이 아니기 때문에 map이나 filter, reduce 등의 다른 배열 메서드를 쓸 수 없습니다.

만약 다른 배열 메서드를 사용해야 하는 경우, 스프레드 연산자([...'NodeList'])를 사용하거나 Array.from('NodeList') 문법을 사용하여 배열로 변환하여 사용할 수 있습니다. -출처 테코블

---

CREATE 한 <div> 요소를 id = container에 넣기

const container = document.querySelector('#container') // id가 container인 요소를 찾아서 container 변수에 할당한다.
const tweetDiv = document.createElement('div') // <div>요소를 만들어서 변수 tweetDiv에 할당한다.
container.append(tweetDiv) // container(타겟)에 tweetDiv를 넣는다

---

UPDATE

※textContent , innerText , innerHTML 의 차이는 곧 찾아서 따로 정리 할 예정이다

.textContent

textContent 메서드는 비어있는 요소에 문자열을 입력한다.

textContent  오직 문자열만 다루기때문에 css 요소는 무시된다.

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

 

.innerText

.innerText  메서드는 비어있는 요소에 문자열을 입력한다.

onetweet.innerText = 'dev';
console.log(onetweet) // <div>dev</div>

 

.innerHTML

.innerHTML  메서드는 비어있는 요소에 문자열뿐만 아니라 html태그등 마크업 언어도 입력가능하다.

onetweet.innerHTML = 'dev';
console.log(onetweet) // <div>dev</div>

 

 

.ClassList

ClassList 메서드는 요소에  클래스 네임을 부여한다.

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

 

---

DELETE

 

.remove

remove 메서드는 target요소를 삭제해준다.

tweetDiv.remove() // tweetDiv에 할당된 요소를 삭제한다.

 

.innerHTML

innerHTML메서드는 ()안에 타겟의 자식요소에 공백을 넣어 삭제하는 용도로도 사용이 가능하다..

document.querySelector('#container').innerHTML = ''; // id가 container인 요소의 자식요소를 모두 삭제한다.

※innerHTML은 간편하고 편리하지만 보안면에서 몇 가지 문제를 가지고 있다.

이를 대신할 다른 메서드가 있는데, removeChild 메서드이다.

 

 

removeChild 

removeChild 메서드는 innerHTML과 달리 요소를 지정해서 삭제하는 메서드이다. 반복문을 활용 할 수도 있다.

const container = document.querySelector('#container'); // id가 container인 요소를 찾아서, container 변수에 할당
while (container.firstChild) { // while 문을 통해 반복, container의 첫번째 자식요소가 더이상 없을 때 까지
  container.removeChild(container.firstChild); // 첫번째 자식요소를 삭제한다.
  }//container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거한다.

---

const container = document.querySelector('#container');
while (container.children.length > 1) { // container의 자식요소가 1개만 남을때 까지
  container.removeChild(container.lastChild); // container의 마지막 자식요소를 삭제한다.
  } // 첫번째 자식만 남게된다.

---

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){ // 클래스 네임이 tweet인 요소들을 돌면서
    tweet.remove(); // 삭제한다.
})
// or
for (let tweet of tweets){
    tweet.remove()
}