[바닐라코딩 | Javascript] - First Day

1)FirstDay

(1)문제

First Day - Starter Kit

(2)풀이

오늘 자 요일 찾은 후 해당 요일을 시작으로 숫자 나열하였다. 특정 요일을 찾는 데 부모요소를 객체로 querySelector() 사용하였음. 숫자 나열시 데이터 type을 숫자로 하기 위해 innerHTML 속성을 사용하였음.

//오늘 자 요일 찾기
const date = new Date('2023-03-01');
let firstDay = date.getDay();
console.log(firstDay);
let tbodyEle = document.querySelector('tbody')
let thEles = tbodyEle.querySelectorAll('th')

//해당 요일을 시작으로 숫자 나열하기
for(let i = firstDay; i<7; i++){
 thEles[i].innerHTML = i-2;  
}

 

(3)결과

JS

 

(4)관련 학습

①특정 자식 요소를 선택하는 방법

부모 요소를 객체로, querySelector하면 된다.

[Javascript] 특정 자식 노드 찾기

 

②querySelectorAll() 사용할 경우 선택된 여러 태그들은 순서대로 array의 각 item이 된다. 따라서 아래와 같은 코드로 여러 태그들 중 순서에 맞는 태그를 선택할 수 있다.

const button1 = document.querySelectorAll("button")[0];
const button2 = document.querySelectorAll("button")[1];

 

③querySelector 등과 관련해 한 매개변수 안에 두 개 이상의 DOM 객체가 올 수 있음. ,(쉼표)로 구분한다.

 

예를 들어 아래와 같이 선택자를 ','로 구분하여 전달하면 여러개의 선택자 중 첫번째로 발견되는 element를 리턴함.

document.querySelector('.red, .green');

또한 이때, 파라미터를 여러개 넘기는 것이 아니라, 선택자를 ','로 구분한 문자열 1개가 파라미터로 넘어가는 것이다.

[Javascript] 선택자, DOM 특정 요소(element) 찾기