BOM

• Browser Object Model
• 웹브라우저를 객체로 표현한 것
• 최상위 객체는 window
• 

window

메서드

• open(url, name, specs)
  새로운 창을 연다.
  url : 오픈할 페이지의 url
  name : target을 지정하거나 윈도우의 이름
  specs : 여러가지 속성

open("http://www.naver.com", "_blank", "width=200");

• close
  열려진 창을 닫는다.
• alert
  내용을 나타내는 경고창이 뜬다.
  화면상에서 유효성체크 할 때 사용됨
  ex) 아이디 몇글자이상
• confirm
  사용자의 대답을 확인하는 창이 뜬다.
• prompt
  메시지와 초기값을 나타내고
  새로운 값을 입력할 수 있는 창이 뜬다.
• setTimeout(fn, ms)
  주어진 시간이 경과하면 지정된 함수 호출
  함수를 직접 정의해도 됨
• clearTimeout(object)
  setTimeout 메서드 종료
• setInterval(fn, ms)
  주어진 시간이 경과할때마다 지정된 함수 호출
  함수를 직접 정의해도 됨
• clearInterval(id변수)
  setInterval 메서드 종료
• moveTo(x,y)
  절대적인 위치 x,y로 이동
• moveBy(x, y)
  상대적인 위치로 x와 y값만큼 이동
• resizeTo(x,y)
  x와 y값으로 창의 크기를 재조정
• resizeBy(x, y)
  현재 크기에서 x와 y값 만큼 크기를 재조정
• scrollTo(x, y)
  스크롤을 x와 y로 이동
• scrollBy(x, y)
  스크롤을 x와 y값만큼 이동

속성

• opener
  open()을 통해 새로운 창을 열었을 때
  그 창을 자식창이라 한다면
  부모창을 가리킬 때 opener라 함

예제1. 1초마다 랜덤으로 바뀌는 배경색

<script>
var bg;
function start(){
	bg = window.setInterval(color, 1000);
}

function color(){
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
	var rgb = "rgb(" + r + "," + g + "," + b + ")";
		
	document.body.style.background = rgb;
}

</script>

DOM

• HTML 문서의 계층적인 구조를 트리로 표현
• 

HTML 요소 찾기

getElementById

• id로 찾기

getElementsByName

• name으로 찾기
• 배열로 반환

getElementsByTagName

• Tag 이름으로 찾기
• 배열로 반환

HTML 요소 내용변경

innerHTML

HTML 요소 속성변경

• getElementById("change").src = "새로운 속성";
  id가 change인 요소를 찾아 src를 "새로운 속성"으로 변경

HTML 요소 스타일변경

• document. getElementById("style").style.color = "yellow";

예제. 스위치 on/off

<img id="onoff" src="../../images/sw_off.png" onclick="on()">

<script>
function on(){
// 이미지 객체를 obj에 담는다 
	var obj = document.getElementById("onoff");
	
	console.log(obj);
	var src = obj.src;
	console.log(src);
	// 이미지 소스(String값)를 "/" 구분자로 잘라서 배열을 생성한다.
	var imgsrc = src.split("/");
	var imgName = imgsrc[imgsrc.length-1];
	
	if(imgName == "sw_off.png"){
		obj.src = "../../images/sw_on.png";
	}else{
		obj.src = "../../images/sw_off.png" ;
	}
	
}

</script>

DOM 트리 순회

• parentNode
  현재 노드의 부모 노드 반환
• childNodes
  한 요소의 모든 자식요소를 배열로 반환
• firstChild
  childNodes의 첫번째 자식 노드가 반환
  = childNodes[0]
• lastChild
  childNodes의 마지막 자식 노드 반환
  = childNodes[childNodes.length -1]
• nextSibling
  현재 노드의 다음 형제 노드 반환
• previousSibling
  현재 노드의 이전 형제 노드 반환

HTML 요소 생성

• 텍스트 노드를 갖는 요소와 갖지 않는 요소로 구분
• 요소 노드와 텍스트노드를 생성한 후에 텍스트 노드를 요소 노드에 붙임

• createElement(tagName) : 태그요소 생성
• createTextNode(text) : 텍스트 노드 생성
• appendChild(node) : 새로운 노드를 마지막에 추가
• insertBefore(node, element) : 새로운 노드를 기존요소 앞에 추가
• removeChild(node) : 노드 지정 삭제
• remove() : 노드 전부 삭제