1. DOM-API
- DOM-API란? Document Object Model-Application Programming Interface의 약자로, HTML document의 Object Model을 사용해 웹 사이트를 동작시키게 하기 위한 프로그래밍 명령이다.
요약 : Javascript 에서 HTML을 제어하기 위한 명령이라고 이해하면 된다.
1) Test
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
rel="stylesheet"
/>
<link href="./CSS/starbucks.css" rel="stylesheet" />
<!-- <script defer src="./JS/starbucks.js"></script> -->
<script>
let boxEl = document.querySelector(".box");
console.log(boxEl);
</script>
<title>Document</title>
</head>
<body>
<div class="box">BOX!!!!</div>
</body>
</html>- HTML Head 영역에 script 태그를 넣고 다음과 같이 boxEl 변수에 document.querySelector를 선언하고 그안에 box라는 문자 데이터를 넣어준뒤 콘솔 로그로 출력해서 확인해보면 다음과 같다.
1-1) Test 결과
null
- 확인해보니 결과가 null이 나왔다. null이 나온 이유는 head 태그 영역에 있는 script 태그에 boxEl 이라는 문자 데이터 요소가 box 라는 데이터를 찾을 수 없어서 콘솔에 null 이라고 표시된것이다.
참고사항 : null 이란? 개발자가 없는 값을 의미로 넣은 것을 뜻한다.
생각해보면 script 태그에 src 속성을 이용해 스크립트를 연결해서 보여줬는데도 이러한 null이 표시되는 이유가 무엇일까?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
rel="stylesheet"
/>
<link href="./CSS/starbucks.css" rel="stylesheet" />
<script src="./JS/starbucks.js"></script>
...생략...
<body>
<div class="box">BOX!!!!</div>
</body>- 브라우저를 실행할때 위에서 아래로 실행되는 방식으로 되어 있는데, head 영역에 script 태그가 있고 src 속성을 통해 로직이 작성된 javascript 경로를 보여주고 있다. 여기서 starbucks.js 까진 읽었고 이를 브라우저에 적용하려고 하는데, 밑에 있는 body 영역을 읽지 않았기 때문에 실질적으로 box 라는 요소를 찾을 수 없어 적용 시키지 못하고 임의로 값이 없는 null을 출력시킨 것이다.
Tip
그러면 저 값을 그대로 출력하고 싶다면 어떻게 해야할까?
1) Head 태그 영역에 defer 사용하기
...생략...
<script defer src="./JS/starbucks.js"></script>
...생략...- head 영역에 있는 script 태그에 defer 라는 Javascript 속성을 쓰면 div 태그에 작성된 class 요소의 box 문자 데이터를 찾아내 콘솔에 출력할 수 있다.
2) Body 태그 영역에 script 태그 넣기
...생략...
<body>
<div class="box">BOX!!!!</div>
<script src="./JS/starbucks.js"></script>
</body>
...생략...- body 영역에 있는 script 태그를 안으로 넣어서 사용하면 div 태그에 작성된 class 요소의 box 문자 데이터를 찾아내 콘솔에 출력할 수 있다.(다만, 되도록이면 script 태그는 정보 영역인 head 영역에 해당되기 때문에 body 영역에 사용하지 않는 것을 권장)
결과)
<div class="box">BOX!!!!</div>
- 다음과 같이 적용해봤더니 div 요소가 그대로 출력됨을 확인할 수 있다.
2. DOM-API 종류
- DOM-API는 현재 작성된 내용 이외에도 너무나 많지만 Javascript에서 주로 사용하는 종류 위주로 작성해보려 한다.
// 1. HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box'); // HTML의 box 라는 css 클래스 선택자를 명시함
// 2. HTML 요소에 적용할 수 있는 이벤트 메서드
boxEl.addEventListener();
// 3. 인수(Arguments) 추가
boxEl.addEventListener(1, 2);
// 4. 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
// 5. 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function (){
console.log('Click~');
});2-1) querySelector
- 선택자를 통해서 찾을 수 있는 여러가지 요소들중 가장 먼저 찾아진 요소 하나만 반환한다.
// 버튼 클릭시 이벤트 발생
let boxEl = document.querySelector(".box");
boxEl.addEventListener("click", function () {
// 1. 클래스 정보객체 활용(add)
boxEl.classList.add("active");
console.log(boxEl.classList.contains("active")); // true
// 2. 클래스 정보객체 활용(remove)
boxEl.classList.remove("active");
console.log(boxEl.classList.contains("active")); // false
}
// 3. - box 라는 클래스를 가지고 있는 요소에 active 라는 클래스를 추가한뒤 contains 키워드를 활용해 active 클래스가 있는지 없는지 확인후 true, false를 반환한다. (즉, active 라는 클래스가 있으면 true를 반환하고, 없으면 false를 반환한다)
- remove 키워드를 활용해 active 라는 클래스를 삭제한뒤 active 클래스가 없으면 false를 반환한다.
2-2) querySelectorAll
- 선택자를 통해서 찾을 수 있는 여러가지 요소들중 관련된 요소 모두를 찾아서 반환한다.
// HTML 요소를 전부 검색/찾기
// box 라는 요소를 전부 찾아서 적용
const boxEls = document.querySelectorAll(".box");
console.log(boxEls);
// 찾은 요소들을 반복해서 함수를 실행
// 익명 함수를 인수로 추가
boxEls.forEach(function () {});
// 첫 번째 매개변수(boxEl) : 반복 중인 요소,
// 두 번째 매개변수(boxEls) : 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});
// 출력
boxEls.forEach(function (boxEl, index) {
// order 클래스에 index의 1을 더해서 box 요소에 추가하겠다
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});- dsds
2-3) 간단 test
- querySelector를 활용하여 button을 클릭했을때 actionButton 이라는 선택자를 찾아서 반환시킨뒤 "클릭하셨습니다" 라는 문구를 콘솔에 출력해보세요
// HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
rel="stylesheet"
/>
<link href="./CSS/starbucks.css" rel="stylesheet" />
<script defer src="./JS/starbucks.js"></script>
</head>
<body>
<button class="actionButton">클릭해주세요</button>
</body>
</html>// Javascript
// 버튼 클릭시 이벤트 발생
let boxEl = document.querySelector(".actionButton");
console.log(boxEl);
boxEl.addEventListener("click", function () {
console.log("클릭하셨습니다!");
});
- querySelectorAll과 foreach를 사용하여 rainbows 클래스에 order 클래스를 추가하고, 콘솔에 order-{index}를 순서에 맞게 출력해보세요
// HTML
...생략...
<body>
<div class="rainbows">red</div>
<div class="rainbows">orange</div>
<div class="rainbows">yellow</div>
<div class="rainbows">green</div>
<div class="rainbows">blue</div>
<div class="rainbows">Indigo</div>
<div class="rainbows">purple</div>
</body>
...생략...
... 경계선 ...
// JS
const boxEls = document.querySelectorAll(".rainbows");
boxEls.forEach(function (boxEls, index) {
boxEls.classList.add(`order-${index + 1}`);
console.log(index, boxEls);
});
결과)
- querySelector를 사용하여 box 클래스 요소에 text 값이 적용되기 이전의 text를 출력하고 이전의 먼저 찾은 text 값 1이 아닌 "SEONGHO!!" 라는 새로운 값을 지정해서 콘솔에 출력하세요
// HTML
...생략...
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</body>
...생략...
... 경계선 ...
// JS
const boxEl = document.querySeletor('box');
console.log(boxEl.textContent);
boxEl.textContent = "SEONGHO!!";
console.log(boxEl.textContent);결과)
- querySelector를 사용하여 // active 라는 HTML 클래스가 포함되어 있다면? '포함됨' 이라는 문구를 출력하세요
const boxEl = document.querySelector(".box");
boxEl.classList.add("active");
if (boxEl.classList.contains("active")) {
console.log("포함됨");
}결과)
안녕하세요 Junior UIUX Designer 입니다 😊