티스토리 뷰

Web 개발/자바스크립트

[JS] Window 객체와 Document 객체(Dom)

최입동 2018. 11. 15. 18:00
320x100

클라이언트 측 자바스크립트

- 정적인 HTML 문서를 사옿작용이 가능한 웹 애플리케이션으로 바꾸는 역할.

Window 객체

- 클라이언트 측 자바스크립트 프로그램의 전역 객체.
- 메서드: setTimeout(), setInterval(func, interval, /*optional*/args...), clearTimeout(), clearInterval(intervalID)
- 프로퍼티: document, location URL, history, navigator 브라우저 제조사와 버전정보, screen 데스크톱 크기
- alert(), confirm(), prompt() 간단한 대화상자, showModalDialog() HTML 대화상자
- onerror(오류를 설명하는 msg, 오류가 발생한 js code의 URL 문자열, 오류가 발생한 문서의 줄 번호) 오류 이벤트 핸들러
- 브라우저창 열기 닫기 open(), close()
- 여러 창, 프레임 간의 상호작용 parent, top 프로퍼티

DOM(Document Object Model: 문서 객체 모델)

- HTML과 XML 문서의 내용을 조작하고 나타내는 기반 API로 HTML 또는 XML 문서를 나타냄.
- HTML(XML) 문서의 요소 집합을 객체의 계층 구조로 표현함.
- Node
- Document // HTML(XML) 문서
- <html>
- <head>
- <title>
- "Sample Document"
- <body>
- <h1>
- ChractorData
- Text
- Comment
- Element // HTML(XML) 문서의 요소
- HTMLElement
- HTMLHeadElement
- HTMLBodyElement
- HTMLTitleElement
- HTMLParagraphElement
- ...
- Attr // HTML(XML)의 속성

Document 객체

- DOM API의 일부로 문서 내용을 제어함.

Element 객체

- HTML, XML 문서의 요소를 나타냄.
 

문서 요소 선택 document의 메서드

- getElementById("section1"); // unique
- getElementsByName("my_color"); // return NodeList    in HTMLDocument (form 안의 라디오 버튼, 체크박스 등에서 주로 사용.)
- getElementsByTagName("span"); // return NodeList

- getElementsByClassName("warning"); // return NodeList - 문서 내부의 변화를 실시간으로 반영.

- querySelectorAll(".tx-btn-bg")

문서 구조와 탐색

문서가 Node 트리일 때
- parentNode
- childNodes
- firstChild, lastChild
- nextSibling, previousSibling
- nodeType // Document: 9 Element: 1 Text: 3 Comment: 8
- nodeValue // Text 노드나 Comment 노드의 텍스트 내용.
- nodeName // 대문자로 바꾼 요소의 HTML 태그명.
문서가 Element일 때
- parentElement
- children
- firstElementChild, lastElementChild
- ...

속성

ex)  document.body.background = "black";
document.body.setAttribute("background", "black"); // 모든 것을 문자열로 여김

요소의 위치 / 특정 위치에 있는 요소

- getBoundingCilentRect() // margin은 포함 안됨.

- document.elementFromPoint(x, y)

320x100
저작자표시 비영리

'Web 개발 > 자바스크립트' 카테고리의 다른 글

[JS] 클라이언트 스토리지  (0) 2018.11.21
[JS] HTTP 스크립팅  (0) 2018.11.15
[JS] HTML에 Javascript 코드 포함하기, Javascript의 실행  (0) 2018.11.15
[JS] RegExp 객체 (정규표현식)  (0) 2018.11.14
[JSON] 기초  (0) 2018.11.14
댓글