개요
jQuery 창시자 John Lessig 작성 “Pro JavaScript Techniques”의 번역 책이야. 자바스크립트가 가지고 있는 속성을 바탕으로 객체지향적 요소를 잘 설명하고 있다. jQuery의 기본 기술을 살펴볼 수 있습니다.
도서 발표
한동안 JavaScript로 작업한 개발자라면 기본적인 문법 및 문장 구조와 같은 기본적인 사항을 배제할 수 있습니다., 즉시 JavaScript의 객체 지향 개념과 테스트 도구, 배포 방식, 브라우저 지원 등 최신 JavaScript 개발에 필요한 기술을 실제 예제와 소스 코드와 함께 설명합니다..
JavaScript로 개발한 사람, 더 깨끗하고 사용자 친화적인 코드를 작성하려면 어떻게 해야 합니까?, JavaScript를 객체 지향 언어로 사용하는 방법에 대해 생각해 보셨을 것입니다.. 또한, 내 애플리케이션을 테스트하는 데 적합한 도구가 있습니까?, 배포 전 주의해야 할 사항이 있나요?, 테스트하지 않은 브라우저에 나타나는 오류에 대해 걱정했을 수도 있습니다..
이 책은 자바스크립트를 오랫동안 사용해 온 개발자라면 이미 익숙할 기본 구문, 문장 구조 등의 기본 사항을 다룬다., 즉시 JavaScript의 객체 지향 개념과 테스트 도구, 배포 방식, 브라우저 지원 등 최신 JavaScript 개발에 필요한 기술을 실제 예제와 소스 코드와 함께 설명합니다..
이 책의 저자 존 레식(요하네스 레지그)은, 가장 인기 있는 도서관 jQuery개발한 자바스크립트 전문가이기도 하다., 그 경험으로 라이브 블로깅(라이브 블로깅)또는 끝없는 블로그(끝없는 블로그) 이 책은 또한 즉시 실천할 수 있는 예를 제시합니다..
이 책의 독자는 자신만의 라이브러리를 구축할 수 있는 충분한 도구를 얻을 뿐만 아니라, 최신 기술로 무장하면 JavaScript 전문가가 될 수 있습니다..
작가
존 레식 (요하네스 레지그)
소개: JavaScript 프로그래밍 언어에 대한 열정을 가진 프로그래머 및 기업가.. 자바스크립트 라이브러리 jQuery의 설립자이다 jQuery주요 개발자(리드 개발자)자아2008년2017년부터 그는 다른 많은 웹 기반 프로젝트의 수석 개발자이기도 합니다..
5장 문서 개체 모델
최신의 모든 것 브라우저 돔 기본 지원HTML문서 내부 돔표현식도 지원됩니다..
5.1 문서 개체 모델 소개
돔은 W3C에 의해 발행 XML 문서 제출을 위한 표준입니다..
돔은 직관적 XML 계층 구조를 탐색하는 방법을 제공하기 위해 만들어졌습니다..
5.2 돔 탐구하다
돔~ 안에 XML 검색 가능한 트리 형태로 구조를 표현합니다..
모든 XML 문서는 단일 루트 노드인 문서 요소로 시작됩니다..
모든 돔 매듭에는 친척이 있습니다(부모, 어린이, 형제)표시가 있습니다.
모든 돔 각 노드에는 자체 친족에 대한 포인터 세트가 있습니다..
요소(nodeType = 1): 대부분의 요소가 이 유형입니다..
텍스트(노드 유형=3): 문서의 모든 텍스트는 이 유형입니다..
문서(nodeType = 9): 문서의 루트 요소입니다..
간단히 돔 구하다
function prev( elem ) {
do {
elem = elem.previousSibling;
} while ( elem && elem.nodeType != 1 );
return elem;
}
function next( elem ) {
do {
elem = elem.nextSibling;
} while ( elem && elem.nodeType != 1 );
return elem;
}
function first( elem ) {
elem = elem.firstChild;
return elem && elem.nodeType != 1 ? nextSibling( elem ) : elem;
}
function last( elem ) {
elem = elem.lastChild;
return elem && elem.nodeType != 1 ? prevSibling( elem ) : elem;
}
function parent( elem, num ) {
num = num || 1;
for ( var i = 0; i < num; i++ )
{
if ( elem != null ) elem = elem.parentNode;
}
return elem;
}
기본 돔 방법
getElementById(“어디서나”);
function id(name) {
return document.getElementById(name);
}
getElementByTagName(“li”); // 배열과 거의 동일 노드 목록 모양으로 돌아 가기
function tag(elem,name) {
return (elem || document).getElementsByTagName(name);
}
5.3 HTML DOM로드될 때까지 기다리십시오
HTML DOM 문서 작업을 할 때 겪는 어려움 중 하나는,
돔완전히 로드되기 전의 JavaScript 코드 수행할 수 있다는 것.
브라우저에서 발생하는 순서는 다음과 같습니다..
1.HTML구문 분석
2. 외부 스크립트 또는 스타일 시트 로드.
삼. 문서 내 스크립트를 파싱하면서 실행.
4. HTML DOM이 모든 것이 만들어졌다.
5. 이미지 및 외부 콘텐츠 로드.
6. 페이지 로딩이 완료되었습니다.
헤더의 스크립트 및 외부 파일의 스크립트 HTML DOM실제로 생성되기 전에 실행됩니다..
HTML 문서가 현재 작업 상태인지 확인하기 위해 시도해야 할 몇 가지 사항이 있습니다..
첫 번째 문서: 첫 번째 돔 문서가 존재하는지 확인해야 합니다..
2. document.getElementByTagName, document.getElementById 기능이 있는지 확인.
3. 문서.본문 : 안전을 위해 몸 항목이 완전히 로드되었는지 확인하는 것이 좋습니다..
5.4 HTML 문서에서 요소 찾기
HTML 문서에서 요소 검색 XML 문서에서 요소를 찾는 것은 완전히 다른 것입니다..
클래스 이름으로 요소 찾기
CSS 선택기로 항목 찾기
CSS 쿼리 : 딘 에드워즈 (http://dean.edwards.name/my/cssQuery/)
jQuery : 존 레식 (http://jquery.com)
XPath: XML 문서를 탐색하는 강력한 방법.
5.5 요소의 내용 가져오기
모든 돔 요소는 텍스트 또는 다른 요소의 혼합을 포함할 수 있습니다..
요소 내부의 텍스트 가져오기
텍스트를 포함하는 주제는 요소 자체가 아니라 하위 텍스트 노드입니다..
function text(e) {
var t = "";
e = e.childNodes || e;
for ( var j = 0; j < e.length; j++ )
{
t += e(j).nodeType != 1 ? e(j).nodeValue : text(e(j).childNodes);
}
return t;
}
항목 내부 HTML 받다
모든 각 HTML DOM 요소를 innerHTML이라고 합니다. 속성이 추가됨.
요소의 이 속성에 대한 액세스 HTML 내용이 있는 문자열 가져오기.
5.6 요소 속성 처리
function hasAttribute( elem, name ) {
return elem.getAttribute(name) != null;
}
속성 값 가져오기 또는 설정
안전을 위해 항상 일반 XML DOM호환 가능 getAttribute, setAttribute쓰다.
수영을 위한 수업 텍스트 JavaScript에서는 같은 단어가 모두 예약어입니다..
className, htmlFor, cssFloat, cssText처럼 변경 및 사용.
function attr(elem, name, value) {
if ( !name || name.constructor != String ) return '';
name = { ‘for': 'htmlFor', 'class': 'className' }(name) || name;
if ( value != null )
{
elem(name) = value;
if ( elem.setAttribute )
elem.setAttribute(name,value);
}
return elem(name) || elem.getAttribute(name) || '';
}
5.7 돔 교환
돔변경 프로세스는 세 단계로 나뉩니다..
하나. 새 항목을 만드는 방법. 돔노드를 생성하려면
createElement
function create( elem ) {
return document.createElementNS ?
document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :
document.createElement( elem );
}
2. 이 아이템 돔붙여넣는 방법. 돔 넣어HTML을 DOM으로 세트
insertBefore, appendChild
function before( parent, before, elem ) {
if ( elem == null ) {
elem = before;
before = parent;
parent = before.parentNode;
}
parent.insertBefore( checkElem( elem ), before );
}
function append( parent, elem ) {
parent.appendChild( checkElem( elem ) );
}
function checkElem( elem ) {
// If only a string was provided, convert it into a Text Node
return elem && elem.constructor == String ?
document.createTextNode( elem ) : elem;
}
삼. 이 항목을 제거하는 방법.
아이를 제거
function remove( elem ) {
if ( elem ) elem.parentNode.removeChild( elem );
}
function empty( elem ) {
while ( elem.firstChild )
remove( elem.firstChild );
}
6챕터 이벤트
간섭 없음 돔 스크립팅의 가장 중요한 측면은 이벤트를 동적으로 등록하거나 등록 취소하는 것입니다..
JavaScript의 이벤트 개념은 수년에 걸쳐 발전해 왔으며 이제 안정적이고 사용하기 쉽습니다.
6.1 JavaScript 이벤트 소개
JavaScript의 이벤트는 스레드를 사용하지 않고 비동기적으로 작동합니다..
스레드는 JavaScript에 존재하지 않습니다..
JavaScript에서 모든 루프를 차단합니다.. 루프가 실행되는 동안 다른 작업을 수행할 수 없습니다..
비동기 콜백 사용. 어디에서나 실행할 코드에 대한 참조만 제공하면 됩니다..
JavaScript 이벤트는 캡처 및 버블의 두 단계로 실행됩니다..
6.2 일반적인 이벤트 기능
이벤트 처리기의 기본 기능 중 하나는 이벤트 개체에 대한 액세스를 제공한다는 것입니다.
즉~ 안에 W3C 와와 그렇지 않으면 하나의 전역 이벤트 개체만 있습니다..
그만큼 키워드는 편의를 위한 것일 뿐 그 이상도 그 이하도 아닙니다..
그만큼 키워드를 적절하게 사용하면 코드를 훨씬 쉽게 만들 수 있습니다..
이벤트 버블/녹음을 중지하는 방법 즉그리고 W3C다른.
function stopBubble(e)
{
if ( e )
e.stopPropagation();
else
window.event.cancelBubble = true;
}
이벤트가 발생하면 브라우저에는 그에 따라 수행되는 기본 작업이 있습니다..
function stopDefault( e ) {
if ( e ) e.preventDefault();
return false;
}
6.3 이벤트 리스너 연결
인라인 붙여넣기 방법.
전통적인 연결 방법. window.onload = 함수() {}
돔 연결: W3C 방법. addEventListener
document.body.addEventListener(‘키스트로크‘myKeyPressHandler, 거짓);
Window.addEventListener(‘부담‘기능(){ … }, 잘못된);
돔 연결:즉 방법. 첨부 이벤트
document.body.attachEvent(‘버튼을 누르면‘myKeyPressHandler);
window.attachEvent(‘짐‘기능(){ … });
Peter Paul Cock은 2005년 후반에 대회를 열었습니다.
딘 에드워즈 추가 이벤트 / 제거 이벤트 쓰기 라이브러리
6.4 이벤트 종류
마우스 이벤트: 마우스오버, 마우스아웃, 마우스업, 마우스다운
키보드 이벤트: 키 업, 키 다운, 키 누름
사용자 인터페이스 사례: 초점, 흐림
양식 이벤트: 보내기, 변경, 선택
로드 이벤트: 로딩 언로딩
6.5 간섭 없음 돔 스크립팅
따라서 좋은 코드를 작성하는 데 에너지를 집중할 수 있습니다.
JavaScript가 비활성화된 상황을 상상해 보십시오.
JavaScript에 의존하지 않는 링크
CSS비활성화된 경우 주의
이벤트 접근성을 더욱 향상시키기 위해 마우스가 아닌 대안을 제공하는 것을 고려하십시오.