BOM(Brower Object Model)이란?
window 객체 아래서 크게 BOM과 DOM으로 나뉜다. 보통 홈페이지 창을 하나 띄워놓고 주소창의 부분을 가리킨다고 보면쉽다.
BOM안에 존재하는 객체
location 객체
navigator 객체
history 객체
screen 객체
window 객체
자바스크립트에서 최상위 객체 생성되는 모든 객체가 window객체 하위에 존재, 브라우저 창에 대한 설정하는 객체
window.open('주소', '이름 또는 open방식', '형태');
형태 옵션 |
height |
윈도우 높이 |
값 |
width |
윈도우 너비 |
값 |
location |
주소 입력창 |
yes | no | 1 | 0 |
menubar |
메뉴 유무 |
resizable |
화면크기 조절 |
status |
상태표시줄 |
toolbar |
툴바표시 |
window 객체 메소드
메소드 |
내용 |
moveBy(x,y) |
윈도우 위치조정(상대) |
moveTo(x,y) |
윈도우 위치조정(절대) |
resizeBy(x,y) |
윈도우 크기조정(상대) |
resizeTo(x,y) |
윈도우 크기조정(절대) |
scrollBy(x,y) |
스크롤 위치이동(상대) |
scrollTo(x,y) |
스크롤 위치이동(절대) |
focus() |
윈도우에 초점 맞춤 |
blur() |
윈도우에 초점 제거 |
close() |
윈도우 닫기 |
setTimeout(함수, 시간(ms)) |
일정시간 후 함수를 한번 실행 / id값 리턴 |
setInterval(함수, 시간) |
일정시간마다 함수를 반복 실행 / id값 리턴 |
clearTimeout(id) |
setTimeout() 함수 실행 종료 |
clearInterval(id) |
setInterval() 함수 종료 |
<h3>open()함수활용하기</h3>
<p>
open함수의 매개변수
url : 새창을 열었을때 연결될 페이지 주소
이름 또는 open방식 : 새창에 대한 id값
윈도우 창에 대한 설정 : 새창에 대한 설정(크기, 위치등)
히스토리설정 : true|false
open의 리턴값은 창에 대한 id값을(handle) 반환!
</p>
<button onclick='basicWin()'>기본 창열기</button>
<button onclick='basicWin2()'>기본 창열기2</button>
<button onclick='movePage()'>페이지창 열기</button>
<button onclick='moveTest()'>창열기</button>
<button onclick='movemove()'>창 움직이기</button>
<button onclick='scrollMove()'>스크롤 움직이기</button>
<script>
function scrollMove(){
window.scrollTo(600,0);
}
function basicWin() {
window.open();
}
function basicWin2() {
var popup = window.open("", 'popup', "width=300,height=200");
popup.document.body.innerHTML = "<h1>새로운창</h1>";
}
function movePage() {
window.open("http://iei.or.kr", "_blank", "width=300,heigth=300, status=yes, menubar=yes, toolbar=yes, top=500, left=500");
}
var w1;
function moveTest() {
w1 = window.open("", "test", "width=400, height=400");
//3초후에 윈도우 크기와 위치가 변경하는 로직
setTimeout(movemove,3000);
setInterval(movemove, 500);
var count =0;
var inter;
inter = setInterval(function(){
w1.resizeTo(Math.floor(Math.random()*1000),Math.floor(Math.random()*1000));
count++;
if(count==5){
clearInterval(inter);
}
},500);
}
function movemove(){
w1.moveTo(Math.random()*500+1,Math.random()*500+1);
w1.resizeTo(100,100);
w1.focus();
}
</script>
window.onload 속성
윈도우 객체가 로드가 완료되면 자동으로 onload에 설정되어 있는 함수를 실행시키는 속성
윈도우 객체 로드 완료 : 모든 태그가 화면에 나타난 때
생성
window.onload = function(){
로직구성
};
window.onload = function () {
var doc = document.getElementById('root');
doc.style.background = "red";
doc.style.width = "100px";
doc.style.height = "100px";
}
window.onload = test;
function test(){
alert('하아하아');
// var doc=document.getElementById('root');
// doc.style.background="red";
// doc.style.width="100px";
// doc.style.height="100px";
winOpen();
}
screen 객체
클라이언트 운영체제 화면에 대한 속성값을 가지는 객체
속성값 |
height |
화면 높이 |
width |
화면 너비 |
availWidth |
실제화면에서 사용 가능한 너비 |
acailHeight |
실제화면에서 사용 가능한 높이 |
colorDepth |
사용 가능한 색상수 |
pixelDepth |
한픽셀당 비트수 |
console.log(screen.width);
console.log(screen.height);
console.log(screen.availHeight);
console.log(screen.availWidth);
console.log(screen.colorDepth);
console.log(screen.pixelDepth);
location 객체
브라우저의 주소표시줄과 관련된 객체, 프로토콜 종류, 호스트 이름, 문서위치등의 정보를 가짐
속성값 |
hash |
앵커 이름(#~) |
host |
호스트 이름과 포트번호 |
hostname |
호스트 이름 |
href |
문서 URL주소 |
origin |
호스트 이름, 프로토콜, 포트번호 |
pathname |
디렉토리 경로 |
port |
포트번호 |
protocol |
프로토콜의 종류 |
search |
요청 매개변수(?~~) |
location 메소드
메소드 |
내용 |
assign('주소') |
새로운 페이지 로드 (뒤로가기 가능, 히스토리o) |
reload() |
현재문서를 다시 로드 |
replace('주소') |
현재페이지를 새페이지로 교체(뒤로가기 불가, 히스토리x) |
for(var key in location)
{
console.log(key+" : "+location[key]);
}
//location.herf값을 조정하여 페이지를 이동시킴!
//이미 띄워져 있는 창의 주소를 컨트롤한다.
function movePage(){
temp.location.href="http://iei.or.kr";
//뒤로 가기 기능 있음
location.assign('http://iei.or.kr');
//뒤로 가기 기능 없음
location.replace('http://iei.or.kr');
//새로고침
location.reload('http://iei.or.kr');
temp.focus();
setTimeout(function() {
temp.close();
}, 2000);
}
navigator 객체
브라우저에 대한 정보를 가지는 객체
//navigator 객체 : 브라우저에대한 정보를 가지고 있는 객체
for(var navi in navigator){
console.log("navigator"+navi+" : "+navigator[navi]);
}
DOM (Document Object Model)
문서 객체 - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한것, 모든 노드객체에 접근할 수 있는 요소와 메소드를 제공
노드 - HTML에 있는 태그를 구조화(트리)하였을때 각각의 태그가 노드
요소노드와 텍스트노드
요소노드 - 태그 그 자체를 의미
텍스트노드 - 태그에 들어갈 텍스트 내용
텍스트 노드 있는 문서객체 생성
요소노드와 텍스트노드를 생성하고 이를 body노드의 자식으로 포함 가능
메소드 |
내용 |
document.createElement('태그명') |
요소노드 생성 |
document.createTextNode('내용') |
텍스트노드 생성 |
객체명.appendChild(node) |
태그에 자손으로 노드를 추가 |
절차
요소노드 생성 -> 텍스트 노드 생성 -> 요소노드에 텍스트 노드 추가 -> body객체에 요소노드 추가
onload=function(){
//document.write("<div id='root'>추가된 div</div>");
var eH2=document.createElement("h2");
var eH2Text=document.createTextNode("element 생성하기");
eH2.appendChild(eH2Text);//<h2>element 생성</h2>
document.body.appendChild(eH2);
}
텍스트 노드 없는 문서객체 생성
요소노드를 생성하고 속성을 설정한 후 이를 body노드의 자식으로 포함 가능
메소드 |
내용 |
객체명(변수).속성 = 속성값 |
태그 속성값 설정 |
객체명.setAttribute('속성명',속성값) |
태그에 속성값 설정 |
객체명.getAttribute(속성명) |
태그 속성확인 |
객체명.appendChild(node) |
태그에 자손으로 노드를 추가 |
절차
요소노드 생성 -> 생성된 노드 속성 설정 -> body객체에 요소노드 추가
function addImg(){
var pic=document.getElementById('pic');
var picture=document.createElement('img');
//방법1
// picture.src="http://cmsimg.mnet.com/clipimage/artist/1024/000/155/155135.jpg";
// picture.width=200;
// picture.height=200;
//방법2
//속성변경! : setAttribute()함수이용!
picture.setAttribute('src',"http://poooo.ml/data/editor/1810/aa7462a202b36ecf40db2f8e44d4f594_1539011087_018.gif");
picture.setAttribute('height',200);
picture.setAttribute('width',200);
picture.setAttribute('style','border:2px solid red');
pic.appendChild(picture);
}
문서객체 제거
페이지내 작성된 문서의 객체(태그)를 제거하는 것
메소드 |
내용 |
document.removeChild(객체명) |
body태그 자손 태그 제거 |
객체명.parentNode.removeChild(객체명) |
제거할 객체를 기준으로 그 상위 객체로 가서 해당 객체 제거 |
function delImg()
{
//태그로 가져오기
var p1=document.getElementById('pic');
var pic=document.getElementsByTagName('img');
console.log(pic);
var di=pic[0].parentNode;
console.log(di.parentNode);
p1.removeChild(pic[pic.length-1]);
}
