javascript CSS 선택자 기초 - querySelector(), querySelectorAll()

CSS 선택자는 2가지가 있습니다.

document.querySelector() 메서드는 처음 나오는 엘리먼트 노드 1개를 반환합니다. 반환할 노드가 없으면 null 을 반환합니다.

반환값이 있는지 체크할 때는 null 여부를 체크합니다.

document.querySelectorAll() 메서드는 해당되는 모든 엘리먼트 노드를 반환합니다. 반환한 노드가 없으면 길이가 0인 노드리스트를 반환합니다.

반환된 노드가 있는지 확인하려면 length 메서드가 0보다 큰지 확인합니다.

노드리스트는 배열 인덱스로 배열을 접근하는 방식으로 노드 순환을 할 수 있습니다.

단, 배열은 아니기 때문에 다른 배열 메서드를 사용할 수는 없습니다.

CSS 쿼리 선택자는 CSS 로 대상 엘리먼트를 선택하는 방법을 그대로 사용합니다.

ID로 선택

"#ID" 형태로 앞에 #을 붙여서 ID 인자를 넣어야 합니다. #이 없으면 아이디로 처리되지 않습니다.

document.querySelector('#friends');// ID 가 "friends" 인 div 태그 1뎁스 하위의 ul 태그 1뎁스 하위의 li 엘리먼트 노드를 모두 반환document.querySelectorAll('div#friends > ul > li');

ID는 웹페이지에서 유일합니다. 

ID만으로 엘리먼트 노드를 찾을 경우, querySelectorAll() 을 사용하는 것은 의미가 없습니다.

클래스(Class)로 선택

클래스를 조합해서 다양한 검색 조건을 설정할 수 있습니다.

document.querySelector('.classname');document.querySelector('.item li');document.querySelectorAll('div.product > ul.bold');document.querySelectorAll('ul p span');document.querySelectorAll('div.class, ul');

속성 선택자(Attribute Selector)로 선택

속성 선택자를 사용하면 HTML 속성, 또는 속성값을 비교해 엘리먼트 선택 범위를 제한할 수 있습니다.

속성 선택자에는 표준 속성(어트리뷰트)과 데이터셋(Dataset) 속성을 모두 사용할 수 있습니다.

데이터셋에 대한 자세한 설명은 데이터셋의 이해 강의를 보시기 바랍니다.

document.querySelectorAll('div[class~="wide"]');document.querySelectorAll('a[href="https://example.com"]');document.querySelectorAll('ul[data-size="3"]');

선택한 노드들의 순환

querySelectorAll() 로 여러개의 노드를 선택한 경우 아래와 같이 노드를 순환하면서 개별 노드에 대한 처리를 할 수 있습니다.

querySelector(), querySelectorAll() 로 선택하는 것은 모두 엘리먼트 노드입니다.

별도로 엘리먼트 노드로 구분하지 않아도 선택한 노드는 모두 엘리먼트 노드라고 생각하면 됩니다.

let nodes = document.querySelectorAll('ul li');
if(nodes.length > 0){    nodes.forEach(node=>{        if(node.textContent == ''){            node.remove();        }    })}