⭐Javascript ( document.querySelector/All() 메소드 )

📕문서 객체 가져오기

document. 태그를 이용하면 HTML 내부의 특정 태그에 접근할 수 있다

document.head
document.body

head나 body를 직접적으로 조작할 일은 없고 body 태그 내부에 있는

h1같은 다른 태그들을 조작한다

그러려면 일단 태그를 읽어 들여야 한다

document.querySelector(' ')

메소드의 매개 변수에 선택하고자 하는 태그, 요소를 선택할 수 있는 선택자를 입력한다

선택자와 관련된 내용은 CSS에서 자세하게 다룬다

여기서는 간단하게 5가지 선택자만 설명하겠다

---

📗선택자

태그 선택자

태그의 이름을 활용해서 태그를 선택하는 선택자

const h1 = document.querySelector('h1') //이후 변수처럼 사용 가능
h1.style.color = 'red'

아이디 선택자

특정한 태그의 아이디 속성을 사용해서 태그를 선택하는 선택자

아이디 속성을 사용해야 함으로 태그에 아이디 속성이 지정되어 있어야 한다

const h1 = document.querySelector('#아이디') //#뒤에 아이디를 쓴다

클래스 선택자

태그의 클래스 속성을 기준으로 태그를 선택하는 선택자

클래스 속성을 사용해야 함으로 태그에 클래스 속성이 지정되어 있어야 한다

const h1 = document.querySelector('.클래스') //.뒤에 클래스를 쓴다
const h1 = document.querySelector('.클래스1.클래스2')
//2개 이상의 클래스를 동시 지정하려면 위처럼 하고, 클래스 사이에 간격을 띄우면 안된다

속성 선택자

특정한 속성을 가지고 있는지 확인하는 선택자

일반적으로 input 태그와 많이 사용한다

body 태그안에 <input type = "text">가 있다고 가정한다
const h1 = document.querySelector('[type=text]')

후손 선택자

태그 아래에 있는 태그를 선택할 때 사용한다

const h1 = document.querySelector('body input')
//body 태그 아래 첫 input 태그를 선택한다

📘태그 여러개 선택하기

document.querySelector('')는 조건에 맞는 태그가 많다면 첫번째 태그가 선택된다

여러개의 태그를 선택하고싶다면 document.querySelectorAll('')를 사용한다

for(const i of document.querySelectorAll('input')){
    i.style.borderRadius='10px'
}