티스토리 뷰

HTML , CSS , JS

Document 에 접근하기 (Dom)

플레지 2019. 6. 8. 18:37

Document객체에 접근하기.

모든 수업내용은 Tcpschool 자료인 것을 밝힙니다.

Document 메서드

Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메서드를 제공합니다.

 - HTML 요소의 선택   

 - HTML 요소의 생성

 - HTML 이벤트 핸들러 추가

 - HTML 객체의 선택

=> javascript에서 css 요소 또는 html 요소에 접근하기 위해서는 document메서드를 이용해야 한다.

HTML 요소의 선택

HTML 요소를 선택하기 위해 제공되는 메서드는 다음과 같습니다.

메서드 설명

document.getElementsByTagName(태그이름)

해당 태그 이름의 요소를 모두 선택함.

document.getElementById(아이디)

해당 아이디의 요소를 선택함.

document.getElementsByClassName(클래스이름)

 해당 클래스에 속한 요소를 모두 선택함.
document.getElementByName(name속성값) 해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자) 해당 선택자로 선택되는 요소를 모두 선택함.

여러 가지 접근할 수 있는 document 메서드이다.  아직 많이 사용해보지는 않았지만 document.querySelectorAll 을 가장 많이 사용할 거 같다. 

함정이 있다면... 

지원 버전이 많이 부족하다는 것이다. 익스플로러만 봐도 9부터 지원이다.

document 메서드를 이용하여 HTML요소를 생성할 수도 있다.

새로운 HTML 요소를 생성하기 위해 제공되는 메서드는 다음과 같습니다.

document.createElement(HTML요소)

지정된 HTML 요소를 생성함.
document.write(텍스트) HTML 출력 스트림을 통해 텍스트를 출력함.

또 document.write(); 를 이용하여 HTML 화면에 원하는 타깃을 출력해줄 수도 있다.

 

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메서드는 다음과 같습니다.

document.getElementById(아이디).onclick = function(){ 실행할 코드 }

 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함.

css에서 본 것 같다. input type="checkbox" 이런 내용을 공부했을 때와 비슷한 내용이다. 

 전역 전에 javascript 을 이용하여 버튼 , 체크 버튼 요소를 이용한 게시판을 구현해보겠다.

 

HTML 객체의 선택

HTML DOM Level 1은 1998년에 정의되어, HTML5에서도 계속 사용되고 있습니다.

그 후 2004년에는 HTML DOM Level 3가 새롭게 정의되어, Level 1과 같이 사용되고 있습니다.

 

이러한 HTML DOM에서 제공하는 객체 집합(object collection)을 이용하면 HTML 객체를 손쉽게 선택할 수 있습니다.

객체                                                             집합 설명                                         DOM Level

document.anchors name 속성을 가지는 <a>요소를 모두 반환함. 1
document.applets applet 요소를 모두 반환함. (HTML5에서 제외됨) 1
document.body <body>요소를 반환함. 1
document.cookie HTML 문서의 쿠키(cookie)를 반환함. 1
document.domain

HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함.

 1
document.forms <form>요소를 모두 반환함. 1
document.images <img>요소를 모두 반환함. 1
document.links href 속성을 가지는 <area>요소와 <a>요소를 모두 반환함. 1
document.referrer 링크(linking)되어 있는 문서의 URI를 반환함. 1
document.title <title>요소를 반환함. 1
document.URL HTML 문서의 완전한 URL 주소를 반환함. 1
document.baseURI HTML 문서의 절대 URI(absolute base URI)를 반환함. 3
document.doctype HTML 문서의 문서 타입(doctype)을 반환함. 3

document.documentElement

 <html>요소를 반환함. 3

document.documentMode

 웹 브라우저가 사용하고 있는 모드를 반환함. 3

document.documentURI

 HTML 문서의 URI를 반환함. 3
document.domConfig HTML DOM 설정을 반환함. (더는 사용하지 않음) 3
document.embeds <embed>요소를 모두 반환함. 3
document.head <head>요소를 반환함. 3

document.implementation

 HTML DOM 구현(implementation)을 반환함. 3

document.inputEncoding

 HTML 문서의 문자 인코딩(character set) 형식을 반환함. 3

document.lastModified

 HTML 문서의 마지막 갱신 날짜 및 시간을 반환함 3

document.readyState

 HTML 문서의 로딩 상태(loading status)를 반환함. 3
document.scripts <script>요소를 모두 반환함. 3

document.strictErrorChecking

 오류의 강제 검사 여부를 반환함. 3

아직 많이 사용해보지 않아서  뭐가 중요한지 잘 모르겠지만 그때그때마다 필요할 때마다 찾아서 공부하는 방법으로 하겠다.

저작자표시

'HTML , CSS , JS' 카테고리의 다른 글

CSS 선택자querySelectorAll()  (0) 2019.06.08
HTML 태그 이름(tag name)을 이용한 선택  (0) 2019.06.08
Hover 효과를 이용한 진격의거인 인물페이지 만들기  (0) 2019.06.07
Hover 를 이용한 칵테일 느낌 페이지 만들기  (0) 2019.06.02
사이드바와 checkbox 를 이용한 페이지 만들기2  (0) 2019.06.02
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함