JS 코드가 "var a = document.querySelector ( 'a [data-a = 1]');"인 이유 오류가 발생합니까?
DOM에 요소가 있습니다.
<a href="#" data-a="1">Link</a>
HTML5 사용자 정의 데이터 속성을 통해이 요소를 얻고 싶습니다 data-a. 그래서 JS 코드를 작성합니다.
var a = document.querySelector('a[data-a=1]');
하지만이 코드는 작동하지 않고 브라우저 콘솔에 오류가 발생합니다. (Chrome과 Firefox를 테스트했습니다.)
JS 코드 var a = document.querySelector('a[data-a=a]');는 오류를 일으키지 않습니다. 그래서 문제는 HTML5의 JS API document.querySelector가 HTML5 사용자 정의 데이터 속성에서 숫자 값을 찾는 것을 지원하지 않는다는 것입니다.
이것이 브라우저 구현 버그의 문제 document.querySelector입니까 아니면 HTML5 사양의 문제 입니까?
그런 다음 http://validator.w3.org/에서 아래 코드를 테스트했습니다 .
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<a href="#" data-a="1">Link</a>
그들은 검증되었습니다. 이러한 HTML5 코드가 확인 되었기 때문입니다. HTML5의 JS API document.querySelector를 사용 하여 맞춤 데이터 속성을 통해이 앵커 요소를 찾을 수 있습니다 . 그러나 사실은 내가 오류를 얻는다는 것입니다.
HTML5의 HTML5 JS API 사양 document.querySelector에이 메서드가 숫자 값이있는 HTML5 데이터 사용자 정의 속성을 찾을 수 없다고 명시되어 있습니까? (HTML5 사양 소스가 필요합니다.)
에서 선택기 사양 :
속성 값은 CSS 식별자 또는 문자열이어야합니다.
식별자는 숫자로 시작할 수 없습니다. 문자열은 따옴표로 묶어야합니다.
1 따라서 유효한 식별자도 문자열도 아닙니다.
사용 "1"하는 대신 (문자열)입니다.
var a = document.querySelector('a[data-a="1"]');
당신은 사용할 수 있습니다
var a = document.querySelector('a[data-a="1"]');
대신에
var a = document.querySelector('a[data-a=1]');
이걸 알아내는 데 시간이 좀 걸렸지 만 변수에 저장된 숫자가 x라고 말하고 선택하려면
document.querySelector('a[data-a= + CSS.escape(x) + ']').
이것은 내가 아직 잘 알지 못하는 속성 이름 지정 사양 때문입니다. 이것이 누군가를 도울 수 있기를 바랍니다.
예 문자열은 따옴표로 묶어야하며 일부 경우에는 applescript와 같이 따옴표를 이스케이프해야합니다.
do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"
'IT Share you' 카테고리의 다른 글
| HTTP POST는 무한 할 수 있습니까? (0) | 2020.12.15 |
|---|---|
| 파이썬의 numpy에서“zip ()”에 해당하는 것은 무엇입니까? (0) | 2020.12.15 |
| Java 8 Clock으로 클래스 단위 테스트 (0) | 2020.12.15 |
| Node / Express로 엔터프라이즈 앱 빌드 (0) | 2020.12.15 |
| PhpMailer 대 SwiftMailer? (0) | 2020.12.15 |