Wie verwendet man document.evaluate() und XPath, um eine Liste von Elementen zu erhalten?

Question

Ich bin mit der document.evaluate() JavaScript-Methode ein Element zu erhalten, auf dem von einem XPath-Ausdruck:

var element = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 

Aber wie bekomme ich eine Liste von Elementen, falls die XPath-Ausdruck verweist auf mehr als ein Element auf dem Seite?

Ich habe versucht, den folgenden Code, aber es funktioniert nicht:

var element = document.evaluate(path, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); 

Answer 1

Aus der Dokumentation

var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); 

try { 
    var thisNode = iterator.iterateNext(); 

    while (thisNode) { 
    alert(thisNode.textContent); 
    thisNode = iterator.iterateNext(); 
    } 
} 
catch (e) { 
    dump('Error: Document tree modified during iteration ' + e); 
} 

Answer 2

ich die folgende Lösung in der book fand ich gerade lesen werde. Es besagt, dass der Code von Prototype library stammt.

function getElementsByXPath(xpath, parent) 
{ 
    let results = []; 
    let query = document.evaluate(xpath, 
     parent || document, 
     null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 
    for (let i=0, length=query.snapshotLength; i<length; ++i) { 
    results.push(query.snapshotItem(i)); 
    } 
    return results; 
} 

es wie folgt verwendet:

let items = getElementsByXPath("//*"); // return all elements on the page 

Answer 3

Ich war vor einigen Wochen hart mit dem gleichen Problem zu arbeiten. Ich habe herausgefunden, dass das Ergebnis bereits eine Liste von Elementen darstellt (falls vorhanden) und man es durch iterieren kann. Ich musste ein jQuery-Plugin erstellen, um nach Teil- oder Volltextstrings zu suchen, was den inneren Text eines beliebigen DOM-Elements wie LI oder H2 bedeutet. Ich habe das erste Verständnis auf seiner Seite: Document.evaluate() | MDN

Nach einigen Stunden habe ich das Plugin ausgeführt: Suche nach dem Wort "Architektur" nur in "p" -Elementen, finden teilweise übereinstimmende Zeichenfolgen ("True" für <p>todays architecture in Europe</p>) statt Übereinstimmungen des gesamten Textes (<h2>architecture</h2>).

var found = $('div#pagecontent').findtext('architecture','p',true); 

Gefundene Ergebnisse sind normale jQuery-Objekte, die wie gewohnt verwendet werden können.

found.css({ backgroundColor: 'tomato'}); 

Das Beispiel der Verwendung kann die oben für das Such Trog gesamte Dokument und alle Knotentypen wie folgt aus (Teilergebnisse)

var found = $('body').findtext('architecture','',true); 

oder nur exakte

var found = $('div#pagecontent').findtext('architecture'); 

übereinstimmt, wie dies geändert werden, Das Plugin selbst zeigt eine Variable "es", die den Plural eines einzelnen "e" für "element" darstellt. Und Sie können sehen, wie die Ergebnisse iteriert und in einer Menge von Objekten mit f = f.add($(e)) gesammelt werden (wobei "f" für "gefunden" steht). Der Anfang der Funktion behandelt unterschiedliche Bedingungen, wie die vollständige oder teilweise Suche ("c" für Bedingung) und den Dokumentbereich für die Suche ("d").

Es kann wo auch immer optimiert werden, kann nicht das Maximum an Möglichkeiten darstellen, aber es stellt mein bestes Wissen im Moment dar, läuft ohne Fehler und es kann Ihre Frage hoffentlich beantworten. Und hier ist es:

(function($) { 
    $.fn.findtext = function(s,t,p) { 
     var c, d; 
     if (!this[0]) d = document.body; 
     else d = this[0]; 
     if (!t || typeof t !== 'string' || t == '') t = '*'; 
     if (p === true) c = './/'+t+'[contains(text(), "'+s+'")]'; 
     else c = './/'+t+'[. = "'+s+'"]'; 
     var es = document.evaluate(c, d, null, XPathResult.ANY_TYPE, null); 
     var e = es.iterateNext(); 
     var f = false; 
     while (e) { 
      if (!f) f = $(e); 
      else f = f.add($(e)); 
      e = es.iterateNext(); 
     } 
     return f || $(); 
    }; 
})(jQuery);