[Javascript] 자바스크립트, BOM(Broser Object Model)
- 웹 개발/Javascript
- 2019. 4. 6. 21:59
BOM(Broser Object Model)
자바스크립트 기능
- 코어(Core) + 브라우저(BOM,DOM) + 확장 라이브러리
BOM, Broser Object Model
- 자바스크립트로 HTML 문서상의 객체를 접근 + 조작하기 위한 객체 모델(체계)
- 모든 브라우저 지원함
- 문서상의 일부 객체(태그)를 이미 정해진 트리구조를 통해서 접근 + 제어 모델(*****)
- 객체(태그)를 식별하기 위한 식별자를 [name] 속성을 사용한다.(id,class 인식 못함)
- 객체(태그) 중 유일한 객체는 예약어를 제공한다.(window, document 등..)
- BOM 트리에 포함되어 있지 않은 태그들은 접근 불가.(조작불가능)
DOM, Document Object Model
- XML 인터페이스의 한 종류
- XML을 조작하기 위해서 만든 인터페이스 집합
- JavaScript DOM : HTML을 조작하기 위해서 DOM 구현
- Java DOM : XML을 조작하기 위해 DOM 구현한 결과 집합
- C# DOM
- C DOM
- C++ DOM
- DOM Level 1
- DOM Level 2
- DOM Level 3(주로 사용)
BOM을 이용해서 객체(태그)에 접근하는 예제
- window : BOM의 최상위 객체, 예약어, 브라우저 창을 참조하는 객체
- document : 문서객체 ,예약어, HTML 문서 자체를 참조하는 객체(<html>)
- BOM으로 찾은 객체(태그)는 ( . )을 통해서 HTML이 가지고 있는 속성 대부분을 접근(제어)할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form name="form1"> <input type="text" name="txt1" /><br /> <input type="text" name="txt2" value="아무개"/><br /> <input type="text" name="txt3" /><br /> </form> <form name="form2"> <input type="text" name="txt4" /><br /> <input type="text" name="txt5" /><br /> <input type="text" name="txt6" /><br /> </form> <script> window.document.form1.txt1.value ="홍길동"; console.log(window.document.form1.txt2.value); window.document.form1.txt3.size = 50; var now = new Date(); var flag = now.getHours() < 12 ? true : false; if(flag){ window.document.body.bgColor = "green"; }else{ window.document.body.bgColor = "cornflowerblue"; } </script> </body> </html> | cs |
'웹 개발 > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트 마우스 이벤트(mouse event) (0) | 2019.04.06 |
|---|---|
| [Javascript] 자바스크립트 이벤트(Event) (0) | 2019.04.06 |
| [Javascript] 자바스크립트 배열(Array) (0) | 2019.04.06 |
| [Javascript] 자바스크립트 날짜 시간 자료형(Date) (0) | 2019.04.06 |
| [Javascript] 자바스크립트 문자열함수(length, indexOf, substring 등) (0) | 2019.04.06 |