JavaScript: JS 기초 Ep.3 (DOM API)

04 Aug 2022 • TIL

DOM API

Document Object Model, Application Programming Interface의 약자이다.
Document ⇒ HTML에 들어있는 Object model을 말한다. (div, span, input 요소 등)
API ⇒ 웹 사이트가 동작하기 위해서 입력하는 프로그래밍 명령이다.
DOM API ⇒ 자바스크립트에서 HTML을 제어하는 명령들이다.

  • 간단 defer 예시 
    let boxEl = document.querySelector('.box');
  
console.log(boxEl);

    <!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 src="./main.js"></script>
</head>
<body>
  <div class="box">Box!!</div>
</body>
</html>
  
<!-- 출력 null -->

    • 위에서 아래로 해석하기 때문에 script 부분에서 .box를 요구한다. 그러나 .box는 script이후에 나온다. 그렇기에 출력한 값이 null이 나오게 된다.

      해결 방법 1

      <!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>
      
<!-- 출력 Box!! -->
      • script의 위치를 바꿔준다. script 보다 .box가 상위에 존재하기에 main.js에서 .box를 찾을 수 있어서 출력되는 값이 Box!!로 나온다.
      • 하지만 main.js를 연결해달라는 것은 “정보”이기에 head 태그 안에 작성하는 것이 좋다.

      해결 방법 2

      <!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>
      
<!-- 출력 Box!! -->
      • defer을 사용하여 HTML 코드를 다 읽은 상태에서 다시 main.js 내용을 실행하겠다는 것이다.
      • 이렇게 하면 script 부분을 head 태그 안에 두면서 원하는 값으로 출력이 가능하다.
  • DOM API - addEventListner 
    // HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');
// documet라는 브라우저에서 제공하는 어떤 객체 데이터가 이미 정의되어 있음.
// querySelector이라는 메소드에 찾으려는 CSS 선택자를 찾아서 반환
// 반환한 값은 boxEl이라는 변수에 넣음 
// 이때 boxEl은 박스인데 요소임. 그래서 이 변수는 하나의 요소라는 것을 명시적으로 나타냄
  
// HTML 요소에 적용할 수 있는 메소드
boxEl.addEventListener();
  
// 인수(Arguments) 추가 가능
boxEl.addEventListener(1, 2);
  
// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
// 사용자가 boxEl라는 것을 클릭했을 때 => 이벤트
  
// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function() {
  console.log('Click~!');
}); // 최종 사용하는 모습임
// 사용자가 boxEl를 클릭하면 이 익명의 함수를 실행하겠다는 것을 의미
// 이때 지정하는 익명의 함수를 Handler 핸들러라고 부름
    • 어떠한 요소에 특정한 상황 (이벤트)이 발생하는 지를 듣고 있다가 그 상황이 실제로 발생하게 되면, 함수를 실행한다. 이때, 실행하는 함수를 Handler라고 부른다.
  • DOM API - classList 
    // HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');
  
// 요소의 클래스 정보 객체 활용!
  
// classList = class 정보를 가지고 있는 객체 데이터
// boxEl라는 클래스를 가지고 있는 요소에 active라는 클래스를 추가를 하겠다는 명령
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); //true
// classList라는 객체 내부에서 active라는 클래스가 포함(contains)되어 있는지 체크해주는 API
// 있다면 True가 반환되어 반환된 값이 isContains라는 변수에 할당됨
  
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); //false
// remove를 통해 active라는 클래스를 삭제했기에 포함되어 있지 않다고 나옴 -> false가 나옴
  • DOM API - forEach 
    // HTML 요소(Element) 모두 검색/찾기
//quertSelectorAll, All이 붙었기에 뒤에 명시하는 모든 요소를 반환
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
  
/// 여기서 부터 출력 전까지는 과정들임 (설명)
  
// 여러 개의 찾은 요소들 반복(forEach)해서 함수 실행!
// 익명 함수(function () {})를 인수로 추가!
boxEls.forEach(function () {});
//boxEls는 복수형태로, 배열 데이터로 만들어짐.
//생긴 것은 배열처럼 생겼지만 정확하게는 유사 배열(Array-like)이라고 함
  
//익명 함수의 매개변수
// 첫 번째 매개변수(boxEls): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});
  
// 출력!
boxEls.forEach(function (boxEl, index) {
  boxEl.classList.add(`order-${index + 1}`);
  console.log(index, boxEl);
});
  • DOM API - textContent 
    const boxEl = document.querySelector('.box');
// All이 붙지 않은 그냥 셀렉터이기에 제일 먼저 찾은 ()안 요소만을 넣음
  
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!
  
// Setter, 값을 지정하는 용도
boxEl.textContent = 'HEROPY?!';
console.log(boxEl.textContent); // HEROPY?!
 TIL  JS

Comments

Related Posts