Document Object Model, Application Programming Interface 의 약자이다.
Document Object Model 은 HTML문서등의 div, span 등의 요소를 의미하는 것이고 줄여서 DOM, 돔 이라고 부른다.
API는 웹사이트가 동작하기 위해 작성하는 프로그래밍 영역이라고 생각하면 된다.
즉, 자바스크립트에서 HTML에 제공하는 여러가지 명령들이다.
ex.
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="box">Box!!</div>
<script src="./main.js"></script>
</body>
</html>let boxEl = document.querySelector('.box');
console.log(boxEl);script 의 위치가 저기인 이유는 script의 위치가 box클래스 요소가 작성되기 이전이면 box클래스 요소를 찾지 못하기 때문이다.
이를 해결하기 위해
<!DOCTYPE html>
<html lang="en">
<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>HTML을 다음과 같이 작성할 수 있다.
즉, script 태그에 defer 속성을 추가하면 된다.
그렇게 하면 HTML코드를 모두 읽은 후 script태그 영역의 코드를 실행하게 된다.
이렇게 해야하는 이유는 브라우저는 코드를 위에서 아래로 순서대로 읽어나가기 때문이다.
const boxEl = document.querySelector('.box')
document 객체는 웹페이지 그자체를 의미한다.
document 객체의 querySelector 메소드는 웹페이지에서 HTML요소 1개를 검색하는 기능을 한다.
const boxEl = document.querySelector('.box');
boxEl.addEventListener();
boxEl.addEventListener(1, 2);
boxEl.addEventListener('click', 2);
boxEl.addEventListener('click', function () {
console.log('Click~');
});자바스크립트에서는 닷 메서드를 이용해 요소에 메소드를 적용할 수 있다.
그리고 함수의 인수로 익명함수 역시 들어갈 수 있다.
addEventListener 함수의 두번째 인자로는 함수가 들어가야 하고, 'click'이벤트가 발생하면 함수를 실행하게 된다.
이 때 실행되는 함수를 Handler(핸들러)라고 부른다.
즉, 위에서 세개의 이벤트리스너 함수는 오류를 발생시키고 다음의 코드만이 정상적으로 실행된다.
const boxEl = document.querySelector('.box'); // 한개의 요소만 선택
boxEl.addEventListener('click', function () {
console.log('Click~');
});그리고
const boxEl = document.querySelector('.box');
boxEl.classList.add('active'); // 요소 boxEl의 클래스리스트에 active추가
let isContains = boxEl.classList.contains('active');
console.log(isContains);
boxEl.classList.remove('active'); // active 클래스 제거
isContains = boxEl.classList.contains('active');
console.log(isContains);이렇게 짜면
위와 같은 결과가 출력되는 것을 볼 수 있다.
그리고
const boxEl = document.querySelector('.box');
console.log(boxEl);
boxEl.addEventListener('click', function() {
console.log("Click!");
boxEl.classList.add('active');
});위와 같은 코드를 짠 후
개발자 도구로 div요소를 찍어 보면
위와 같은 결과가 보이는 것을 알 수 있다.
즉 클래스에 active가 추가되었다!
다른 코드를 한번 보자.
<!DOCTYPE html>
<html lang="en">
<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">Box1!</div>
<div class="box">Box2!</div>
<div class="box">Box3!</div>
</body>
</html>// 조건에 해당하는 모든 요소를 찾아서 반환하는 메소드
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
// 이 때 리턴되는 객체는 NodeList 로 유사배열(Array-like)이다.
boxEls.forEach(function (boxEl, index)
{
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});Array.ForEach(El,idx,arr)는
El에 요소를, idx에 인덱스를 arr에 현재 메소드를 호출한 배열 레퍼런스를 대입해준다.
즉, 위의 코드들은 다음과 같은 결과를 console에 보여준다.
index + 1을 하는 이유는 HTML,CSS에서는 일반적으로 zero-based numbering을 하지 않기 때문이다.
<!DOCTYPE html>
<html lang="en">
<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">Box1!</div>
<div class="box">Box2!</div>
<div class="box">Box3!</div>
</body>
</html>const boxEl = document.querySelector('.box');
//Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box1!!
//setter, 값을 지정하는 용도
boxEl.textContent = "Hello JS!"이를 실행하면 boxEl에는 box클래스 중 맨처음 찾아진 요소의 레퍼런스가 저장되고
즉, 브라우저에는
이와 같은 화면이 출력된다.
