(DOM) querySelector로 좀 더 복잡한 요소를 선택해 보자.

CSS 셀렉터(=선택자)에서 '기본 속성 선택자' 를 활용하여 좀 더 복잡한 요소를 선택해 보자.

 

HTML에서 클래스명이 tweet 이라는 요소를 조회하는 DOM메소드는

querySelector('.tweet') 이다.

 

그렇다면 아래의 DOM메소드는 어느 요소를 조회하는 메소드일까?

let oneEle = document.querySelector("div.user-paner.main  input[name=login]");

위의 예제는 MDN querySelector에 나온 것이다.

 

예제의 결과는

클래스가 "user-panel main"인 <div> 안에 이름이 "login"인 <input> 중

첫번째 요소를 조회하는 것이다.

 

input[name=login]은 CSS 선택자의 기본 속성 선택자이며,

div.user-paner.main 은 자손(=후손) 선택자이다.