[JavaScript] Document.querySelector()

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

Document.querySelector() - Web API | MDN

 

Document.querySelector()

• 선택자 첫번째 요소(element) 반환, 일치하는 요소가 없으면 null 반환
• 깊이 우선(depth-first) 전위 순회(pre-order) -> 첫번째 요소부터 시작해 자식 노드의 수를 기준으로 순회

document.querySelector(selectors);

• 하나 이상의 선택자를 포함한 DOMString. 유효한 CSS 선택자여야만 하며 아닐 경우 SYNTAX_ERR 발생.

 

예제

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
    console.log("#foo\bar"); //"#footer"
    
    document.querySelector("#foo\bar"); //일치하는 요소 없음
    
    console.log("#foo\\bar"); //"#foo\bar"
    console.log("#foo\\\\bar"); //"#foo\\bar"
    document.querySelector("#foo\\bar"); //첫번째 <div>
    
    document.querySelector("#foo:bar"); //일치하는 요소 없음
    document.querySelector("#foo\\"bar"); //두 번째 <div>
</script>