22.02.27(일) DOM

DOM API

• 요소 노드 취득(Id,Tag,Class,CSS선택자 이용)

document.getElementById('banana'); 
document.getElementByTagName('li'); //HTMLCollection반환
document.getElementByClassName('fruit'); //HTMLCollection반환
document.querySelector('.banana'); //Nodelist반환

노드 객체의 상태 변경과 상관없이 안전하게 DOM 콜렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.

• DOM 조작
  DOM 조작은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다.
  DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하는 원인이 되어 성능에 영향을 주므로 주의해서 다루어야 한다.
• HTML 마크업 취득 or 변경

document.getElementById('foo').innerHTML = '<li class="banana">Banana</li>';