FEDev Story

[DOM] DOM을 깨우치다 본문

Javascript/DOM

[DOM] DOM을 깨우치다

지구별72 2016. 3. 7. 23:05


DOM을 깨우치다 (가치에 대한 완전한 이해)
코디 린들리 저  안재우 역  비제이퍼블릭  2013.11.22.

7.5  네티즌리뷰[3건]  도서구매 20,000원 → 18,000원(-10%)
소개 『DOM을 깨우치다』는 DOM 라이브러리 없이 문서 개체 모델에 대한 스크립트를 작성하여 HTML을 효율적으로 조작하는 방법을 소개한다. 최신 브라우저에 기본적으로 존재하는개념들과 코드를 사용하여 DOM 스크립트에서 JQUERY가 수행하고 있는 역할을 이해하고 오버헤드를 줄여하 하는 모바일 장치 등...

1장. 노드 개요

1.2 노드 개체 유형

1.3 Node 개체로부터 상속받은 하위 노드 개체

1.5 노드의 유형과 이름 식별하기

1.6 노드 값 가져오기

1.7 JavaScript 메서드를 사용해서 Element 및 Text 노드를 생성하기

1.8 JavaScrpt 문자열을 사용하여 DOM에 Element 및 Text 노드를 생성 및 추가하기

1.9 DOM 트리의 일부를 JavaScript 문자열로 추출하기

1.10 appendChild() 및 insertBefore()를 사용하여 노드 개체를 DOM에 추가하기

1.11 removeChild() 및 replaceChild()를 사용하여 노드를 제거하거나 바꾸기

1.12 cloneNode()를 사용하여 노드를 복제하기

1.14 직계 자식 노드 전부에 대한 리스트/컬렉션 얻기

1.15 NodeList 나 HTMLCollection을 JavaScript 배열로 변환

JavaScript 배열로 변환하기 위해 .slice() 메서드를 사용하고 있는데, 실제로는 아무것도 잘라내지 않는다. slice() 가 배열을 반환하므로 유사배열 리스트를 JavaScript Array로 변환하는데 사용하고 있을 뿐이다.

1.16 DOM 내의 노드 탐색

1.17 contains()와 compareDocumentPosition()으로 DOM 트리 내의 Node 위치를 확인하기

1.18 두 노드가 동일한지 판단하기


2장. Document 노드

2.2 HTMLDocument의 속성 및 메소드(상속 포함)

2.3 일반적인 HTML 문서 정보 얻기 (제목, url, referrer, 최종 수정일, 호환모드)

2.4 document 자식 노드

2.5 document는 <!DOCTYPE>, <html lang="en">, <head>, <body>에 대한 바로가기를 제공한다.

2.7 문서내에서 포커스를 가지고 있거나 활성상태인 노드에 대한 참조를 얻기

2.8 문서 혹은 문서 내의 특정 노드가 포커스를 가지고 있는지 판별하기

2.9 document.defaultView는 최상위/전역 개체에 대한 바로가기다.


'Javascript > DOM' 카테고리의 다른 글

Element 객체 - 조회 API  (0) 2017.02.10
Element 객체 - 식별자 API  (0) 2017.02.10
Element 객체  (0) 2017.02.10
HTML Collection  (0) 2017.02.10
HTMLElement  (0) 2017.02.10
'Javascript/DOM' Related Articles more
Comments