11. DOM 확장

다루는 내용

1. 선택자 API 에 대한 이해
2. HTML5 DOM 확장 사용
3. 브라우저 전용 DOM 확장 사용

1. 선택자 API

• CSS 선택자로 패턴을 만들고 그에 맞는 DOM 요소를 선택하는 능력
  • (Ex. jQuery)

1-1 querySelector()

• CSS 쿼리를 받고 패턴에 일치하는 첫 번째 자손 요소를 반환 없으면 null

  var body = document.querySelector('body');
  
  // ID 가 'div1' 인 요소
  var div1 = document.querySelector('#div1');
  
  // 클래스가 selected 인 것 중 첫 번째
  var selected = document.querySelector('.selected')

• Document 타입에서 호출하면 패턴에 맞는 요소를 문서에서 찾으며 Element 타입에서 호출하면 해당 요소의 자손에서만 쿼리

1-2 querySelectorAll()

• querySelector() 와 비슷하나 일치하는 노드 전체를 반환

• 처음 접근한 상태의 NodeList 의 정적 인스턴스 반환

  var ems = document.getElementById('myDiv').querySelectorAll('em');
  
  var selecteds = document.querySelectorAll('.selected');

2. HTML5

• 마크업 언어와 함께 사용하도록 디자인된 자바스크립트 API 를 상세히 설명하고 정의

2-1 클래스 관련

1. getElementsByClassName()

   • 클래스 이름 문자열을 매개변수로 받음
   • 해당 클래스를 가모두 가진 요소의 NodeList 반환

   // div1 의 자손 중 selected 클래스가 있는 요소를 모두 찾음
   var selected = document.getElementById('div1')
   .getElementByClassName('selected');

2. classList 프로퍼티

   • 클래스 이름을 안전하고 단순하게 조작 가능
   • DOMTokenList란 컬렉션 타입의 인스턴스
   • add(value) - 주어진 문자열 값을 목록에 추가
   • contains(value) - 주어진 값이 목록에 존재하면 ? true : false
   • remove(value) - 주어진 문자열 값을 목록에서 제거
   • toggle(value) - 값이 목록에 존재하면 ? 제거 : 추가

   // disabled 클래스 제거
   div.classList.remove('disabled');
   
   // current 클래스 추가
   div.classList.add('current');
   
   // user 클래스 토글
   div.classList.toggle('user');
   
   // bd 클래스 포함여부 확인
   if(div.classList.contains('bd')) {
     // do Something
   }

2-2 포커스 관리

• 사용자가 지금 페이지를 보고 있는지 알 수 있음

• document.activeElement, focus()

  var button = document.getElementById('myButton');
  button.focus();
  console.log(document.activeElement === button); // treu
  console.log(document.hasFocus()); // true

2-3 HTMLDocument의 변화

• readyState : 문서를 불러왔는지 확인
  • loading - 문서를 불러오는 중
  • complete - 문서를 완전히 불러옴

2-4 커스텀 데이터 속성

• 렌더링에 필요한 정보나 시멘틱 값이 아닌 데이터를 접두사 data- 가 붙은 비표준 속성에 제공

• dataset 프로퍼티로 접근 가능

  <div id="myDiv" data-appId="111" data-myName="snack"></div>
  
  var div = document.getElementById("myDiv");
  
  var appId = div.dataset.appId;
  var myName = div.dataset.myName;

• 요소에 데이터를 연결해야 하지만, 사용자에게는 보이고 싶지 않을 때 유용

2-5 마크업 삽입

• innerHTML

  • 읽기모드로 사용 시 요소와 주석, 텍스트 노드 등의 자식 노드를 모두 나타내는 HTML 표현을 반환 (직렬화 후 문자열로 반환)
  • 쓰기 모드로 사용 시 주어진 값을 바탕으로 자식 노드를 교체
  • <script>로 삽입된 것은 실행되지 않음

• outerHTML

  • 호출한 HTML 요소를 자식 노드와 함께 반환

<div>
  <span>hi!</span>
</div>

//innerHTML - div 에서 innerHTML -> <span>만 포함하는 객체
//outerHTML - div 에서 outerHTML -> div 가 포함된 객체

• insertAdjacentHTML

  • beforebegin - 바로 앞 삽입
  • afterbegine - 첫 번째 자식으로 삽입
  • beforeend - 마지막 자식으로 삽입
  • afterend - 바로 뒤에 삽입

• 메모리와 성능 문제

  • 요소와 이벤트 핸들러 사이의 연결이 메모리에 남기 때문에, 위의 메소드를 사용할 땐 제거할 요소의 이벤트 핸들러나 자바스크립트 객체 프로퍼티를 모두 제거해야 함

2-6 scrollIntoView()

• 브라우저 창이나 컨테이너 요소를 스크롤해서 해당 요소가 뷰포트에 보이게 함

  //forms[0] 요소로 이동
  document.forms[0].scrollIntoView();

3. 전용 확장

3-1 문서모드

• IE에서 도입한 개념으로 각 모드마다 CSS, 자바스크립트 기능이 다름
• document.documentMode
• 특정 문서 모드를 강제할 수 있으며, 페이지가 어떻게 동작할지 힌트를 얻을 수 있음

3-2 children 프로퍼티

• 요소의 자식 요소만 포함하는 HTMLCollection
• 요소인 노드만 포함한다는 점을 제외하면 childNodes 와 같음

3-3 contains()

• 주어진 노드가 다른 노드의 자손인지 확인 가능

  document.documentElement.contains(document.body); // true

3-4 innerText, outterText

• 텍스트 노드를 모두 결합한 값을 반환

<P>hello</P>
<ul>
  <li>go 1</li>
  <li>go 2</li>
</ul>
-----------------------------
/* result */
hello
go 1
go 2

• 파이어폭스 에서는 textContent
• outterText 의 경우 자신을 호출한 요소 전체를 변경하기에 사용을 지양

3-5 스크롤

• scrollIntoViewIfNeeded(alignCenter) - 호출한 요소가 뷰포트에서 보이지 않을 경우만 해당 요소로 이동
  • 크롬, 오페라 사파리만 구현
• scrollByLines(lineCount) - lineCount 의 숫자 만큼 스크롤
  • 파이어 폭스에서만 구현 (참고)
• scrollByPages(pageCount) - pageCount 의 숫자 만큼 페이지 스크롤
  • 파이어 폭스에서만 구현 (참고)
• 모든 브라우저에서 지원하는 것은 scrollIntoView() 이므로 보통 이 메소드만 사용