[javascript] jQuery를 사용하지 않고 “data-“속성이있는 모든 요소를 ​​선택하십시오.

JAVASCRIPT / 글쓴이

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로 나를 괴롭 혔는지 확실하지 않지만 여기에 증거가 있습니다.

http://jsfiddle.net/D798K/2/

답변

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

답변