배열을 기반으로 DOM 요소를 반환합니다.

도전 과제로, 나는 JavaScript 선택 엔진, 즉 CSS 선택기가있는 DOM 요소를 반환하는 JavaScript 함수를 만들려고합니다.배열을 기반으로 DOM 요소를 반환합니다.

document.querySelector/document.querySelectorAll을 사용할 수 없습니다.

현재 매개 변수의 개체를 만들었지 만 막혔습니다. 이제 페이지의 모든 요소를 반복해야하고, 내 태그 또는 class/id와 일치하는 경우 해당 요소를 배열로 푸시합니다.

function $ (selector) { 
 

 
\t var elements =[]; 
 

 
\t var pageTags =[]; 
 

 
\t var all = document.getElementsByTagName("*"); 
 

 
\t //splits selector 
 
\t var arg = parse(selector); 
 

 
\t function parse(subselector) { 
 
\t \t var obj = {tags:[], classes:[], ids:[], attrs:[]}; 
 
\t \t subselector.split(/(?=\.)|(?=#)|(?=\[)/).forEach(function(token){ 
 
\t \t  switch (token[0]) { 
 
\t \t  case '#': 
 
\t \t   obj.ids.push(token.slice(1)); 
 
\t \t   break; 
 
\t \t  case '.': 
 
\t \t   obj.classes.push(token.slice(1)); 
 
\t \t   break; 
 
\t \t  case '[': 
 
\t \t   obj.attrs.push(token.slice(1,-1).split('=')); 
 
\t \t   break; 
 
\t \t  default : 
 
\t \t   obj.tags.push(token); 
 
\t \t   break; 
 
\t \t  } 
 
\t \t }); 
 
\t \t return obj; 
 
\t } 
 

 
\t console.log(arg); 
 

 

 
\t for (var item of all) { 
 

 
\t \t //gets tagname of all page elements 
 
\t \t var element = item.tagName.toLowerCase(); 
 

 
\t \t console.log(element); 
 
\t \t //if argument contains DOM element 
 
\t \t if (arg.indexOf(element) !== -1) { 
 

 
\t \t \t var x = document.getElementsByTagName(element); 
 
\t \t \t 
 
\t \t \t for (var test of x) { 
 
\t \t \t \t elements.push(test); 
 
\t \t \t } 
 

 
\t \t } 
 

 
\t } 
 

 
\t return elements; 
 

 
}

<html> 
 
    <head> 
 
    <script src="Answer.js"></script> 
 
    <script src="Test.js"></script> 
 
    </head> 
 
    <body onload="test$()"> 
 
    <div></div> 
 
    <div id="some_id" class="some_class some_other_class"></div> 
 
    <img id="some_other_id" class="some_class some_other_class"></img> 
 
    <input type="text"> 
 
    </body> 
 
</html>

$("div") //Should return 2 DIVs 

$("img.some_class") //Should return 1 IMG 

$("#some_id") //Should return 1 DIV 

$(".some_class") //Should return 1 DIV and 1 IMG

는이 작업을 수행하는 방법에 대한 도움을 주시면 감사하겠습니다.

출처

2017-12-03 Matthew

만이 한 시간 동안 나는'querySelectorAll은()'? – joopmicroop

도전 바닐라 자바 스크립트 :(당신이 모르거나 사용하지 않을 – Matthew

을 사용하는 것입니다 "사용 jQuery를"말할 것 @Mamun에 도전해라. 나는 그것을 사용할 수 없다. 또는 jQuery. – Mamun

이것을 확인하십시오. jsfiddle. 물론 더 많은 조합이있을 것입니다 ...

제공 한 html 예제로 테스트 케이스를 제한했습니다.

function _select(attrValues, tagFilter, cssSel) { 

    var results = []; 
    //var value = selector.slice(1); 
    var all = document.getElementsByTagName(tagFilter); 
    //look for an id attribute 
    if (cssSel === '#') { 
    for (var i = 0; i < all.length; i++) { 
     if (all[i].id === attrValues) { 
     results.push(all[i]); 
     } 
    } 
    } else { 
    if (typeof attrValues === 'string') { 
     for (var i = 0; i < all.length; i++) { 
     if (all[i].classList.contains(attrValues)) { 
      results.push(all[i]); 
     } 
     } 
    } else { 
     //multiple selector classes 
     var found = 0; 
     for (var i = 0; i < all.length; i++) { 
     for (var j = 0; j < attrValues.length; j++) { 
      if (all[i].classList.contains(attrValues[j])) { 
      found += 1; 
      if (found === attrValues.length) { 
       results.push(all[i]); 
      } 
      } 
     } 
     } 
    } 
    } 
    return results; 
} 

function $(selector) { 

    var cssSel = selector.charAt(0); 
    var cssSelectors = ['.', '#']; 

    if (cssSel === cssSelectors[0] || cssSel === cssSelectors[1]) { 
    //direct selector 
    var attrValue = selector.slice(1), 
     tagFilter = '*'; 
    return _select(attrValue, tagFilter, cssSel) 
    } else { 
    for (var i = 0; i < cssSelectors.length; i++) { 
     var tokens = selector.split(cssSelectors[i]); 
     if (tokens.length > 1 && tokens[0] !== "") { 
     //nested selector 
     var tagFilter = tokens[0], //the first of the array should be the tagname ,because the case of the cssSelector at charAt(0) should have been caught in the if at the beginning. 
      attrValue = tokens.slice(1); //the rest of the array are selector values 
     return _select(attrValue, tagFilter, cssSel) 
     } 
    } 
    } 
    return document.getElementsByTagName(selector); 
} 

//TEST cases 

var results = $("div") 
console.log('Should return 2 DIVs') 
for (var e of results){ 
    console.log(e) 
} 

var results = $(".some_class") 
console.log('Should return 1 DIV and 1 IMG') 
for (var e of results){ 
    console.log(e) 
} 

var results = $("#some_id") 
console.log('Should return 1 DIV ') 
for (var e of results){ 
    console.log(e) 
} 

var results = $("img.some_class") 
console.log('Should return 1 IMG') 
for (var e of results){ 
    console.log(e) 
} 

var results = $("div.some_class.some_other_class") 
console.log('Should return 1 div') 
for (var e of results){ 
    console.log(e) 
}

출처

2017-12-04 02:43:25

배열을 기반으로 DOM 요소를 반환합니다.

답변

관련 문제