11. DOM 확장

선택자 API

• querySelector(): CSS 선택자와 맞는 첫 번째 엘리먼트를 반환, 없으면 NULL을 반환, document와 element 객체에서 지원
• querySelectorAll(): CSS 선택자와 맞는 모든 엘리먼트를 NodeList로 반환, 없으면 빈 NodeList 반환,
  • document, documentFragment, element 객체에서 지원
  • NodeList는 getElementsByTagName과 달리 정적인 객체. 성능 이슈 해결
• matches(): 셀렉터와 엘리먼트가 일치하면 true, 일치하지 않으면 false를 반환

요소간 이동

• 자식 또는 형제 노드를 엘리먼트 노드에 한정지음
• 브라우저별로 공백 텍스트 노드가 다르게 처리되어 특정 노드를 선별하기 어려웠는 데
• 이를 이용하면, 특정 노드를 선별하기 쉬워짐
• childElementCount, firstElementChild, lastElementChild, previousElementChild, nextElementSibling 등

HTML5

• getElementsByClassName(): 동적 NodeList 반환
• classList 프로퍼티: IE 미지원, 크롬이랑 파폭 지원
• document.activeElement, document.hasFocus(): 포커스되 엘리먼트, 포커스되고 있는 지 확인
• document.readyState: loading 또는 complete 값에 따라 문서를 불러오는 중인지, 문서가 완전히 로드된 상태인지 확인할 수 있음
  • onload 핸들러가 발전되 것
• document.head
• document.charset
• element.scrollIntoView()

커스텀 데이터 속성

• 속성이름에 data-를 붙인다.
• 엘리먼트의 dataset 속성으로 접근가능

마크업 삽입

• innerHTML
  • 내부의 DOM 트리 교체
  • 스코프 없는 script, style 엘리먼트는 스코프있는 엘리먼트 다음에 와야 동작함
• outerHTML
  • 자신까지 포함하여 DOM 트리 교체

메모리와 성능문제

• 엘리먼트를 삭제할 때는 관련있는 이벤트 핸들러를 삭제하는 것이 좋다.
• innerHTML은 한 번만 하는 것이 좋다.

전용 확장

브라우저 제조사가 단독으로 구현한 기능, 일부는 이후에 DOM 표준으로 받아들여짐

• 문서모드: 어떤 브라우저 버전으로 렌더링할지에 대한 정보 제공
  • HTML의 X-UA-Compatible이라는 값으로 표시함
• children 프로퍼티: 자식 노드 중 엘리먼트 노드만 가져옴
• element.contains(theOtherElement): 자식 노드인지 판단
• innerText, outerText
• 스크롤: scrollIntoView()만이 모든 브라우저엣 구현된 메서드이다.