써치킴의 우당탕탕 개발 블로그

[JavaScript][Ch9] JS DOM API 본문

파도파도 나오는 JavaScript

[JavaScript][Ch9] JS DOM API

써치킴 2022. 1. 6. 08:34

DOM API

JavaScript에서 HTML을 제어하는 명령들

브라우저는 코드를 위에서 아래로 읽는다.

[예제 1]

index.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>
  <!-- 브라우저가 스크립트 파일을 읽었을 때는 밑에 body 부분은 읽기 전 상태 -->
  <script src="./main.js"></script>
</head>
<body>
  <div class="box">Box!!</div>
</body>
</html>

main.js

// .box라는 css선택자를 통해 html 첫번째 요소를 찾아서 변수 boxEl에 할당
let boxEl = document.querySelector('.box');

// main.js가 실행될 때 .box 클래스 요소가 무엇인지 모르기 때문에 null 출력
console.log(boxEl);   // null

/* 
  해결방법 1 : script 태그를 body 태그 내 가장 밑에 선언
          -> 정보는 구조인 body 태그보다 정보를 나타내는 head 태그에 선언되어 있는것을 추천하기 때문에 해당방법은 비추천
  해결방법 2 : defer 사용 
          -> html 코드를 다 읽은 상태에서 다시 스크립트 파일을 실행 
*/

해결방법

index.html -> defer 사용

<script defer src="./main.js"></script>

 

이벤트 핸들러

HTML 요소(Element) 1개 검색/찾기
let boxEl = document.querySelector('.box');
HTML 요소에 적용할 수 있는 메소드(브라우저에 다 정의되어 있는 내용)
boxEl.addEventListener();
인수(Arguments) 추가 가능
boxEl.addEventListener(1, 2);
 
1(첫번째 인수) - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);   // 사용자가 boxEl을 click했을 때
2(두번째 인수) - 핸들러(Handler, 실행할 함수) → 최종
boxEl.addEventListener('click', function () {   // 사용자가 boxEl을 click하면 익명함수 실행
  console.log('click');
})

 

요소의 클래스 정보 객체 활용

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

// 요소의 클래스 정보 객체 활용(브라우저에 다 정의되어 있는 내용)
boxEl.classList.add('active');    // boxEl 요소에 active라는 class 추가
let isContains = boxEl.classList.contains('active');    // boxEl 요소에 active라는 class가 있니?
console.log(isContains);    // true

boxEl.classList.remove('active');   // boxEl 요소에 active라는 class 지움
isContains = boxEl.classList.contains('active');    // boxEl 요소에 active라는 class가 있니?
console.log(isContains);    // false

 

요소의 반복

준비 (index.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">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</body>
</html>
HTML 요소(Element) 검색/찾기
// class가 box인 html 모든 요소를 찾아서 변수 boxEls에 할당
const boxEls = document.querySelectorAll('.box');   // boxEls는 복수 형태, 배열 형태(유사 배열)
console.log(boxEls);
찾은 요소를 반복해서 함수 실행
// 찾은 요소를 반복해서 함수 실행
// 익명 함수를 인수로 추가
boxEls.forEach(function () {});

forEach 매개변수

// 익명 함수의 첫번째 매개변수(boxEl) : 반복 중인 요소 (사용자가 이름을 정할 수 있음)
// 익명 함수의 두번째 매개변수(index) : 반복 중인 번호 (사용자가 이름을 정할 수 있음, 통상적으로 index 사용)
boxEls.forEach(function (boxEl, index) {});

출력

boxEls.forEach(function (boxEl, index) {
  // 보관법에는 `` 사용
  boxEl.classList.add(`order-${index + 1}`);    // boxEl 요소에 order-1, order-2, order-3, order-4 추가
  console.log(index, boxEl);
});

 

Getter, Setter

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

// Getter, 값을 얻는 용도
console.log(boxEl.textContent);   // boxEl 요소에 들어있는 텍스트로 이루어져있는 내용 반환

// Setter, 값을 지정하는 용도
boxEl.textContent = 'SEARCHKIM';
console.log(boxEl.textContent);   // boxEl 요소에 들어있는 텍스트로 이루어져있는 내용 반환

'파도파도 나오는 JavaScript' 카테고리의 다른 글

[JS Essentials][Ch2][시작하기] 개요(ECMAScript) 및 프로젝트 초기화  (0) 2022.01.27
[JavaScript][Ch9] JS 메소드 체이닝  (0) 2022.01.06
[JavaScript][Ch9] JS 조건문  (0) 2022.01.06
[JavaScript][Ch9] JS 함수  (0) 2022.01.06
[JavaScript][Ch9] JS 변수, 예약어  (0) 2022.01.05
'파도파도 나오는 JavaScript' Related Articles more
Comments