본 내용에 들어가기 앞서 window 객체에 대해 간단히 알아봅시다. window는 Javascript core, DOM, BOM을 포함한 전역 객체이기 때문입니다.
✨1. Window 객체
- Javascript의 최상위 객체이자 전역 객체이면서 모든 객체가 소속된 글로벌 객체이다.
- 객체화된 수많은 구성 요소들로 이루어져 있다.
- window 객체의 프로퍼티나 메소드는 window를 생략하고 바로 사용할 수 있다
- window.alert("메시지") -> alert("메시지")
1-1. Window 객체 구조
✨2. DOM(Document Object Model, 문서 객체 모델)
- 브라우저가 웹 문서를 이해할 수 있도록 구성된 것
- html 태그를 동적으로 제어한다
- html과 Javascript를 연결해주는 역할을 하며 Javascript가 요소에 접근하여 제어할 수 있게 해 준다
- 브라우저가 html 페이지를 로드하는 과정에서 태그(Tag)들을 각기 하나의 객체로 만든다.
- html 등의 문서의 내용을 노드 트리(node tree) 구조의 객체들로 나타낸다.
2-1. DOM의 구조
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체에 접근해야 한다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
2-2. DOM의 node 설명
| 노드 종류 | 역할 |
| Document Node | 트리의 최상위에 존재하는 HTML 문서 전체 |
| Element Node | <p>, <div> 등의 태그들 |
| Attribute Node | <input>등의 태그안의 name, value 등의 속성 |
| Text Node | HTML 문서의 모든 텍스트 표현 |
| Conmment Node | HTML 문서의 모든 주석 |
2-3. DOM 주요 메서드
| 메소드명 | 기능 |
| getElementById(아이디) | 해당 아이디의 요소를 선택함 |
| getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택함 |
| getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택함 |
| getElementsByName(name속성값) | 해당 anme 속성 값을 가지는 요소를 모두 선택함 |
| querySelector(선택자) | 해당 선택자로 선택되는 요소를 선택함 |
| querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함 |
| write(텍스트) | document에 HTML 텍스트 출력 |
| close() | document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하고, 더이상 쓰기를 받지 않음 |
| document.createElement(HTML요소) | 지정된 HTML 요소를 생성 |
✨3. BOM(Browser Object Model, 브라우저 객체 모델)
- Javascript가 브라우저와 소통하기 위해서 만들어진 모델이다.
- 모든 개별 객체들은 최상위 객체인 window 아래 존재
- 웹 페이지 내용을 제외한 웹 브라우저 창에 포함된 모든 객체 요소들을 의미합니다.
- window 속성에 속하며 document 문서가 아닌, window를 제어한다.
3-1. BOM의 종류
| 객체종류 | 역할 |
| window | 최상위 객체로 각 프레임별로 하나씩 존재 |
| location | url 주소에 대한 정보를 제공 |
| document | 현재 문서에 대한 정보 |
| navigator | 브라우저의 정보를 제공, 주로 호환성 문제를 위해 사용 |
| history | 브라우저의 방문 기록 정보를 제공 |
| screen | 브라우저의 외부 환경에 대한 정보를 제공 |
✨4. 데이터 입출력 관련 메소드
4-1. 데이터 입력 관련 메소드
- 변수에 반환값 담아서 재사용 가능
| 메소드 | 내용 |
| 변수 = window.confirm('질문내용') | confirm 호출 시 '질문내용'과 '확인/취소' 버튼이 존재하는 알림창 발생, 확인 버튼 클릭 시 True, 취소 버튼 클릭 시 false를 반환 |
| 변수 = 선택한요소.속성; (속성 : innerHTML, innerText) |
|
| 변수 = window.prompt('질문내용') | prompt 호출 시 '질문내용'과 입력할 수 있는 '텍스트상자'와 '확인/취소' 버튼이 보여지는 알림창 발생 취소버튼 클릭 시 null값 반환 |
| 변수 = 선택한input요소.value |
4-2. 데이터 출력 관련 메소드
- 반환값없음
- 앞에 window. 는 생략 가능합니다
| 메소드 | 내용 |
| window.alert('알림창에 출력할 문구'); | 경고메시지 ()안에 것을 경고메시지 형태로 출력 |
| window.console.log('콘솔창에 출력할 문구'); | |
| document.write('화면에 출력할 문구'); | 괄로 내부 내용을 페이지에 출력하는 함수 |
| 선택한요소.innerHTML/innerText= '해당 요소에 출력할 문구'; | innerHTML 과 innerText 자바스크립트에서 어떤 요소안의 값을 가지고 오거나 변경 - innerHTML은 html 형식으로 작성 - innerText는 텍스트 형식으로 작성 |
✨5. HTML 이벤트 핸들러 함수
HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같습니다.
| document.getElementById(아이디).on이벤트 = function(){실행할 코드} | 해당 이벤트와 연결된 이벤트 핸들러 코드를 추가함 |
*이벤트 핸들러(=이벤트 처리기) : 해당 이벤트가 발생됐을 때 처리방법을 정의한 함수
References
https://mundol-colynn.tistory.com/64
[JavaScript] BOM/ DOM (window객체, document객체)
JavaScript에서의 객체 JavaScript는 객체기반의 스크립트 언어이며, JavaScript 코드는 대부분 객체로 구성되어 있음. 웹브라우저의 구성요소들은 하나하나 객체화 되어있으며, JavaScript는 객체들을 제
mundol-colynn.tistory.com
https://velog.io/@imok-_/JavaScript-DOM-BOM-%EC%9D%B4%EB%9E%80
[JavaScript] DOM, BOM 이란?
[JavaScript] DOM, BOM, Window에 대한 이해
velog.io
반응형
