Java Script #DOM API

달다로·2024년 6월 2일

JS

목록 보기

6/26

📌Java Script #DOM API

DOM API

자바스크립트에서 HTML을 제어하는 여러가지 명령들

DOM : Document Object Model
- document : HTML
- object : div, span, input ...
API : Apllication Programming Interface
- 애플리케이션을 동작하기 위해서 입력하는 프로그래밍 명령

EXAMPLES

js

// boxEL = 박스 요소
// HTML 의 'box' 요소를 찾아서, boxEL 의 변수에 할당을 한다.

let boxEL = document.querySelector('.box');

console.log(boxEL);

🔥 EXAMPLE 1

html

<head>
  	<script scr="./main.js"></script>
</head>
<body>
	<div class="box">BOX!!</div>
</body>

결과

콘솔창 Null

🔥 EXAMPLE 2

<head>
  	<script defer scr="./main.js"></script>
</head>
<body>
	<div class="box">BOX!!</div>
</body>

결과

콘솔창

<div class="box">BOX!!</div>

🔥 EXAMPLE 3

<body>
	<div class="box">BOX!!</div>
  	<script scr="./main.js"></script>
</body>

결과

콘솔창

<div class="box">BOX!!</div>

✏️ 결과값의 이유

브라우저는 코드를 맨 위부터 아래방향으로 순서대로 읽는다.
브라우저가 Script Tag 를 읽었을 때의 순서가 중요하다.

예를 들면, 예시 1번의 경우는 head 부분에 스크립트가 존재하기 때문에 밑의 body 부분에 있는 div 부분을 읽지 않아 콘솔을 진행했을 때 null 값으로 나온다. (내가 js 파일에서 다큐멘트(타이틀)의 '박스(div요소)'라는 클래스 요소를 찾아서 개발자 도구에 출력해달라고 요구를 했기 때문)

그래서 div 요소의 밑에 스크립트를 넣거나, head 부분의 스크립트에 defer 를 넣으면 된다.

1) querySelector

HTML 요소 (Element) 1개 검색 / 찾기

변수 선언 후, document객체 안의 querySelector(매소드)를 사용해서 인수(선택자)를 찾아서 변수로 반환시킴
querySelctor는 선택된 요소 1개만 찾아서 반환시킴

const boxEL = document.querySelector('.box');

2) addEventListener

HTML 요소에 적용할 수 있는 메소드

boxEL.addEventListener();

인수 (Arguments) 를 추가 가능함
- boxEL.addEventListener(1, 2);
1 (첫번째 인수) 에는 이벤트 (Event, 상황) 를 넣을 수 있다.
- boxEL.addEventListener('click', 2); = 사용자가 boxEL을 클릭했을때의 상황
2 (두번째 인수) 에는 핸들러 (Handler, 실행할 함수) 를 넣을 수 있다.

boxEL.addEventListener('Click', function () {
	console.log('Click~!');
};
// 사용자가 클릭을 하면, function에 있는 이벤트를 실행해줌

🔥 결과
클릭하면 Click~! 이 뜸

3) classList

HTML 에 있는 class 요소의 정보 (객체) 활용

add
remove

const boxEL = document.querySelector('.box'); // HTML에서 요소 찾음

boxEL.classList.add('active'); // 요소의 클래스 정보를 활용함, boxEL에 active를 추가시킴
let isContains = boxEl.clssList.contains('active'); // class에 active라는 것이 contains(포함) 되어있는지 체크함
console.log(isContains); // active가 포함되어있기때문에 true

boxEl.classList.remove('active'); // remove : active클래스 지움
isContains = boxEl.classList.contains('active');
consolde.log(isContains); // 삭제시켰기때문에 false

⚡실습해보기 (querySelector, addEventListener, classList)

HTML

<head>
  	<script defer scr="./main.js"></script>
</head>
<body>
	<div class="box">BOX!!</div>
</body>

JS

let boxEl = document.querySelector('.box'); // 요소 찾음

console.log(boxEl); // 확인

boxEl.addEventListener('click', function () { //이벤트 추가
	console.log('Click!!'); //Click!! 출력
  	boxEl.classList.add('active'); // class에 active 추가
  	console.log(boxEl.classList.contains('active')); // 확인, box active 라고 나옴
  	boxEl.classList.remove('active'); // active 지움
  	console.log(boxEl.classList.contains('active')); // box만 남아있음
});

4) querySelectorAll, forEach

boxEls.forEach(function () {});

찾은 요소를 반복해서 함수를 실행시킴
익명 함수를 인수로 추가함

boxEls.forEach(function (boxEl, index) {});
- 첫번째 매개변수(boxEl) : 반복 중인 요소, 내가 이름 지을 수 있음
- 두번째 매개변수(index) : 반복 중인 번호, 내가 이름 지을 수 있음 (하지만 통상적으로 index 사용)

JS

const boxEls = document.querySelectorAll('.box'); // querySelectorAll = 요소를 모두 찾음
console.log(boxEls); // 확인

boxEls.forEach(function (boxEl, index) { // 출력
boxEl.classList.add(`order-${index + 1}`); // ${} 쓰려면 ` `을 사용해야함 (' ' 아님)
console.log(index, boxEl); 
});

5) textContent

text로만 이루어진 콘텐트를 반환시킴

Getter : 값을 얻는 용도
Setter : 값을 지정하는 용도

JS

const boxEl = document.querySelector('.box');

console.log(boxEl.textContent); // getter, BOX!! (HTML에 지정되어있는 텍스트)

boxEl.textContent = 'daldaro?!'; // setter, daldaro 라는 textcontent 를 내가 지정함
console.log(boxEl.textConent); // daldaro?!, 지정한 값이 나옴