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 은 자손(=후손) 선택자이다.