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 은 자손(=후손) 선택자이다.
'JS' 카테고리의 다른 글
(JavaScript) 번들링과 빌드 시스템 (0) | 2022.03.15 |
---|---|
(DOM) querySelector의 부모는 꼭 document 객체여야만 하는가? (0) | 2022.02.21 |
(JS) DOM과 Jquery로 짠 코드 간단한 차이 (0) | 2022.02.21 |
(Javascript) 정규 표현식 메소드 (0) | 2022.01.06 |
(Javascript) 크롬 개발자 도구 Local Storage 활용 (0) | 2021.10.26 |