[JavaScript] DOM 조작 연습 1

💫 달력 기념일 출력하기

네이버에 달력을 검색했을 때 나오는 달력의 기념일을 년, 월, 일과 함께 출력하기

💫 출력결과

2024년 3월 1일
삼일절
2024년 3월 3일
납세자의 날
2024년 3월 5일
경칩
2024년 3월 8일
국제 여성의 날
2024년 3월 8일
3·8 민주의거
2024년 3월 14일
화이트데이
2024년 3월 15일
315의거기념일
2024년 3월 20일
춘분
2024년 3월 20일
상공의 날
2024년 3월 22일
서해수호의 날
2024년 3월 23일
국제 강아지의 날

💫 CODE

var tdarr = document.querySelectorAll('td');

tdarr.forEach(function(arr) {
    var litf = arr.querySelector('li');

    if(litf){
        var date = arr.querySelector('.cld_day').innerText;
        var days = arr.querySelectorAll('.cld_base');

        days.forEach(function(day) {
            console.log(arr.querySelector('.cld_date').getAttribute('nyear') + '년 ' + arr.querySelector('.cld_date').getAttribute('nmonth') + '월 ' + date + '일\n' + day.innerText);
        });
    }
});

1. 해당 페이지에서 <td>부분을 querySelectorAll을 사용하여 tdarr에 저장

2. tdarr를 forEach로 돌면서 <td>내에 <li>가 있는지 확인

3. 있다면, cld_day클래스의 Text를 date 변수에 저장

4. 같은 날짜에 여러 개의 기념일이 있는 경우도 있기 때문에 querySelectorAll을 사용하여 days에 저장

5. days를 forEach로 돌면서 console.log 출력

6. 년, 월을 출력하기위해 cld_date클래스의 nyear, nmonth 속성을 getAttribute로 가져와서 출력 (일도 ndate로 가져왔어도 됐을것 같다)

💫 새롭게 알게 된 것들

1. querySelector()

괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환
일치하는 요소가 없다면 null 반환

2. querySelectorAll()

괄호 속에 제공한 선택자와 일치하는 문서 내 모든 Element를 반환

• 방법 1 (for...of 사용)

for (const liElement of liElements) {
    console.log(liElement.textContent);
}

• 방법 2 (for 사용)

for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}

• 방법 3 (forEach 사용)

liElements.forEach(li => {
    console.log(li.textContent);
});

3. innerText

element 안의 text 값을 반환

4. getAttribute()

특정 요소의 속성 값을 반환