숫자 인 ID로 querySelector 사용

내가 이해하는 HTML5 사양을 통해 이와 같은 숫자 인 ID를 사용할 수 있습니다.

<div id="1"></div>
<div id="2"></div>

을 사용하여 이러한 벌금에 액세스 할 수 getElementById있지만 querySelector. 다음을 시도 하면 콘솔에 SyntaxError : DOM Exception 12 가 표시됩니다.

document.querySelector("#1")

querySelectorHTML5 사양에서 이것이 유효하다고 말할 때 숫자를 ID로 사용하는 것이 작동하지 않는 이유가 궁금 합니다. 여러 브라우저를 사용해 보았습니다.

유효하지만 특별한 처리가 필요합니다. 여기에서 : http://mathiasbynens.be/notes/css-escapes

선행 숫자

식별자의 첫 문자가 숫자 인 경우 유니 코드 코드 포인트를 기반으로 이스케이프해야합니다. 예를 들어 문자 1의 코드 포인트는 U + 0031이므로 \ 000031 또는 \ 31로 이스케이프합니다.

기본적으로 숫자 문자를 이스케이프하려면 \ 3 접두사를 붙이고 공백 문자 ()를 추가하면됩니다. 예이 유니 코드!

따라서 코드는 (CSS 먼저, JS 두 번째) 다음과 같이 끝납니다.

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');

HTML5 사양에서는 유효하지만 CSS에서는 유효하지 않으므로 '쿼리 선택기 '가 의미합니다.

대신 다음과 같이해야합니다. document.querySelector("[id='1']"), 의미있는 ID를 줄 수 있다는 점을 고려하면 매우 오래 걸립니다 message1.

자동화 된 접근 방식이 필요했습니다. 최근 변경은 사용 된 ID 값이 더 이상 단순한 알파벳 문자가 아니고 숫자와 특수 문자가 포함되었음을 의미합니다.

나는 사용하여 끝났다 CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

console.log(CSS.escape('1'));

첫째, 이것이 실패한 경우입니다.

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";

<div id="1">Before</div>

그리고 지금 사용 CSS.escape:

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";

<div id="1">Before</div>

표시가 올바르게 변경되어 After선택기가 작동하는 것을 보여줍니다!

W3C 문서 속성 선택기 구문에서

속성 값은 유효한 CSS 식별자 또는 문자열이어야합니다.

따라서 선행 숫자가있는 숫자 또는 영숫자 문자열은 유효한 식별자로 인정되지 않습니다.

ID 생성기 유틸리티를 사용하여 식별자를 생성하는 경우 선행 숫자가있는 영숫자 ID로 끝날 수 있습니다.

빠른 수정은 생성기의 SEED에서 숫자를 생략하거나 (수정할 수있는 경우) 항상 생성 된 ID에 문자열을 추가하는 것입니다.

다음은 CSS 선택기에서 선행 번호 ID를 처리하기 위해 방금 만든 함수이며 CSS.escape는 그렇지 않으므로 IE에서 안전합니다.

사용하기 전에이 cleanSelector 함수를 통해 선택기를 전달하십시오.

var cleanSelector = function(selector){
    (selector.match(/(#[0-9][^\s:,]*)/g) || []).forEach(function(n){
        selector = selector.replace(n, '[id="' + n.replace("#", "") + '"]');
    });
    return selector;
};

var myselector = ".dog #980sada_as div span#aside:hover div.apple#05crab:nth-of-type(2), .ginger #2_green_div, div.cupcake #darwin p#23434-346365-53453";

var clean_myselector = cleanSelector(myselector);

// print to show difference
console.log(myselector);
console.log(clean_myselector);

//use the new selector like normal
var elems = document.querySelectorAll( clean_myselector );