JS - DOM 조작

<포스팅 주요 내용>

• DOM의 개념
• document 객체의 생성, 조회, 변경
• document 객체의 제거
  + removeChild 와 remove 비교
  + 여러개의 자식 element 지우기
• document 객체의 추가
  + 이미 존재하는 노드를 추가하면 어떻게 될까?
• innerHTML과 textContent의 차이
  
  **참고**
  대분류 제목 색상
  소분류 제목 색상

 

---

DOM이란?
Document Object Model의 약자로, HTML 요소를 Object처럼 조작할 수 있는 Model 입니다. 

 

document 객체 CRUD(Create, Read, Update and Delete)

**DOM 에는 HTML에 적용(APPEND) 하는 메소드가 따로 있음

 

 

---

Create

: createElement

 

element 생성

• 웹 페이지 상에 보이지 않음. 공중부양 상태. DOM 트리 구조에 아직 연결되지 않음.

const tweetDiv = document.createElement('div');

---

Read

: querySeletor, querySeletorAll

query : 조회하다(jargon), seletor : 태그, id, class 가 많이 사용됨

Element 조회

**querySelector()

• 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
  

  const oneTweet = document.querySelector('.tweet');

• 더 상세하게 Selector 조회하기
  

  const el = document.querySelector("div.user-panel.main input[name=login]");
  //클래스가 "user-panel main"인 <div> 안의, 이름이 "login"인 <input> 중 첫 번째 요소입니다.

• ?? querySelector의 부모는 꼭 document 객체여야만 할까요?

**querySeleterAll()

• 선택자를 통해 여러개의 Element 를 가져오기 위해서 사용한다. 
• 배열처럼 사용할 수 있는 유사 배열, Array-like Object
• 유사배열 배열로 바꾸기
  

  [...document.querySelectorAll('.item')]
  //spread 연산자 사용

자식 엘리먼트를 찾고 싶다면?

ex ) document.body.children

 

부모 엘리먼트를 찾고 싶다면? 

ex ) document.body.parentElement

 

오래된 방식들..

**getElementByID()

• elemment 의 id 로 접근할 수 있다. 

 

**getElementByClassName()/getElementsByClassName()

• element 의 class 이름으로 접근할 수 있다. 

 

---

Update

:textContent, id, classListm setAttiribute

 

Element 변경

**setAttribute(name, value)

• 지정된 요소의 속성 값을 설정한다. 속성이 이미 존재하면 값이 업데이트 되고, 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가된다. 
  

  let aElement = document.createElement('a');
  
  aElement.setAttirbute('id', 'javascript');

 

**classList.add()/classList.remove()

• Element에 class name을 추가/삭제할 수 있다.

 

**textContent

• Element 및 Node에 텍스트를 추가할 수 있는 메서드이다. 반환값은 문자열 또는 null이다. 

---

Delete

: remove, removeChild, innerHTML, textContent

 

Element 제거

 

**removeChild() , remove()

• remove()는 노드를 메모리에서 삭제하고 종료한다.
• 반면에 removeChild()는 메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 제거한다. 최종적으로는 관계를 끊은 해당 노드의 참조를 반환한다.

차이점	remove()	removeChild()
인터넷 익스플로러	미지원	지원
부모 엘리먼트	불필요	필요
반환값	x	삭제한 노드 참조 반환
노드 리스트 삭제	x	0
하위 노드 삭제	0	0

**innerHTML

• 여러 개의 자식 엘리먼트 지우기 
  

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

  -> 보안 문제 발생
  

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

  -> 반복문 이용
• innerHTML 사용은 꼭 필요하지 않으면 쓰지 않는 것이 좋다. innerHTML는 이름 그대로 HTML을 반환한다. HTML tag를 직접 삽입하여 실행하는 형태의 메소드는 늘 이런 위험을 가지고 있다.

---

Append

: appendChild

Element 추가

• 웹 페이지 상에 보임

document.body.append(tweeDiv);

 

**appent()

• ParentNode.append() 메서드는 ParentNode의 마지막 자식 뒤에 Node 객체 또는 DOMString 객체를 삽입.
• 여러개 삽입 가능.
• 문자 추가하기 
  

  parent.append("some text");​

• 함께 추가하기 
  

  let p = document.createElement("p");
  parent.append("some text", p);
  
  console.dir(parent.childNodes); //NodeList [ # text "some text", <p>];

**appendChild()

• Node.appendChild() 메서드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. 하나의 노드만 붙일 수 있다. (text 불가)
• 만약, 주어진 노드가 이미 존재하는 노드라면 새로운 위치로 이동시킨다. 
  한 노드가 문서상의 두 지점에 동시에 존재할 수 없음.
• 추가한 Node 객체를 반환한다. 

 

**prepend()

• ParentNode 의 첫번째 자식으로 Node 객체 또는 DOMStinrg 객체를 삽입한다. 

 

**after()

• 선택한 Element 뒤에 새 Element 를 추가한다. 

 

**before()

• 선택한 Element 앞에 새 Element를 추가한다. 

---

 

innerHTML과 textContent의 차이

• innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다.div안에 있는 HTML 전체 내용을 가져오는 것을 확인 할 수 있습
• textContent는 'Node'의 속성으로, innetText와는 달리 <script>나 <style> 태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽습니다.