웹 개발/Javascript

[Javascript] 자바스크립트, BOM(Broser Object Model)

코딩하는흑구 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


저작자표시