// HTML 속성 제어하기
- CSS: 선택자 > 태그 검색 > 접근 > 서식 조작
- JavaScript: 검색 도구 > 태그 검색 > 접근 > 태그 조작
- HTML 계층 구조를 활용하여 탐색
1. BOM
2. DOM
1. HTML 태그 대부분의 속성은 JavaScript의 프로퍼티로 제공된다.
- HTML : <input type="text" size="10">
- JavaScript : txt1.size
2. HTML 태그의 속성명을 그대로 JavaScript 프로퍼티명으로 사용한다.
3. 대부분 읽기/쓰기 모두 지원한다. (일부 쓰기 or 읽기 전용이 있긴 하다.)
4. 태그의 식별자나 근본적인 속상은 조작하지 않는다.
5. 플래그 타입의 속성은 boolean으로 조작한다.
6. HTML 속성명이 복합어면 캐멀표기법으로 작성한다.
7. HTML 속성값이 열거형이거나 색상명이면 문자열로 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript로 HTML 태그의 속성을 제어하기</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="확인" name="btn1">
</form>
<script>
var txt1 = window.document.form1.txt1;
var btn1 = window.document.form1.btn1;
btn1.onclick = m1;
function m1() {
window.document.body.bgColor = 'gold';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript로 HTML 태그의 속성을 제어하기</h1>
<form name="form1">
<input type="text" name="txt1">
<input type="button" value="확인" name="btn1">
<hr>
<input type="button" value="끄기" name="btn2">
</form>
<script>
var txt1 = window.document.form1.txt1;
var btn1 = window.document.form1.btn1;
var btn2 = window.document.form1.btn2;
btn2.onclick = m2;
function m2() {
if(window.document.body.bgColor != 'black') {
window.document.body.bgColor = 'black';
btn2.value = '켜기';
} else {
window.document.body.bgColor = 'white';
btn2.value = '끄기';
}
}
</script>
</body>
</html>
※ 하나의 버튼(스위치) > On/Off > 토글 버튼(Toggle Button)
// BOM, Browser Object Model > 비오엠
- 초창기 모델
- 현재까지 계속 사용
- 선택적 모델 > 일부 태그만 관리 > 일부 태그만 조작 가능 > 빠진 태그는 조작 불가능
- 이미지, 링크, 폼 태그 이외에는 조작이 불필요하다고 판단
- 태그의 name을 사용해서 접근한다.
- id, class는 인식하지 못 한다.
- HTML 태그의 속성만 조작 가능하다. > HTML RGB 16진수만 지원
- 예약어
~ window: 창
~~ window.close(): 창을 닫아준다.
~ document: 문서 객체
// DOM, Document Object Model > 돔
- BOM을 개선한 모델
- 현재까지 계속 사용(주력)
- BOM 기반 + 기능 추가
- DOM > BOM 확장 > DOM의 모든 기능을 BOM의 document 내부에 구현해놨다.
- 모든 태그를 인식 > 모든 태그 조작 가능
- name, id, class 모두 인식할 수 있다.(name 비권장)
- 버전이 있다. (DOM Level 1 > DOM Level 2 > DOM Level 3)
~ DOM Level 0: BOM을 일컫기도 한다.
- 태그 검색
1. id 검색 > document.getElementById('id')
2. class 검색 > document.getElementByClassName('id')
3. name 검색 > document.getElementByName('id')
4. 태그명 검색 > document.getElementByTagName('id')
5. CSS 선택자 검색 > document.querySelector('selector')
document.querySelectorAll('selector')
- DOM 트리 구성 요소(노드): 태그뿐만 아니라 다른 요소들도 포함
1. 태그(1)
2. 속성(2)
3. PCDATA(3)
4. 주석(8)
5. 선언문(13)
- DOM 트리 구성 노드의 프로퍼티
1. nodeType > 해당 노드가 어떤 형식인지 > 열거형(숫자)
2. nodeName > 태그(태그명), 속성(속성명), PCDATA(#text)
3. nodeValue > 태그(null), 속성(속성값), PCDATA(문자열)
// 특정 포인트에 겹쳐 있는 모든 태그 정보 알아내기
~ document.elementsFromPoint
~ document.elementFromPoints
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
#cat2 {
position: absolute;
left: 100px;
top: 100px;
}
#cat3 {
position: absolute;
left: 50px;
top: 150px;
}
</style>
</head>
<body>
<img src="images/cat01.jpg" id="cat1">
<img src="images/cat02.jpg" id="cat2">
<img src="images/cat03.jpg" id="cat3">
<script>
window.onmousedown = function() {
let x = event.clientX;
let y = event.clientY;
//특정포인트에 겹쳐있는 모든 태그>
// document.elementsFromPoint
// document.elementFromPoints
console.log(document.elementsFromPoint(x,y));
}
</script>
</body>
</html>
'클라이언트 > JavaScript' 카테고리의 다른 글
| [자바스크립트(JavaScript)] Collection (0) | 2023.04.24 |
|---|---|
| [자바스크립트(JavaScript)] BOM(Window, Screen, Location, History) (0) | 2023.04.24 |
| 자바스크립트(JavaScript) 이벤트 (0) | 2023.04.21 |
| [자바스크립트(JavaScript)] 상속 (0) | 2023.04.09 |
| [자바스크립트(JavaScript)] 파일 쪼개기 (0) | 2023.03.22 |
