Event문서 객체 (DOM/ Document Object Model)
웹 브라우저는 HTML 페이지에 있는 Element 들을 트리 형식으로 메모리에 로딩한다.
이때 각 노드를 "document object"라 한다.
웹 브라우저는 이러한 문서 객체를 접근할 수 있도록 API(데이터 + 기능)를 제공하는데 이를 "문서 객체 모델(DOM)"이라고 한다.
JS는 DOM을 호출/제어하기 위한 가장 보편적 언어이다.
트리구조가 파일 시스템에서 사용될 때 'NODE'를 '파일'이라고 부른다.
트리구조가 웹브라우저에서 정보를 표현하는데 사용할 때 'NODE'를 'document Object'라고 부른다.
* Element = Tag + content
* API = Application Programming Interface, ex) React, Vue, js, n
Object Modle
= DOM + BOM + JS
DOM : HTML 문서 객체의 집합
BOM : 브라우저 자체를 제어하는 객체 집합
JS : 자바스크립트를 위한 객체 집합
DOM을 제어하기 위한 일반적인 방법
- 제어 대상(객체)를 찾는다.
- 명령을 내린다.
- 브라우저가 처리한다.
예시)
- 이미지 객체를 찾는다.
- 이미지의 사이즈를 변경한다.
- 브라우저가 처리한다.
기본적인 문서 객체 제어
DOMContentLoadedEvent
초기 HTML 문서를 완전히 불러오고 분석했을 때 발생하는 이벤트.
JS 엔진은 <script>를 순차적으로 (위 → 아래) 수행.
즉 JS엔진은 html 문서가 다 로딩되기 전에도 수행될 수 있음.
객체 제어를 위해서는 문서가 다 로딩되고 나서 제어를 시작해야함. (DOM구조가 다 만들어지고 나서 제어를 수행.)
DOMContentLoaded는 문서가 완전히 로딩되고 난 후 이벤트 발생.
이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다.
스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.
* Event : 어떠한 조건이 만족되었을 때 발생되는 신호. Messgae가 꼭 발생하지는 않는다.
* Message : Event의 값
DOMContentLoadedEvent 처리
addEventListener()
DOM의 로딩이 끝나면 DOMContentLoaded라는 이벤트가 발생하는 것을 인지했으니
DOMContentedLoaded 이벤트가 발생되면 callbockDOMLoaded를 실행하라.
<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>
<script>
const callbackDOMLoaded = function(){
document.body.innerHTML += "<h1>hello world</h1>"
}
window.addEventListener('DOMContentLoaded', callbackDOMLoaded)
</script>
</head>
문서 객체의 선택 방법
상위 Document Object의 선택
- document.head
- document.body
- document.title
특정 Document Object의 선택
- document.querySelector(selector); //단일 선택
- document.querySelectorAll(selector); //복수 선택
*여기서 selector는 CSS selector와 같다.
(tag, class, id, child, 후손, 속성, 수열)
https://cruella-de-vil.tistory.com/8?category=1015870
querySelector()
<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>
<script>
const callbackDOMLoaded = function(){
const header = document.querySelector('h1');
header.style.color = 'red';
}
window.addEventListener('DOMContentLoaded', callbackDOMLoaded)
</script>
</head>querySelectorAll()
<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>
<script>
const callbackDOMLoaded = function(){
const header = document.querySelectorAll('h1');
header.forEach((element) => {
element.textContent = 'Head';
element.style.color = 'white';
element.style.background = 'red';
element.style.padding = '2px';
})
}
window.addEventListener('DOMContentLoaded', callbackDOMLoaded)
</script>
</head>
<body>
<h1></h1>
<h1></h1>
<h1></h1>
</body>
DOM 구조에서 document element를 단일 선택하는것이 querySelector()이고
복수로 선택하는것이 querySelectAll() 입니다.
선택은 CSS의 selector 규격과 동일합니다.
속성의 조작
객체.setAttribute() : 속성 설정
객체. getAttribute() : 속성 구현
<body>
<h1 style="color:red">Hello world</h1>
<script>
const head1 = document.querySelector('h1')
let style = head1.getAttribute('style');
console.log(style);
</script>
</body>문자 조작
객체.textContent : 입력된 문자열을 해석 없이 그대로 입력객체.innerHTML : 입력된 문자열을 해석하여 HTML 형식으로 출력 Content를 수정하거나 삽입할 경우는 textContent, html 코드를 입력할 때는 innerHTML을 사용한다.
스타일 조작
css에서 스타일 사용시 '-'를 사용할 수 있으나 자바스크립트에서는 사용할 수 없다.
| CSS | JS Style |
| background-color | backgroungColor |
| text-align | textAlign |
h1.style['background-color'] 형태로 계산된 문자열을 사용할 수 있다.
문서 객체의 생성 및 추가
문서객체의 생성 : document.createElement()
문서 객체의 추가 : 객체.appendChild()
문서 객체의 제거
부모객체.removeChild(자식객체)
setTimeout() 참고 => https://developer.mozilla.org/ko/docs/Web/API/setTimeout
removeChild()
<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>
<script>
const OnContentLoaded = function(event)
{
const d1tag = document.querySelector('#d1');
const h1tag = document.createElement('h1');
h1tag.textContent = 'hello world';
d1tag.appendChild(h1tag);
setTimeout(()=>{ d1tag.removeChild(h1tag); }, 3000);
}
addEventListener('DOMContentLoaded', OnContentLoaded);
</script>
</head>
<body>
<div id="d1"></div>
</body>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 원주율에 따른 원의 넓이, 둘레 구하기 (예제) (0) | 2022.04.27 |
|---|---|
| [JavaScript] Event +예제 (0) | 2022.04.26 |
| [JavaScript] Static (0) | 2022.04.21 |
| [JavaScript] 상속(Inheritance), super() (0) | 2022.04.21 |
| [JavaScript] throw(예외 발생) (0) | 2022.04.21 |