JS - Polyfill vol. 10

Piszemy kolejny polyfill, tym razem dla funkcji querySelector. Do dzieła.

Polyfill isMatch:

function isMatch(node, selector) {
    if(node.matches) { 
      return node.matches(selector);
    } else { 
      
      var matches = Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector;
      return matches.call(node, selector);
    }
  }

Kod z poprzedniej lekcji:

  Document.prototype.myQuerySelectorAll = function(selector) {
    var result = [];
    
    function traverse(node) {
      if(node == null) 
        return;
      if(isMatch(node, selector)) 
        result.push(node);
      for(var child of node.children) 
        traverse(child);
    }

    traverse(this.documentElement); 

    return result;
  }

Przerabiamy tak, aby zwracał pierwszy napotkany wynik albo null zamiast tablicy wyników/pustej tablicy:

Document.prototype.myQuerySelector = function(selector) {
    
    var result = null;

    function traverse(node) {
      if(node == null) 
        return;
      if(isMatch(node, selector)) {
            result = node;
            return;
        }
      for(var child of node.children) 
        traverse(child);
    }

    traverse(this.documentElement); 
    return result;
  }

Pusty return wywala nas z funkcji traverse wcześniej, gdy znajdziemy coś. Gdy nie, zwrócimy null. DOM traversal taki sam, jak zawsze.

JS – Polyfill vol. 10