코딩 일기
어려웠던 부분들을 다시 한번 공부하고 배웠던걸 복습하는 시간을 가지고 정리해 봤습니다.
innerText
DOM 요소의 텍스트 내용을 반환하거나, 텍스트 내용을 설정하는 데 사용됩니다. HTML 태그를 제거하고 텍스트만 반환합니다.
classList
DOM 요소의 클래스 이름을 관리하기 위한 속성입니다. add, remove, toggle, contains 등의 메소드를 제공하여 클래스를 추가, 제거, 전환 및 검색할 수 있습니다.
addEventListener
이벤트를 처리하기 위한 메소드로, 지정된 이벤트에 대한 콜백 함수를 등록합니다. 이벤트 유형과 콜백 함수를 지정할 수 있으며, 이벤트가 발생하면 콜백 함수가 실행됩니다.
textContent
DOM 요소의 텍스트 내용을 반환하거나, 텍스트 내용을 설정하는 데 사용됩니다. HTML 태그를 그대로 포함하여 반환합니다.
querySelectorAll
CSS 선택자를 사용하여 DOM 요소를 선택하고, 해당 요소들을 NodeList 형태로 반환합니다. NodeList는 배열과 유사하지만, 배열의 메소드를 사용할 수 없습니다.
push
배열의 끝에 하나 이상의 요소를 추가합니다.
join
배열의 모든 요소를 하나의 문자열로 결합합니다. 구분자를 지정할 수 있습니다.
for() -> forEach()
일반적으로 for문은 배열의 인덱스를 사용하여 배열의 요소에 접근하고, 요소에 대한 반복 작업을 수행합니다. 반면에 forEach 메소드는 배열 요소에 대한 작업을 쉽게 수행할 수 있는 메소드입니다. 따라서, for문을 forEach문으로 바꾸는 방법은 다음과 같습니다.
// for문
for (let i = 0; i < array.length; i++) {
const element = array[i];
// 반복 작업 수행
}
// forEach문
array.forEach(function(element) {
// 반복 작업 수행
});
// 화살표 함수를 사용한 forEach문
array.forEach(element => {
// 반복 작업 수행
});위 코드에서 array는 배열 객체를 나타내며, element는 각 요소를 나타냅니다. forEach 메소드는 배열의 각 요소에 대해 콜백 함수를 호출하며, 콜백 함수는 인자로 각 요소와 해당 요소의 인덱스, 그리고 배열 자체를 받습니다.
따라서, 요소에 직접 접근하여 작업을 수행할 수 있으며, 인덱스나 배열 객체를 사용하지 않아도 됩니다.