🔻HTML 계층 구조🔻
- HTML 계층 구조는 Tree 구조로 이루져있다.
- 그 조직을 이루는 방식이 BOM, DOM이 있다.
1. BOM
- 초창기 모델, 현재도 사용하고 있다.
- 선택적 모델 : 계층 구조에 일부 태그만 포함되어 있다.
- 계층 구조에 포함되지 않은 태그는 조작이 불가능하다.
- 조작 가능 태그 : 이미지, 링크, 폼태그
- 접근 방법 : 태그의 name을 사용하여 검색한다. (id, class는 인식할 수 없다.)
- 최상위 계층은 window 이다.
2. DOM
- 현재 발전된 모델
- 전역 모델 : 계층 구조에 모든 태그가 포함되어 있다.
- 모든 태그 조작이 가능하다.
🔻BOM(Browser Object Mode)🔻
- html, css를 조작한다.
- JavaScript를 사용하여 브라우저 창의 크기, 위치, 히스토리 등을 제어한다.
window
- 윈도우 객체로써 현재 문서가 실행되는 브라우저 창을 참조한다.
document
- 문서 객체로서 현재 문서를 참조한다.
- DOM에 접근하여 문서 구조를 조작할 수 있다
text가 document를 접근하기 위해 부모인 Form를 거쳐서 접근해야한다.
<body>
<h1>BOM</h1>
<form name="form1">
<input type="text" name="txt1">
</form>
<script>
//txtbox 값 조작
window.document.form1.txt1.value = '홍길동';
</script>
</body>
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript] HTML 속성 조작하기 (0) | 2023.10.05 |
|---|---|
| [JavaScript] Event Handling + 마우스 이벤트 + 키 이벤트 (0) | 2023.10.05 |
| [JavaScript] 배열, Array (선언, 대입, 꺼내기) (0) | 2023.10.05 |
| [JavaScript] Date 객체 (0) | 2023.10.05 |
| [JavaScript] 문자열 함수 (0) | 2023.10.05 |
