Finden Element im Dokument mit HTML-DOM

Ich muss in der Lage sein, ein Element in einem HTML-Dokument auszuwählen und zu ändern. Die übliche Methode, ein Element mithilfe von jQuery zu finden, besteht darin, einen Selektor zu verwenden, der nach Attribut, ID, Klasse oder Elementtyp auswählt. In meinem Fall habe ich jedoch das HTML-DOM des Elements und möchte das Element in meinem Dokument finden, das mit diesem DOM übereinstimmt.Finden Element im Dokument mit HTML-DOM

Wichtig:

Ich weiß, dass ich ein Klasse-Selektor oder ID-Auswahl usw. verwenden kann .. aber manchmal die HTMLs ich nicht über eine Klasse oder eine ID oder ein Attribut mit wählen, also ich müssen in der Lage sein, aus dem HTML des Elements auszuwählen.

Zum Beispiel hier ist das Element, das ich finden müssen:

<span class='hello' data='na'>Element</span>

Ich versuchte jQuery Find() zu verwenden, aber es funktioniert nicht, hier ist die jsfiddle der Studie: https://jsfiddle.net/ndn9jtbj/

Test :

el = jQuery("<span class='hello' data='na'>Element</span>"); 
jQuery("body").find(el).html("modified element");

der folgende Code auf dem Element keine Änderung vornehmen, die in meinem HTML vorhanden ist, und das entspricht dem DOM I geliefert haben. Gibt es eine Möglichkeit, das gewünschte Ergebnis entweder mit nativem Javascript oder jQuery zu erhalten?

Quelle

2016-11-26 Faouzi FJTech

Bitte versuchen Sie dies: 'jQuery (" body "). Find (el) .html (" modifiziertes html ");' –

Was ist falsch daran, einen relevanten Selektor zu benutzen, zB: '$ ('i.fa.fa -camera ') .html ("modifiziertes html"); '??? –

@ Alexandru-IonutMihai Ich versuchte Körper auch, aber mit dem gleichen Ergebnis –

Sie es von outerHTML Eigenschaft filtern können, wenn Sie sicher sind, wie Browser es analysiert hatte:

var $el = jQuery("body *").filter(function(){ 
    return this.outerHTML === '<span class="hello" data="na">Element</span>'; 
}); 
$el.html("modified element");

Quelle

2016-11-26 17:33:07

Das ist die einzige Lösung, die funktioniert hat, danke eine Tonne! –

Dies ist sowohl clever als auch ein bisschen schrecklich. +1 – lonesomeday

sollten Sie verwenden JavaScript, um die Elemente, die durch so etwas wie

bekommen

document.getElementById... 
document.getElementsByClassName... 
document.getElementsByTagName...

Javascript, um die Elemente mit der Id, Klasse oder Tag Name Rückkehr Sie gewählt haben.

Quelle

2016-11-26 17:13:25 DamiToma

Sie können mit document.querySelector('.fa-camera')

mit querySelector en Element erhalten Sie IDs und Classes

Quelle

2016-11-26 17:17:07

Ich muss den vollen HTML verwenden, mit einem Selektor ist keine Option, da es Fälle geben kann, in denen ich keine Selektoren haben werde –

Sie können einfach die ihr durch ihre Klassennamen beziehen auswählen.

$('.fa.fa-camera').html("modified html");

ähnlich wie diese Antwort https://stackoverflow.com/a/1041352/409556

Hier ist ein vollständiges Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.fa.fa-camera').html("modified html"); 

}); 

</script> 
</head> 
<body> 
<i class="fa fa-camera"><h1>Some HTML</h1></i> 


</body> 
</html>`

Quelle

2016-11-26 17:17:39 hayres

Ich muss den vollen HTML verwenden, mit einem Selektor ist keine Option da könnte es sein Fälle, in denen ich keine Selektoren haben werde. –

el = jQuery('<i class="fa fa-camera"></i>');

Dies gilt nicht sagen "um das Element finden, das wie <i class="fa fa-camera"></i> aussieht". Es bedeutet „fa und fa-camera ein neues i Element mit den beiden Klassen erstellen. Es ist the signature for creating new elements on the fly.

jQuery Selektoren aussehen wie CSS, HTML nicht mögen. Um das i Element mit diesen beiden Klassen zu finden, müssen Sie einen Selektor wie i.fa.fa-camera.

Darüber hinaus sucht $("document") nach einem HTML-Element namens document.Dies ist nicht vorhanden.Um das tatsächliche Dokument auszuwählen, benötigen Sie $(document).Sie könnte dies tun:

$(document).find('i.fa.fa-camera').html("modified html")

oder, einfacher, könnten Sie dies tun:

$('i.fa.fa-camera').html('modified html');

Sie zeigen in einem Kommentar zu Ihrer Frage, die Sie benötigen eine Zeichenfolge ein Element zu finden, basierend auf von HTML, das Sie erhalten. Dies ist, gelinde gesagt, schwierig, da HTML im Wesentlichen nicht mehr existiert, sobald ein Browser es analysiert hat. Es wird in eine DOM-Struktur umgewandelt. Es kann nicht nur eine Zeichenkettensuche sein.

Das Beste, was Sie tun können, ist so etwas wie diese:

var searchEl = jQuery('<i class="fa fa-camera"></i>'); 
var tagName = searchEl.prop('tagName'); 
var classes = [].slice.apply(searchEl.prop('classList')); 

$(tagName + "." + classes.join('.')).html('modified html');

Beachten Sie, dass dies nur die Tag-Namen und Klassennamen verwenden, um das Element zu finden. Wenn Sie auch IDs oder etwas anderes möchten, müssen Sie das in den gleichen Zeilen hinzufügen.

Quelle

2016-11-26 17:24:21 lonesomeday

Das ist eine gute Lösung, wenn wir eine Garantie haben, dass es immer mindestens einen Selektor geben wird, aber es funktioniert nicht, wenn keine Selektoren vorhanden sind. –

@FaouziFJTech Wie sieht "wenn es keine Selektoren gibt" aus? Kannst du ein Beispiel geben? – lonesomeday

yep zum Beispiel, Dies ist ein Beispiel –

Die eine Sache, die Sie verwenden können, ist Attribute zu überprüfen (class und id geht auch hier in irgendeiner Weise) Dieses Element haben, und der Build jQuery-Selektor oder DOM querySelector, um das Element zu finden, die Sie benötigen. Der schwierigste Teil wäre, ein Element zu finden, das auf innerHTML -Eigenschaft basiert - "Element" -Text darin, für dieses müssen Sie wahrscheinlich alle ähnlichen Elemente greifen und dann durch sie suchen.

<span class='hello' data='na'>Element</span> 
jQuery('body').find('span.hello[data=\'na\']').html('modified element')

Beachten Sie 'Spanne' - das Tag-Selektor, '.hello' - Klasse '[data = "na"]' Attributdaten mit Namen von Daten.

Jsfiddle link here das erweitert Ihr Beispiel;

Quelle

2016-11-26 17:41:31

Finden Element im Dokument mit HTML-DOM

Antwort

Verwandte Themen