const title = document.getElementById("title");
console.log(title);
html 의 id 인 title 을 가져오는 방법이다.
console.dir(title);
목록을 출력
const title = document.getElementById("title");
title.innerText = 'Hello';
title.className = 'hello';
console.dir(title);
이렇게 html 문서를 수정해 줄수도 있다.
<html>
<h1 class="hellllllllo" id="title">Grab Me!</h1>
<javascript>
console.log(title.id);
console.log(title.className);
id 와 class 를 출력해준다.
querySelector 란 element 를 css 방식으로 검색하는 것을 말한다.
<div class="hi">
<h1>Hello</h1>
</div>
const hello = document.querySelector('.hi h1');
console.log(hello);
on 으로 시작하는 것들은 이벤트이다.
마우스를 올려 놓거나 입력을 끝내거나 enter 를 누르는 것, wifi 에서 접속이 끊어졌을 때 등등...
const hello = document.querySelector('.hi h1');
function handleTitleClick() {
console.log('Hi~ hello!');
}
hello.addEventListener('click', handleTitleClick);
window
function handleWindowResize() {
document.body.style.backgroundColor='tomato';
}
documents.div 이렇게 가져올 수는 없다.
documents.body 와 같이 body, head, title 만 허용된다.
그 밖의 이벤트들
window.addEventListener('resize', handleWindowResize);
window.addEventListener('copy', handleWindowCopy);
window.addEventListener('offline', handleWindowOffline);
window.addEventListener('online', handleWindowOnline);
'🤹🏻♀️ Javascript' 카테고리의 다른 글
| preventDefault() (0) | 2021.10.10 |
|---|---|
| className, classList, toggle (0) | 2021.10.09 |
| 조건문, 반복문, 함수, 객체 등 (0) | 2021.10.03 |
| 문자열, 숫자, 불 값, 논리연산자, undefined 와 null (0) | 2021.10.02 |
| '이벤트 객체'를 통해서 메뉴 활성화 버튼 실습 (0) | 2020.05.06 |