11장 DOM 확장

11장 DOM 확장

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

1.선택자 API

1.1 querySelector() 메서드

• 매개변수로 CSS 쿼리를 받고 패턴에 일치하는 첫 번째 자손 요소를 반환하며 일치하는 것이 없다면 null 반환.

1.2 querySelectorAll()

• CSS 쿼리를 매개변수로 받되 일치하는 노드 전체(NodeList)를 반환함.

1.3 matchesSelector()

• CSS 선택자를 받고 요소가 그에 일치하면 true, 일치하지 않으면 false

2. 요소 간 이동

• 버전 9 미만의 인터넷 익스플로러는 타 브라우저와 달리 요소 사이의 공백을 텍스트 노드로 반환하지 않음.
  ->> childNodes나 firstChild 같은 프로퍼티를 사용할 때 차이가 발생.
  • childElementCount : 자식 요소 숫자 반환
  • firstElementChild : 첫 번째 자식 요소
  • lastElementChild : 마지막 자식 요소
  • previousElementSibling : 이전 형제 요소
  • nextElementSibling : 다음 형제 요소

3. HTML5

3.1 클래스 관련 추가사항

• getElementsByClassName() : 클래스 이름 문자열을 매개변수로 받으며, 해당 클래스를 모두 가진 요소의 NodeList를 반환.
• classList 프로퍼티 : 클래스 이름을 안전하고 단순하게 조작 가능.
  • add(value) : 주어진 문자열 값 목록에 추가.
  • contains(value) : 주어진 값이 목록에 존재하면 true, 없으면 false
  • remove(value) : 주어진 문자열 값을 목록에서 제거
  • toggle(value) : 값이 목록에 존재하면 제거, 아니면 추가.

3.2 포커스 관리

• Document.activeElement : 현재 포커스를 가진 DOM 요소를 가리키는 포인터

3.3 HTMLDocument의 변화

• readyState 프로퍼티

  • loading : 문서를 불러오는 중입니다
  • complete : 문서를 완전히 불러왔습니다.

• 호환성 모드 : compatMode

  if (document.compatMode == "CSS1Compat") {

  alert("Standards mode"); // 표준모드

  } else {

  alert("Quirks mode"); // 쿽스 모드

  }

• 프로퍼티

3.4 문자셋 프로퍼티

• charset : 문서의 문자셋을 나타냄, 기본값은 UTF-16
• defaultCharset : 브라우저 및 시스템의 기본 설정에 따라 문서에 기본 적으로 적용해야 할 문자셋을 나타냄.

3.5 커스텀 데이터 속성

• 요소의 렌더링에 필요한 정보나 시맨틱 값이 아닌 데이터를 접두사 data- 가 붙은 비표준 속성에 제공 하도록 함.

• 요소의 dataset 프로퍼티를 통해 접근

• dataset 프로퍼티는 이름-값 쌍으로 이루어진 DOMStringMap 인스턴스

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

  var div = document.getElementById("myDiv");

  var appId = div.dataset.appId;
  var myName = div.dataset.myname;

3.6 마크업 삽입

• innerHTML 프로퍼티
  • innerHTML 읽기모드 : 요소와 주석, 텍스트 노드 등의 자식 노드를 모두 나타내는 HTML 표현으로 반환.
  • innerHTML 쓰기모드 : 주어진 값을 바탕으로 새 DOM 서브트리를 만들어 요소의 자식 노드를 완전히 교체.
  • 주의사항
    • innerHTML로 삽입된