JavaScript 만 사용하면 특정 data-
속성 을 가진 모든 DOM 요소를 선택하는 가장 효율적인 방법은 무엇입니까 data-foo
? 요소는 다른 태그 요소 일 수 있습니다.
<p data-foo="0"></p><br/><h6 data-foo="1"></h6>
답변
querySelectorAll 을 사용할 수 있습니다 .
document.querySelectorAll('[data-foo]');
답변
document.querySelectorAll("[data-foo]")
해당 속성을 가진 모든 요소를 가져옵니다.
document.querySelectorAll("[data-foo='1']")
값이 1 인 사람 만 얻을 수 있습니다.
답변
<!DOCTYPE html>
<html>
<head></head>
<body>
<p data-foo="0"></p>
<h6 data-foo="1"></h6>
<script>
var a = document.querySelectorAll('[data-foo]');
for (var i in a) if (a.hasOwnProperty(i)) {
alert(a[i].getAttribute('data-foo'));
}
</script>
</body>
</html>
답변
흥미로운 해결책은 다음과 같습니다 . 브라우저 CSS 엔진을 사용하여 선택기와 일치하는 요소에 더미 속성을 추가 한 다음 계산 된 스타일을 평가하여 일치하는 요소를 찾습니다.
그것은 스타일 규칙을 동적으로 생성한다. […] 그런 다음 전체 문서를 스캔하고 (많은 속이고 IE 고유하지만 매우 빠른 document.all을 사용하여) 각 요소에 대해 계산 된 스타일을 얻는다. 그런 다음 결과 객체에서 foo 속성을 찾아 “bar”로 평가되는지 확인합니다. 일치하는 각 요소에 대해 배열에 추가합니다.
답변
var matches = new Array();
var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
var d = allDom[i];
if(d["data-foo"] !== undefined) {
matches.push(d);
}
}
누가 -1로 나를 괴롭 혔는지 확실하지 않지만 여기에 증거가 있습니다.
답변
querySelectorAll
(문제가 거의 없음) 예쁘지 않지만 DOM을 반복하고 대부분의 브라우저 (이전 및 새 브라우저)에서 작동 해야하는 매우 유연한 기능이 있습니다. 브라우저가 조건 (예 : 데이터 속성)을 지원하는 한 요소를 검색 할 수 있어야합니다.
궁금한 점은 : jsPerf에서이 QSA를 테스트하지 않아도됩니다. Opera 11과 같은 브라우저는 쿼리를 캐시하고 결과를 왜곡합니다.
암호:
function recurseDOM(start, whitelist)
{
/*
* @start: Node - Specifies point of entry for recursion
* @whitelist: Object - Specifies permitted nodeTypes to collect
*/
var i = 0,
startIsNode = !!start && !!start.nodeType,
startHasChildNodes = !!start.childNodes && !!start.childNodes.length,
nodes, node, nodeHasChildNodes;
if(startIsNode && startHasChildNodes)
{
nodes = start.childNodes;
for(i;i<nodes.length;i++)
{
node = nodes[i];
nodeHasChildNodes = !!node.childNodes && !!node.childNodes.length;
if(!whitelist || whitelist[node.nodeType])
{
//condition here
if(!!node.dataset && !!node.dataset.foo)
{
//handle results here
}
if(nodeHasChildNodes)
{
recurseDOM(node, whitelist);
}
}
node = null;
nodeHasChildNodes = null;
}
}
}
그런 다음 다음을 사용하여 시작할 수 있습니다.
recurseDOM(document.body, {"1": 1});
속도 또는 recurseDOM(document.body);
사양이 포함 된 예 : http://jsbin.com/unajot/1/edit
사양이 다른 예 : http://jsbin.com/unajot/2/edit