하루 30분 모딥다. DOM 조작

DOM 조작

1. 새로운 노드를 생성하여 DOM에 추가, 혹은 기존 노드 삭제 또는 교체 하는 것으로, 리플로우와 리페인트가 발생한다.

innerHTML

1. 프로퍼티는 setter와 getter 모두 존재하는 프로퍼티로 HTML 문자열을 반환.
2. 크로스 사이트 스크립팅(XSS) 공격에 취약하다. 때문에 HTML5를 지원하는 브라우저에서는 동작하지 않는다.
3. 요소를 모두 제거하고 생성하기 때문에 효율적이지 못하다.

insertAdjacentHTML

1. innerHTML과 달리 기존 요소를 제거하지 않고 위치를 지정해 새로운 요소를 삽입한다.
2. 첫번 째 인수로 전달할 수 있는 문자열은 아래 네가지다.
3. const $foo = doucument.getElementById("foo") $foo.insertAdjacentHTMl("beforebegin",'<p>text</p>') $foo.insertAdjacentHTMl("afterbegin",'<p>text</p>') $foo.insertAdjacentHTMl("beforeend",'<p>text</p>') $foo.insertAdjacentHTMl("afterend",'<p>text</p>')
4. innerHTML과 같이 크로스 사이트 스크립팅 공격에 취약하다.

노드 생성과 추가

1. createElement. 요소 노드 생성
2. createTextNode. 텍스트 노드 생성
3. appendChild. 텍스트 노드를 요소 노드에 자식 노드로 추가
4. appendChild. 요소 노드를 DOM에 추가.

const $foo = doucument.getElementById("foo")

const $element = document.createElement("li")
const $text = document.createTextNode('안녕하세요')

$element.appendChild($text)
$foo.appendChild($element)

• 복수의 노드 생성과 추가
  1. appendChilde를 이용하여 DOM에 요소노드를 추가하면, 리플로우와 리페인트가 실행된다. 따라서 여러개의 노드를 생성하고 추가하고 싶다면 컨테이너 요소를 넣어서 리플로우와 리페인트를 한 번만 실행하도록 한다.

  const $container = document.createElement(`div`)
  
  ['A','B','C'].forEach(text => {
  	const $li = document.createElement("li")
  	const $text = document.createTextNode(text)
  	$li.appendChild($text)
  	$container .appendChild($li)
  })
  

  1. 위 예제처럼 사용한다면 불필요한 div 요소가 생성된다. 따라서 DocumentFragment 노드를 사용한다. DocumentFragment 노드는 DOM에 추가될 때 자신은 제거되고 자식 노드만 DOM에 추가된다.

  const $container = document.createDocumentFragment()
  
  ['A','B','C'].forEach(text => {
  	const $li = document.createElement("li")
  	const $text = document.createTextNode(text)
  	$li.appendChild($text)
  	$container .appendChild($li)
  })
  

• 노드 삽입
  1. appendChild. 마지막 자식 요소로 삽입
  2. insertBefore(newNode, childNode). 첫 번째 인수를 두 번째 인수 앞에 삽입. 두 번째 요소가 자식요소가 아니라면 DOMExeption 에러 발생. null이면 appendChild와 같이 동작
• 노드 이동
  • 이미 DOM에 존재하는 노드에 appendChild와 insertBefore를 사용하여 다시 DOM에 추가한다면 노드가 이동한다.
• 노드 복사
  • cloneNode([deep : true | false]). 노드를 복사한다. 인수의 값에 따라 깊은 복사와 얕은 복사를 할 수 있다.
• 노드 교체
  • replaceChild(new, old)
• 노드 삭제
  • removeChild(child)