JS 맛보기 (DOM API)

 

DOM API

 

Document Object Model, Application Programming Interface

- JavaScript에서 HTML을 제어하는 여러가지 명령들

 

// HTML 요소(Element) 1개 검색/찾기
const 변수명 = document.querySelector(CSS선택자);

// HTML 요소에 적용할 수 있는 메소드
변수명.addEventListener();

// 인수(Arguments)를 추가 가능
변수명.addEventListener(1, 2);

// 1 - 이벤트(Event, 상황)
변수명.addEventListener('click', 2);

// 2 - 핸들러(Handler, 실행할 함수)
변수명.addEventListener('click', function () {
    내용;
});


// 예시 - boxEl 요소에 (클릭)이벤트가 발생하면 함수가 실행된다
boxEl.addEventListener('click', function () {
    console.log('click!!!');
});

 

// HTML 요소(Element) 검색/찾기
const 변수명 = document.querySelector(CSS선택자);

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

// 클래스명 추가하기
변수명.classList.add(클래스명); 

// 해당 클래스명이 존재하면 true 반환, 존재하지 않으면 false 반환
let 변수명2 = 변수명.classList.contains(클래스명);
console.log(변수명2); // 출력 결과: true

// 클래스명 제거하기
변수명.classList.remove('active');

변수명2 = 변수명.clssList.contains('active');
console.log(변수명2); // 출력 결과: false


// 예시 
// animal 클래스 명을 가진 html요소를 animalEl 변수에 담는다
let animalEl = document.querySelector('.animal'); 

// animalEl을 클릭하면 함수가 동작한다
animalEl.addEventListener('click', function () {
  animalEl.classList.add('dog');       // 클래스명이 animal dog로 추가된다
  animalEl.classList.contains('dog');  // dog class가 존재하는지 확인
  animalEl.classList.remove('dog');    // 클래스명에 dog를 제거한다
  animalEl.classList.contains('dog');  // dog class가 존재하는지 확인
});

 

// HTML 요소(Element) 모두 검색/찾기
const 변수명 = document.querySelectorAll(CSS선택자);

// 찾은 요소들 반복해서 함수 실행 (반복문 - forEach)
// 익명 함수를 인수로 추가
변수명.forEach(function () {});

// 첫번째 매개변수: 반복 중인 요소
// 두번째 매개변수: 반복 중인 번호
변수명.forEach(function (a, b) {});

 

const 변수명 = document.querySelector(CSS선택자);

// Getter, 값을 얻는 용도
console.log(변수명.textContent);

// Setter, 값을 지정하는 용도
변수명.textContent = 'IT Blue';

console.log(변수명.textContent); // 출력 결과: IT Blue