1. addEventListener( ) 메소드
①형태: 문서 객체.addEventListener(이벤트 이름, 콜백함수)
②정의: 이벤트가 발생했을 때(마우스 클릭 등), 콜백함수를 실행하라는 것
③많이 쓰이는 코드
document.addEventListener('DOMContentLoaded', ( ) => { }
: "document라는 문서 객체의 COMContentLoaded 이벤트가 발생했을 때, 콜백 함수를 실행하라"
Q1.
A1) DOMContentLoaded 이벤트가 발생하면 "DOMContentLoaded 이벤트 발생" 텍스트를 포함하는 h1 태그를 body 요소에 추가하는 코드
-document.addEventListener('DOMContentLoaded', () => {...}) : DOMContentLoaded 이벤트가 발생할 때, 콜백 함수를 실행
-콜백함수 : h1 태그를 생성하고, 생성한 h1 태그를 body 요소의 마지막 자식으로 추가
2. .querySelector( ) 메소드
-예를 들어 <body> 태그 내의 <h1> 태그를 조작하기 위해선 먼저 읽어들여야 함. 이 기능을 수행.
ex)
const h1 = document.querySelector('h1')
h1.style.color = 'red'
=>.querySelector로 h1태그에 접근한 뒤, 여기에 h1이라는 이름을 붙여줌. 이후 css 선택자를 입력
3. .querySelectorAll( ) 메소드
-.querySelector( ) 메소드는 하나의 요소만 / .querySelectorAll( ) 메소드는 여러개의 요소들을 읽어들임
'기타 > (기타) 헷갈리는거, 어려운코드, 효율적인코드' 카테고리의 다른 글
| .forEach 메소드 (0) | 2023.04.24 |
|---|---|
| .innerHTML (0) | 2023.04.24 |
| 화살표 함수 (0) | 2023.04.21 |
| 4/21 (0) | 2023.04.21 |
| while 반복문 vs for 반복문 (0) | 2023.04.20 |
