DOM API란?
-> 여기서 DOM은 Document Obhect Model 의 약어로 document는 html에 들어있는 여러가지 오브젝트 모델을 말하는데, 오브젝트모델은 대표적은 div요소 span요소 input요소등이 있다.
API는 application programming interface로 어떤 어플리케이션이나 웹사이트가 동작하기위해 입력하는 프로그래밍 명령이라고 생각하면 쉽다.
*자바스크립트에서 html을 제어하는 여러가지 명령들*이라고 생각하면된다.
<!DOCTYPE html>
<html lang="ko">
<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 defer src="./main.js"></script>
</head>
<body>
<div class="box">box!!!</div>
</body>
</html>이러한 코드를 작성했을때, main.js 파일에 적성하면 콘솔창에 null이라는 값이 뜨게 된다.
let boxEl = document.querySelector('.box)
console.log(boxEl)
브라우저는 코드를 위에서 아래로 읽어나간다.
그때, 스크립트파일을 헤드에 넣었을경우, html파일을 읽기도전에 js파일을 읽으라고 명령하는거나 마찬가지....
그렇기때문에 콘솔창에는 null이라는 값이 뜨게된다.
문제를 해결하기 위해서는 스크립트파일을 바디부분에 작성하거나 헤드에 작성할경우, defer라는
속성을 반드시! 넣어줘야한다. (but 스크립트파일은 정보에 해당하는 내용이기때문에 head부분에 넣는건 권장)
//html 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');
//html 요소에 적용할 수 있는 메소드!
boxEl.addEventListener();
//인수를 추가 가능!
boxEl.addEventListener(1, 2);
//1 -이벤트(클릭은 상황임)
boxEl.addEventListener('click', 2);
//2 -핸들러(익명함수를 넣는것을 핸들러라고함)
boxEl.addEventListener('click', function () {
console.log('CLICK~~~');
});
//요소의 클래스 정보 객체 활용!
//박스라는 클래스를 가지고 있는요소에 엑티브라는 클래스를 추가를하겠다.라는 의미
//boxel 부분에 classlist라는 객체 내부에서 contains라는 메소드를 사용해서
//acitve가 있는지 없는지 체크해주는 api
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); //true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); //false'개발이야기 > JS' 카테고리의 다른 글
| [JS] 조건문(2) switch (0) | 2022.02.11 |
|---|---|
| [JS] 연산자 (0) | 2022.02.11 |
| [JS] 조건문 (if, else) (0) | 2022.01.31 |
| [JS] 함수 (function) (0) | 2022.01.31 |
| [JS] 변수 (let, const) (0) | 2022.01.31 |