09 장 문서객체모델
1. 문서객체모델관련용어 2. 웹페이지생성순서 3. 문서객체선택 4. 문서객체조작 5. 이벤트
문서객체와문서객체모델의개념을이해한다. 문서객체를선택하고조작할수있다. 이벤트의종류를알아보고문서객체에이벤트를연결해본다.
1 문서객체모델관련용어 문서객체모델 (DOM) Document Object Model 웹브라우저가 HTML 파일을분석하고표시하는방법 태그 지금까지다룬 HTML 태그. ex) p 태그, table 태그등 문서객체 document object HTML 태그를자바스크립트에서이용할수있는객체로만든것 HTML의요소에해당하는것을자바스크립트에서문서객체라고부름
1 문서객체모델관련용어 노드 node 태그각각의요소 요소노드 텍스트노드 그림 9-1 노드 문서객체를정적으로생성 웹페이지가처음실행되면서 HTML 페이지에쓰인태그를읽어문서객체를생성하는것 문서객체를동적으로생성 프로그램실행중에자바스크립트를사용해문서객체를생성하는것
2 웹페이지생성순서 웹브라우저가웹페이지를실행하는순서 HTML 코드를위에서아래로실행 [ 기본예제 9-1] 과 [ 기본예제 9-2] 를통해실행순서의중요성파악
기본예제 9-1 웹페이지실행순서확인하기 1. HTML 페이지생성 [ 코드 9-1] 과같이작성 2. 첫번째알림창 순서대로경고창출력 3. 두번째알림창 4. 세번째알림창
기본예제 9-2 문서객체조작방법익히기 1. 문서객체사용에러 [ 코드 9-2] 과같이작성 script 태그를읽는시점에 h1 과 h2 태그는생성되지않음
기본예제 9-2 문서객체조작방법익히기 2. 해결방법 1 : script 태그위치이동 3. 해결방법 2 : 이벤트활용 NOTE_script 태그의위치 script 태그를 head 태그내부에넣으면코드를보기쉬우므로유지보수가용이함. 반면 body 태그아래에넣으면 HTML 페이지가빠르게나타나는것처럼보일수있음.
3 문서객체선택 문서객체선택 이미존재하는 HTML 태그를자바스크립트에서문서객체로변환 문서객체를선택하면, 자바스크립트를사용하여실행중에내부글자를변경하거나스타일을변경할수있음
3.1 한개의문서객체선택 문서객체를선택하는가장기본적인방법 표 9-1 한개의문서객체를선택하는메소드메소드이름설명 document.getelementbyid( 아이디 ) 아이디를사용해문서객체선택 document.queryselector( 선택자 ) 선택자를사용해문서객체선택 NOTE_ 스타일시트를사용할때는 id 속성이중복되어도문제가없지만자바스크립트에서는문제가생긴다 getelementbyid() 메소드
기본예제 9-3 문서객체하나선택하기 1. getelementbyid() 메소드사용하기 [ 코드 9-6] 과같이작성 2. queryselector() 메소드사용하기 [ 코드 9-7] 과같이작성 queryselector() 는문서객체하나를선택하는메소드 이름이같은선택자가여러개 가장처음에등장하는것선택
3.2 여러개의문서객체선택 표 9-2 여러개의문서객체를선택하는메소드 메소드이름 document.getelementbyname( 이름 ) document.getelementbyclassname( 클래스 ) document.queryselectorall( 선택자 ) 설명 name 속성으로여러개의문서객체선택 class 속성으로여러개의문서객체선택 선택자로여러개의문서객체선택 배열의형태로문서객체가반환됨
기본예제 9-4 문서객체여러개선택하기 queryselectorall() 메소드이용 [ 코드 9-8] 과같이작성 다른메소드도 queryselectorall() 메소드와같은방법으로사용함
4.1 글자조작 문서객체내부에있는글자조작 [ 표 9-3] 의속성입력 표 9-3 글자조작속성 속성이름 textcontent innerhtml 설명 일반글자형식의문서객체내부글자 HTML 형식의문서객체내부글자 textcontent 속성은인터넷익스플로러 9 버전이상에서사용가능
기본예제 9-5 내부글자변경하기 textcontent 속성사용 [ 코드 9-9] 과같이작성 입력한글자가 body 태그에바로들어감 태그가적용되지않고텍스트로처리됨
기본예제 9-6 태그내부글자변경하기 innerhtml 속성사용 [ 코드 9-10] 과같이작성 입력된글자에 HTML 태그가적용됨
4.2 스타일조작 자바스크립트는특수기호 - 을식별자에사용할수없음 에러발생 - 으로연결된속성은끊겨진단어의첫글자를대문자로변경 표 9-4 스타일식별자변환 스타일시트의스타일속성 background-image background-color box-sizing list-style 자바스크립트의스타일식별자 backgroundimage backgroundcolor boxsizing liststyle
기본예제 9-7 스타일조작하기 [ 코드 9-11] 과같이작성 256 개의 div 태그가위에서아래로그레이디언트를형성
4.3 속성조작 표 9-5 문서객체의속성조작메소드 메소드이름 setattribute( 속성이름, 속성값 ) getattribute( 속성이름 ) 설명 속성지정 속성추출 웹표준에서지정하지않은속성에접근할때사용 웹표준에서저장하지않은사용자지정속성의예 jquery Mobile 의 data- 로시작하는속성 그림 9-2 jquery Mobile 코드
기본예제 9-8 문서객체속성조작하기 1. img 태그속성조작하기 [ 코드 9-12] 과같이작성 id 속성을제외한다른속성을자바스크립트의문서객체코드에서지정 (src, width, height) 2. body 태그의속성조작하기 [ 코드 9-13] 과같이작성 body 태그에 data-custom 속성을지정한후, 다시추출해서출력 사용자지정속성이므로속성조작메소드사용 그림 9-3 요소검사로속성조작확인
기본예제 9-9 문서객체를사용한시계 [ 코드 9-14] 와같이작성 setinterval() 함수를사용해 1 초마다 clock 문서객체의 innerhtml 속성을현재시간으로변경
5 이벤트 이벤트 어떠한현상이프로그램에영향을미치는것 ex) 마우스클릭, 키보드누름 사용자가또는응용프로그램에서자체적으로발생시킬수있음 자바스크립트에서지원하는이벤트 마우스이벤트 키보드이벤트 HTML 프레임이벤트 HTML 입력양식이벤트 유저인터페이스이벤트 구조변화이벤트 터치이벤트
5 이벤트 window.onload = function () { }; onload 이벤트속성 load 이벤트이름, 이벤트타입이라고함 function() { } 이벤트속성에넣는함수 이벤트리스너, 이벤트핸들러라고함
5.1 이벤트모델 이벤트모델 문서객체에이벤트를연결하는방법 표 9-6 이벤트모델종류 ( 이벤트연결방식 ) DOM Level DOM Level 0 DOM Level 2 종류 인라인이벤트모델고전이벤트모델 DOM Level 0 방식 쉬우며널리사용됨 이벤트를중복해서연결할수없음 마이크로소프트인터넷익스플로러이벤트모델표준이벤트모델 DOM Level 2 방식 이벤트를중복해서연결할수있음 브라우저종류에따라연결하는방법이달라문제가됨
5.1 이벤트모델 인라인이벤트모델 웹페이지의가장기본적인연결방식 HTML 태그내부에자바스크립트코드를넣어이벤트를연결 잘사용되지않으나, 국내에서는아직많이사용됨
기본예제 9-10 인라인이벤트모델사용해보기 [ 코드 9-15] 와같이작성 button 태그내부에 onclick 속성을사용하여자바스크립트코드입력
5.1 이벤트모델 표 9-7 이벤트속성 onblur onfocus onfocusin onfocusout onload onresize onscroll onunload onclick ondbclick onmousedown onmouseup onmousemove onmouseover onmouseout onmouseenter onmouseleave onchange onselect onsubmit onkeydown onkeypress onkeyup onerror 그림 9-4 이벤트속성자동완성 인라인코드내부에서세미콜론으로문장을구분하면지저분해지므로 script 태그내부에함수를선언한후, 인라인이벤트속성내부에서해당함수실행
기본예제 9-11 script 태그를이용해인라인이벤트모델사용하기 [ 코드 9-16] 과같이작성 인라인이벤트모델에서 script 태그내부의 buttonclick() 함수호출
기본예제 9-12 고전이벤트모델사용하기 [ 코드 9-17] 과같이작성 NOTE_ 이벤트발생객체이벤트리스너내부에서 this 키워드를사용하면이벤트를발생한자기자신을의미함. 그림 9-5 이벤트발생객체
5.2 이벤트객체 이벤트객체 이벤트와관련된정보를알려줌 코드 9-19 표준이벤트객체 그림 9-6 표준이벤트객체
5.2 이벤트객체 익스플로러 8 버전이하에서는인터넷익스플로러이벤트모델사용 코드 9-20 인터넷익스플로러이벤트객체 그림 9-7 인터넷익스플로러이벤트객체
5.2 이벤트객체 모든브라우저에서이벤트객체를사용하는방법 코드 9-21 짧은조건문을사용한이벤트객체사용
5.3 기본이벤트의제거 기본이벤트 자동으로발생하는이벤트 ex) form 태그를생성한제출버튼클릭 자동으로입력양식제출 기본이벤트를제거하는경우 ex) 제출전확인이필요한경우. 주민등록번호등 주로 a 태그와 form 태그에서자주사용함 그림 9-8 기본이벤트제거를사용한유효성검사
기본예제 9-13 기본이벤트제거하기 [ 코드 9-22] 와같이작성 이벤트리스너의반환값에 false 를입력 [ 버튼 ] 링크를클릭해도연결된웹페이지로자동으로이동하지않음