Window 객체는 js의 최상위 객체이자 전역객체이면서 모든 객체가 소속된 객체이다.
위 사진처럼 window 객체 밑에 DOM,BOM,Javascript core가 포함되어 있다. 정확히는 계층이 나눠져 있다. Window가 상위 객체이며 그 아래가 하위 객체이다. 어쨌든, window객체는 수많은 구성 요소로 이루어져 있으며, 우리는 자바스크립트를 이용해서 이 하나하나의 객체들을 제어할 수 있는 것이다.
alert("hello!")
window.alert("hello!")window를 쓰건 쓰지 않건 alert는 window라는 상위 객체에 소속되어 있기 때문에 둘은 같은 결과가 나온다. window는 전역 객체이기 때문이다.
1. DOM(Document Object Model : 문서 객체 모델)
웹 페이지에 존재하는 HTML요소에 접근해야 할 때에는 Document 객체에서 시작해야 한다. DOM은 구조화된 문서를 표현하는 형식이며, 이 구조는 트리 구조로 구성되어 있다.
트리 구조를 이루는 것 하나하나를 '노드'라고 하며 이는 총 9가지가 있고 그 중에서 가장 많이 쓰이는 종류가 위 이미지에 나온 4가지이다.(문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드)
아래와 같은 document 객체의 메소드로 요소들을 제어할 수 있다.
1) document.getElementsByTagName(태그이름)
해당 태그 이름의 요소를 모두 선택함.
2) document.getElementById(아이디)
해당 아이디의 요소를 선택함.
3) document.getElementsByClassName(클래스이름)
해당 클래스에 속한 요소를 모두 선택함.
4) document.getElementsByName(name속성값)
해당 name 속성값을 가지는 요소를 모두 선택함.
5) document.querySelectorAll(선택자)
해당 선택자로 선택되는 요소를 모두 선택함.
다음과 같이 DOM요소를 선택해서 색상을 변경할 수 있다.
<script>
var selectionItem = document.getElementsByTagName("li");
for(var i=0; i < selectedItem.length; i++){
selectedItem(i).style.color = "red";
}
</script>모든 li의 요소를 선택해서 텍스트 색상을 red로 변경한다는 뜻이다. 이 외에도 다음과 같이 HTML요소의 내용도 변경할 수 있다.
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀜!";
</script>
2. BOM (Browser Object Model : 브라우저 객체 모델)
js를 이용하여 브라우저의 정보에 접근하거나 여러 기능들을 제어할 수 있는데, 이때는 BOM을 사용해야 한다.
1) navigator : 브라우저에 대한 정보를 제공하는 객체
2) location : 위치, url 에 관한 정보를 제공하는 객체
3) screen : 스크린(모니터)에 대한 정보를 제공하는 객체
4) history : 인터넷 방문 기록에 대한 정보를 제공하는 객체
참고하기 좋은 사이트들
https://cbw1030.tistory.com/46
https://velog.io/@solmii/TIL-DOM%EC%9D%B4%EB%9E%80
http://www.tcpschool.com/javascript/js_dom_nodeAccess
https://pridiot.tistory.com/170
