Javascript #5

DOM API
Document Object Model, Application Programming Interface

DOM : HTML문서의 각종 요소들(Span, Div, Input. etc)

API : 기능의 실행을 위한 명령들

HTML 요소(Element) 1개 찾기/검색(해당 영역에서 제일 먼저 찾아지는 요소 1개)

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

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

boxEl.addEventListener();

가능한 기능들...
//인수(Arguments)를 추가 가능
boxEl.addEventListener(1, 2);

***
//1 = 이벤트(Event: 상황)
boxEl.addEventListener('click', 2); // 사용자가 클릭했을때 2를 반환

//2 = 핸들러(Handler: 실행할 함수)
boxEl.addEventListener('click',function(){
  console.log('Click~!');
}); // 사용자가 클릭했을때 뒤의 함수를 실행

HTML 요소(Element) 검색.찾기(classList.add or remove(),contains())

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

//요소의 클래스 정보 객체 활용!
boxEl.classList.add('acctive'); // add 메소드를 통해 'active'를 boxEl의 클래스 정보에 추가할 수 있다.
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true 반환 //BoxEl의 클래스 정보 안에 'active'가 있는지 여부를 체크하고 true or false로 그 값을 반환한다.

boxEl.classList.remove('active'); // remove 메소드를 통해 'active'를 같은 위치에서 제거
isContains = boxEl.classList.contains('active');
console.log(isContains); // false 반환

HTML 요소 모두 검색/찾기

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

찾은 요소들 반복해서 함수 실행!(forEach)
익명 함수를 인수로 추가!

boxEls.forEach(function(){});

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

//출력!

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

textContent

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

1.Getter, 값을 얻는 용도

console.log(boxEl.textContent); // Box!!

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

boxEl.textContent = 'John';
console.log(boxEl.textContent); // John