[javascript] 브라우저 객체 모델 / window 객체 / document 객체

[javascript] 브라우저 객체 모델 / window 객체 / document 객체

---

✔️ 브라우저 객체 모델 BOM

: 브라우저와 상호작용하는 메소드와 인터페이스를 제공한다.

: 웹 브라우저와 관련된 객체의 집합이다.

: BOM 은 문서 객체 모델 DOM 과 달리 W3C 표준 모델은 아니지만, 자바스크립트가 브라우저의 기능적 요소들을 직접 제어하고 관리할 방법을 제공한다.

 

 

✔️ window 객체

: DOM 문서를 포함한 브라우저의 창을 나타내며, document 속성은 브라우저 창에 로드된 DOM 문서를 가리킨다.

: window 객체는 브라우저 기반 자바스크립트의 최상위 객체다.

: 전역 객체라고도 불리며 전역 객체는 그 객체의 프로퍼티나 메소드를 사용할 때, 이름 명시할 필요가 없다.

: 모든 객체, 전역 함수, 전역 변수들은 자동으로 윈도우 객체의 프로퍼티가 된다.

 

 

✔️ document 객체

: 윈도우 객체의 document 속성은 브라우저가 불러온 웹 페이지를 나타내는 document 객체다.

: 페이지 콘텐츠의 진입점 역할을 수행한다.

: 웹 페이지 그 자체를 의미한다.

⭐ HTML 요소에 접근할 때 document 객체로 접근한다.

📓 document 접근 방법

function send() {
	//폼 접근 방법
	//const f = document.forms[0]; // 첫번째 폼
	const f = document.myForm; // 이름으로 접근(form 태그의 name 속성)
	//console.log(f);
	
	// form 을 이용하여 form 아래의 입력 객체를 name 속성의 값으로 접근
	let name = f.name.value;
	
	//getElementsByName() 메소드를 이용하여 name 속성 접근
	let birth = document.getElementsByName("birth")[0].value;
	
	//getElementById() 메소드를 이용하여 id 속성으로 접근
	let age = document.getElementsById("age").value;
	
	let s = "이름:" + name + "<br>생일:" + birth + "<br>나이:" + age;
	
	//class 속성값으로 접근
	//const objBox = document.getElementsByClassName("layout")[0];
	
	objBox.innerHTML = s;
	
	//선택자로 접근 (클래스라서 쩜 붙임)
	const objBox = document.querySelector(".layout");
	
}