connecting dots

JS | DOM API, Method Chaining 강의 정리 본문

Online Class/DevCamp

JS | DOM API, Method Chaining 강의 정리

dearsuhyun 2024. 6. 12. 00:36

DOM API

Document Object Model. Application Programming Interface.

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

 

defer 속성 추가

HTML 코드를 다 읽은 상태로 다시 main.js를 실행하겠다는 의미를 가짐

defer 넣지 않으면 main.js에서 box 클래스를 가진 요소 찾아서 출력해달라는 요구가

<body> 내용을 읽지 않은 상태에서 이루어지기 때문에 null 발생하게 됨

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <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>

 

.querrySelector()

HTML에서 특정한 요소 하나를 찾아 반환한 값을 변수에 저장

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

// box 클래스를 가진 요소 중 제일 처음에 찾은 요소 하나만 반환하여
// boxEl에 할당함

 

.querrySelectorAll()

HTML에서 조건에 해당하는 요소 모두를 찾아 반환한 값을 변수에 저장

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

 

.addEventListner()

HTML 요소에 적용할 수 있는 메소드, 이미 브라우저에 정의된 내용임

인수 추가 가능

boxEl.addEventListener(1, 2);
// 인수(argument) 추가 가능

boxEl.addEventListener('click', 2);
// 1-이벤트(event, 상황)

boxEl.addEventListener('click', function () {
  console.log('click ~')
});
// 2-핸들러(handler, 실행할 함수)

// 브라우저가 click하는지 안하는지 listen하고 있다가 클릭하면
// 익명의 함수를 실제로 호출하게 됨

 

.classList.add()

.classList.remove()

.classList.contains()

const boxEl = document.querySelector('.box');
// html 요소 검색/찾기

// 요소의 클래스 정보 객체 활용
boxEl.classList.add('active');
// html 전역속성을 가진 특정한 객체를 활용
// box 클래스를 가지고 있는 요소에 active 클래스를 추가하겠다는 뜻

let isContains = boxEl.classList.contains('active');
// active라는 클래스를 가진 요소가 있는지 없는지 체크. 
// 있으면 true 없으면 false 반환되어 isContains 변수에 할당
console.log(isContains); // true

boxEl.classList.remove('active'); // active 지우기
isContains = boxEl.classList.contains.apply('active');
console.log(isContains); // false

 

.forEach(function () {})

// html 요소(element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

boxEls.forEach(function () { })
// 찾은 요소를 반복해서 함수 실행
// 익명 함수를 인수로 추가
// boxEls = 유사 배열
// forEach를 이용해 반복하여 실행


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

 

 

boxEls.forEach(function (boxEl, index) {
  boxEl.classList.add(`order-${index + 1}`); 
  // `사용하는 문자데이터 추가`
  // 보관을 이용해서 index에 1 추가해서 클래스로 추가를 하겠다
  // html과 css에서는 제로베이스드 넘버링 하지 않아서 + 1
  console.log(index, boxEl)
});

 

.textContent

요소(element)가 가지고 있는 내용을 텍스트로 확인할 수 있음

1) Getter, 값을 얻는 용도

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

console.log(boxEl.textContent);
// Getter, 값을 얻는 용도
// content 중에서도 text로만 이루어진 내용만 반환이 되어 console에 출력

 

2) Setter, 값을 지정하는 용도

boxEl.textContent = 'heropy ?!';
console.log(boxEl.textContent); // heropy ?!

// Setter, 값을 지정하는 용도
// html 구조에서도 숫자 1이 아니라 heropy ?! 출력

 

 

Method Chaining

method들을 chain처럼 붙여서 작성할 수 있음

const a = 'hello ~';

const b = a.split('').reverse().join(''); // 메소드 체이닝

// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열을 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환 | split 뒤에는 못 붙임

console.log(a); hello ~
console.log(b); ~ olleh
반응형

'Online Class > DevCamp' 카테고리의 다른 글

JS 데이터 | 문자 (String. ~), 숫자 (Math. ~), 배열(Array. ~)  (0) 2024.06.13
JS 클래스 | 생성자 함수(prototype), this, ES6 classes, 상속(확장)  (0) 2024.06.12
Git | 마크다운(Markdown)  (0) 2024.06.12
Git | 명령 정리  (0) 2024.06.12
JS 함수 | 함수 형태, return, arguments, 화살표 함수, 즉시실행(IIFE), 호이스팅, 타이머 함수, 콜백(Callback)  (0) 2024.06.12
'Online Class/DevCamp' Related Articles more