[패스트캠퍼스] 프론트엔드 강의 #14

DOM API

Document Object Model, Application Programming Interface
DOM : HTML 내의 오브젝트 모델을 일컬음 (div, span, input 등)
API : 자바스크립트에서 HTML을 제어하는 여러 명령들

 

• <script></script> 는 body 내부 맨 아래 넣거나, 위의 head에 넣고 싶다면 defer 추가

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

 

querySelector / addEventListener

document.querySelector('.CSS확장자')
찾으려하는 요소 중 가장 먼저 검색된 요소 1개를 반환한다.
요소.addEventListener('이벤트', function(){});
사용자가 시행하는 어떤 이벤트를 감지하고, 그에 따라 함수를 실행함

// HTML 요소(element) 1개 검색/찾기
/* querySelector 메소드는 찾으려하는 요소 중
가장 먼저 검색된 요소 1개를 반환한다.
해당 요소의 CSS 선택자를 명시하는 것으로 요소를 HTML에서 찾아 반환해준다. 아래는 그 반환값을 boxEl이라는 변수에 넣었음
*/
const boxEl = document.querySelector('.box');

// HTML 요소에 적용할 수 있는 메소드
// 사용자 시행하는 어떤 이벤트를 감지하고, 그에 따라 함수를 실행함
boxEl.addEventListener();
// 2개의 인수(arguments) 추가 가능
boxEl.addEventListener(Event,function(){});
// Event 이벤트
boxEl.addEventListener('click',function);
// Handler 핸들러 실행할 함수 (익명의 함수를 넣을 수 있다)
boxEl.addEventListener('click', function(){
  console.log('Click!');
});

예시

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  box-sizing: border-box;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  cursor: pointer;
}

JS

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

console.log(boxEl);

boxEl.addEventListener('click', function(){
  alert("Click!");
});

 

classList

• 요소.classList.add('클래스'); 요소에 클래스를 추가
• 요소.classList.remove('클래스');  요소에서 클래스를 제거
• 요소.classList.contains('클래스');  요소가 클래스를 포함하는지 확인 후 true/false 값을 반환

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

// 요소의 클래스 정보 객체 활용
// boxEl에서 active라는 클래스를 추가함
boxEl.classList.add('active');
// boxEl이 active라는 클래스를 포함하는지 확인하고..
// true/false 값을 반환함
let isContains = boxEl.classList.contains('active');
// console에는 true가 출력됨
console.log(isContains);

// boxEl에서 active라는 클래스를 제거함
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
// console에는 false가 출력됨
console.log(isContains);

예시

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

console.log(boxEl);

boxEl.addEventListener('click', function(){
  console.log("Click!");
  boxEl.classList.add('active');
  console.log(
    boxEl.classList.contains('active')
  );
  boxEl.classList.remove('active');
  console.log( 
    boxEl.classList.contains('active')
  );
});

 

forEach

document.querySelectorAll('.CSS 선택자')
찾으려하는 요소의 모든 값(유사배열)을 검색해 반환한다.
요소.forEach(function(매개변수1, 매개변수2){});
찾은 요소들을 반복해서 함수실행

// HTMl 요소(element) 모두 검색
// 그 검색된 모든 값을 넣은 boxEls는 유사배열
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

// 찾은 여러개의 요소들을 반복해서 함수 실행
// 익명함수를 인수로 추가함
// 매개변수1 : 반복중인 요소
// 매개변수2 : 반복중인 번호
boxEls.forEach(function(매개변수1, 매개변수2){});

boxEls.forEach(function(boxEl, index){
  boxEl.classList.add(`order-${index+1}`);
  console.log(index, bowEl);
});

예시

const boxEls = document.querySelectorAll('.box');

boxEls.forEach(function(boxEl, index){
  boxEl.classList.add(`order-${index+1}`);
  console.log(index, boxEl);
});

 

textContent

요소.textContent
요소 안에 들어있는 내용(그중 텍스트)을 반환함.

HTML

  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>

JS

// 검색해서 첫번째로 찾아낸 값 하나만 반환
const boxEl = document.querySelector('.box');

// Getter 값을 얻는 용도
// 요소 안에 들어있는 내용(그중 텍스트)을 반환함
console.log(boxEl.textContent); // 1 출력

// Setter 값을 지정하는 용도
boxEl.textContent = "Unsung";
console.log(boxEl.textContent); // Usnug 출력

 

메소드 체이닝 Method chaining

const a = "Hello~";

// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse : 배열 뒤집기
// join : 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split("").reverse().join(""); // 메소드 체이닝

console.log(a); // Hello~
console.log(b); // ~olleH

 

 

 

[내일배움카드취업], [국비지원교육]