✔ HTML DOM 메서드는 HTML 요소에서 수행 할 수 있는 작업 입니다.
✔ HTML DOM 속성은 설정하거나 변경할 수 있는 값 (HTML 요소의)입니다.
✔ DOM 프로그래밍 인터페이스
- HTML DOM은 JavaScript (및 기타 프로그래밍 언어)로 액세스 할 수 있습니다.
- DOM에서 모든 HTML 요소는 객체 로 정의됩니다.
- 프로그래밍 인터페이스는 각 개체의 속성 및 메서드입니다.
- 메서드( method )는 당신이 (추가 또는 HTML 요소를 삭제 등) 할 수있는 작업입니다.
- 속성( property )은 당신이 (HTML 요소의 내용을 변경하는 등) 가져 오거나 설정할 수있는 값입니다.
// id로 접근시
document.getElementById("id")
// name으로 접근시
document.getElementsByName("name").[인덱스]
// class으로 접근시
document.getElementsByClassName("className").[인덱스]<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width
, initial-scale=1.0">
<script>
/* 문서의 모든 콘텐츠(images, script, css, etc)가
로드된 후 발생하는 이벤트*/
window.onload = function () {
console.log('window onload 호출~!');
};
// change innerHTML id
function changeInnerHTML(obj) {
document.getElementById("testDiv").innerText
= "버튼의 class : " + obj.className
+"\n 버튼의 id : " + obj.id
+"\n 버튼의 name : " + obj.getAttribute("name");
}
function changeReset(){
document.getElementById("testDiv").innerText = "테스트 영역";
}
</script>
</head>
<body>
<button type="button" class="testClass" id="testId" name="testName"
onClick="changeInnerHTML(this)">버튼</button>
<button type="button" onClick="changeReset()">초기화</button>
<div id="testDiv">테스트 영역</div>
</body>
728x90
반응형
'Dev_Study > JavaScript' 카테고리의 다른 글
| [JS] 객체 ( Object ) (0) | 2021.03.10 |
|---|---|
| [JS] 배열 ( Array ) (0) | 2021.03.10 |
| BOM - Window (0) | 2021.03.04 |
| HTML DOM ( Document Object Model ) (0) | 2021.02.19 |
| JavaScript 버전 (0) | 2021.02.19 |