3. onload() + 이벤트와 DOM (자바 스크립트)
[JAVASCRIPT] onload() :
웹 페이지가 로딩되었을 때 로딩된 이벤트에 맞춰 원하는 함수, 코드를 호출할 수 있도록 한다.
한번에 실행될 onload 메서드가 1개보다 많을 시 마지막 onload 메서드만 실행된다.
*window.onload
전역 콜백 함수로 자바스크립트에 사용 시, 페이지 로딩 후 자동으로 실행이 된다.
- window 객체 뿐 아니라 원하는 객체가 로드되었을 때 실행될 코드를 설정할 수 있음 document.getElementById(“myFrame”).onload = function(){ //실행될 코드 }
아니면, 이벤트를 직접 연결할 수도 있음.
window.addEventListener(‘load’, function(){ //실행될 코드 });
1. 창에서 onload
window.onload = function() {
alert("윈도우 창이 켜졌을 때 바로 실행됨");
}
2.태그에서 onload
<body onload = alarm()>
<script>
function alarm() {
alert("body 태그에서 onload 지정 가능");
}
</script>
</body>
3. 특정객체에서 onload
<body>
<input type="button" id="btn1" value="click the button" onclick=count_alarm()>
<div id="count">0</div>
<script>
window.onload(alert("페이지가 로딩되었습니다."));
function count_alarm() {
const count = document.getElementById("count");
let number = count.innerText;
number ++;
count.innerText = number;
const alarm = document.getElementById("btn1").onload(alert("숫자가 1 증가합니다."));
}
</script>
</body>
01: 이벤트(Event)
1) HTML 이벤트
| 이벤트명 | 설명 |
| click | 클릭시 발생 |
| change | 변동이 있을시 발생 |
| focus | 포커스를 얻었을때 발생 |
| keydown | 키를 눌렀을때 발생 |
| keyup | 키에서 손을 땟을때 발생 |
| load | 문서의 로드가 완료 되었을때 발생 |
| unload | 문서가 언로드 되었을때 발생 |
| resize | 윈도우 크기가 변경될 경우 발생 |
| mouseover | 마우스가 특정 객체 위로 올려졌을 시에 발생 |
| mousedown | 마우스를 클릭 했을때 발생 |
| mouseout | 마우스가 특정 객체 밖으로 나갔을 때 발생 |
| mousemove | 마우스가 움직였을 때 발생 |
| mouseup | 마우스에서 손을 땟을때 발생 |
| select | option 태그 등에서 선택을 했을때 발생 |
| submit | 입력양식이 제출 요청 될때 발생 |
2) 이벤트 핸들러
HTML 속성으로 정의
<input type="button" value="Button" onclick="alert('버튼 클릭됨!!')"></input>
자바스크립트 에서 정의
<script>
document.getElementById('b1').onclick = function() {alert("버튼 클릭됨!!")}
</script>
<body>
<input type="button" id="b1">
</body>
02: DOM(Document Object Model)
1) DOM (Document Object Model) 개요
문서객체모델이라고 하며 HTML 혹은 XML문서의 구조화된 표현을 제공하는 표준입니다. HTML에서는 자바스크립트가 DOM 구조에 접근할 수 있는 방법이 제공되며 이를 통해 문서 구조, 스타일, 내용등을 변경 할 수 있습니다.
자바스크립트는 DOM을 이용하여 HTML의 태그, 속성, 스타일 등을 추가/삭제 하거나 변경할 수 있습니다.
Document Node
document 객체를 말하며 DOM 트리에 접근하기 위한 최상위 노드로 모든 DOM 트리에 접근하기 위한 시작점이 됩니다.
Element Node
HTML 구성 요소 즉 대표적으로 대그를 의미합니다. 문서내 태그들은 모두 Element Node 들 입니다. 각각의 Element Node 는 다시 Attribute와 Text Node를 가집니다.
Attribute Node
태그들의 속성을 객체화한 노드를 말합니다. 만일 특정 태그의 속성에 접근하려면 Attribute Node를 사용해야 합니다.
Text Node
태그의 텍스트를 객체화한 노드입니다. 자식 노드를 가질 수 없으며 DOM 트리구조의 최종단 노드가 됩니다.
HTML 요소선택
getElement(s)ByXXX() 를 이용해 특정 요소(태그) 노드를 가지고 옵니다.
2) HTML 요소 핸들링
자바스크립트에서 HTML DOM 요소에 접근하는 방법은 태그이름, 아이디, 클래스, 이름 등을 이용해 특정 노드 객체를 선택하는 것입니다. CSS 의 셀렉터와 유사 하다고 볼 수 있습니다.
HTML 요소선택
document.getElementsByTagName("tag_name")
document.getElementById("id_name")
document.getElementsByClassName("class_name")
document.getElementsByName("name_attribute")
쿼리 셀렉터
document.querySelector("#main, #title, #footer");
document.querySelectorAll("p.note, p.tip")
HTML 요소 생성, 제거, 추가
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(element)
3) HTML 요소의 속성 행들링
HTML 요소의 속성값 변경
element.setAttribute(attribute, value)
element.getAttribute(attribute, value)
element.removeAttribute(attribute)
HTML 이벤트핸들러 추가
document.getElementById("id_name").onclick = function(){ code };
텍스트 노드 변경
element.innerHTML = '<tag>text</tag>';
element.innerText = 'text';
03: 디자인 요소 변경
1) 디자인 요소 변경
style 속성변경
document.getElementById('box1').setAttribute('style','background-color:yellow');
style 객체 변경
document.getElementById('box1').style.backgroundColor = 'yellow';
클래스 지정
document.getElementById('box1').className = 'bgyellow';
2) 화면 숨기기
document.getElementById('box1').style.display = 'none';
document.getElementById('box1').style.visibility = 'hidden';