[CSS] querySelector의 특수문자 이스케이프와 CSS.escape() 메서드 - CSS querySelector Special Character Escape
<div id="a[a]" class="b[b]"></div>
console.log(document.getElementById('a[a]'));
console.log(document.getElementsByClassName('b[b]'));
같은 요소를 querySelector()로 선택해 보겠습니다.
정확하게 null 이 반환됩니다. 그러니까 요소를 선택할 수 없는 것입니다.
console.log(document.querySelector('#a[a]'));
console.log(document.querySelector('.a[a]'));
간단하게 이유를 설명하면, querySelector(), querySelectorAll() 메서드는 특수문자를 이스케이프 하지 않으면 정상적으로 CSS 쿼리 선택을 하지 못합니다.
앞서 요소의 ID와 클래스에는 대괄호([])가 포함되어 있고, 이 대괄호는 요소의 속성을 접근하는 특수 용도로 사용하는 문자입니다. 이 특수 문자를 일반 문자열로 변환 처리를 해야 "a[a]", 또는 "b[b]" 문자열로 된 ID, 또는 클래스명을 올바르게 인식할 수 있습니다.
전혀 다른 접근 방법이지만 다음처럼 <div> 요소의 ID가 "a"이고, 속성 이름 "a"가 정의되어 있다면 querySelector('#a[a]')는 해당 요소를 선택하게 됩니다. 중요합니다.
<div id="a" a="" class="b[b]"></div>
console.log(document.querySelector('#a\[a\]'));
널(null)이 나옵니다. 이스케이프 방법이 잘못된 것입니다. 백슬래시 자체도 특수 문자로 처리하기 때문에 백슬래시 자체를 한번 더 이스케이프 해야 합니다. 드디어 요소가 선택됩니다.
console.log(document.querySelector('#a\\[a\\]'));
이스케이프는 잘 되지만 쿼리 선택이 복잡해지고, 특수 용도 문자가 여러 개면 이스케이프 하기가 조금 귀찮아집니다.
그리고 자바스크립트에는 CSS 에스케이프를 위한 내장 메서드를 지원합니다.
CSS 객체의 escape() 메서드를 사용하면 특수 문자를 이스케이프 한 쿼리 선택을 반환받을 수 있습니다.
앞서의 쿼리 선택자는 이스케이프 할 쿼리 선택을 escape() 메서드 인자로 넘겨서 다음과 같이 재작성할 수 있습니다.
console.log(document.querySelector("#"+CSS.escape("a[a]")));
console.log(document.querySelector(`#${CSS.escape("a[a]")}`));