4일차 DOM 조작하기

1. DOM 을 javascript 로 조작하여 HTML element를 추가하거나 삭제, 혹은 내용을 변경 할 수 있다.

  • createElement - CREATE
  • querySelector, querySelectorAll - READ
  • textContent, id, classList, setAttribute - UPDATE
  • remove, removechild, innerHTML=””. textContent=”” - DELETE
  • appendChild - APPEND
  • .append() / prepend()의 차이점
    • .append() 는 선택된 요소의 마지막에 새로운 요소나 컨텐츠를 추가한다
    • .prepend() 는 선택된 요소의 첫번쨰에 새로운 요소나 컨텐츠를 추가한다.
  • appendchild / append 의 차이점
    • 둘다 부모노드에 자식노드를 추가하는 메서드
    • append 메서드를 활용하면 노드 객체나 text 를 사용할 수 있다. 또한 여러 개의 자식 요소를 설정할 수 있다. return 값을 반환하지 않는다.
    • appnedchild 는 오직 노드 객체만 받을 수 있다. 오직 하나의 노드만 추가할 수 있다. return 값을 반환합니다.

2. CSS selector를 이용하면 효율적으로 DOM 을 들여다 볼 수 있다.

  • document.querySelector
  • 여러개를 가져오기 위해선 document.querySelectorAll 사용 가능. 이렇게 조회해온 HTML엘리먼트들은 배열과 유사하게 for문을 사용할 수 있다. 이런 ‘배열 아닌 배열’을 유사배열, 배열형 객체 등의 이름으로 부른다.
  • 복잡한 선택자로 사용할 수 있다.
  • 아래 결과는class 이름이 user-pannel.main 인 div 안의 이름이 login 인 input 중 첫번째 요소입니다. 
    var el = document.querySelector("div.user-panel.main input[name=login]");
  • div 생성 후 dev 라는 글자를 넣은 뒤 class 지정하기 
    const oneDiv = document.createElement('div')
oneDiv.textContent = 'dev'
oneDiv.classList.add('tweet')
const container = document.querySelector('#container')
container.append(oneDiv)
  • textContent 와 innerHTML 의 차이 : innerHTML 은 element의 속성으로, 해당 element 의 HTML을 읽어오거나, 설정할 수 있다. textContent 는 node의 속성으로, <script> 나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트값을 그대로 읽습니다.

  • innerhtml은 익스플로러에서 innerhtml속성을 이용해 script-injection 공격을 할 수 있다. 외부에서 태그 수정을 하여 악성 코드가 들어올 수 있다.

  • append 된 엘리먼트를 삭제할 수 있다. 
    tweetDiv.remove()
  • 컨테이너 아래 모든 자식 엘리먼트 지우기 
    document.querySelector('#container').innerHTML = ''
  • innerHTML 은 여러 보안상 문제를 가지고 있기때문에 메소드를 활용해서 지울 수 있다. 
    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()
}

3. 추가로 공부하고싶은 내용

  • element와 node의 차이 (difference between element and node in javascript dom);
  • children과 childNodes의 차이 (difference between children and childNodes in javascript dom);
  • removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom);
  • tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist);
  • tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array);
  • querySelector의 부모는 꼭 document 객체여야만 할까?;
  • 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까;
  • createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어하는 방법;

Updated: