class와 attribute, 유사배열을 배열로 변환하기

JAVASCRIPT	Description
대상.className ='class1';	클래스명 입력(교체)
대상.classList.add('class1');	클래스명 추가 (기존 클래스명 유지)
대상.classList.add('class1', 'class2');	클래스명 추가(다중)
대상.classList.remove('class1');	클래스명 제거
대상classList.remove('class1', 'class2');	클래스명 제거(다중)
대상.classList.toggle("class1");	클래스명 추가/제거 동시에
대상.classList.contains('class1');	클래스명을 포함하는지 여부 (조건문에 활용)
대상.classList.contains('class1', 'class2');	클래스명을 포함하는지 여부

 

JAVASCRIPT	Description
대상.getAttribute('id');	id라는 속성의 값 가져오기(반환하기)
대상.setAttribute('id', 'new value');	id라는 속성의 값을 new value로 교체하기
대상.hasAttribute('id')	id라는 속성의 값이 있는지 없는지 여부 (true, false) 조건문

 

유사배열을 배열로 변환하기

유사배열을 배열로 변환하는 이유는 forEach와같은 배열에서만 사용하는 메서드를 쓰기 위해서.

 

Array.from()를 사용하는 방법

Array.from(document.querySelectorAll('#list > .item'))

 

Array.slice()를 사용하는 방법

Array.slice(document.querySelectorAll('#list > .item'))

 

스프레드 연산자를 사용하는 방법

[...document.querySelectorAll('#list > .item')]

 

요소의 내용 확인 및 수정

/*             요소의 내용을 확인(반환)                 글씨 let a = b.innerText;                 tag let ab = b.innerHTML;             요소의 내용을 변경(지정)                 글씨로 b.innerText = '새값';                 tag로 b.innerHTML = '새값';         */ console.log(document.querySelector('h1').innerText); //Number Animation console.log(document.querySelector('h1').innerHTML); //<a href="">Number Animation</a> //document.querySelector('h2').innerText = '<a>title</a>'; document.querySelector('h2').innerHTML = '<a href="">title</a>';