Elementliste einer Node erzeugen

[TS]

Hello,

    var mynode = document.createDocumentFragment();
    mynode.innerHTML = output;
    var scriptnodes = mynode.getElementsByTagName('script');
    for (idx = 0; idx < scriptnodes.length; idx++)
    {
        mynode.removeChild(scriptnodes[idx]);
    }
    document.getElementById('itemscount').appendChild(mynode);
    
    document.getElementById('div_output').innerHTML = output;

Ich erhalte den Fehler TypeError: mynode.getElementsByTagName is not a function

Was ist falsch an meiner Überlegung?

Ich will aus dem erhaltenden HTML-Fragment in output die <script>-Elemente entfernen, bevor ich es ins DOM einhänge.

Liebe Grüße
Tom S.

[dedlfix]

Tach!

var mynode = document.createDocumentFragment();
var scriptnodes = mynode.getElementsByTagName('script');

Ich erhalte den Fehler `TypeError: mynode.getElementsByTagName is not a function`

Was ist falsch an meiner Überlegung?  

Falsch ist, dass Überlegungen nicht mit dem übereinstimmen müssen, zu dem was es wirklich gibt. Man könnte dazu in eine Dokumentation zu schauen, ob die Überlegung richtig war, oder welche Methoden denn wirklich vorhanden sind. Zum Beispiel DocumentFragment im MDN. Zumindest querySelector()/querySelectorAll() existiert. Alternativ kann man auch die Autovervollständigung in der Browser-Konsole befragen, was es denn da für Möglichkeiten gibt.

dedlfix.

[TS]

Hello,

Was ist falsch an meiner Überlegung?

Falsch ist, dass Überlegungen nicht mit dem übereinstimmen müssen, zu dem was es wirklich gibt.

Ja, leider. Obwohl es doch so logisch erschien und z. B. im DOM-Parser von PHP so realisiert ist. Wäre ja noch schöner, wenn JavaScript das genauso machen würde :-O

Man könnte dazu in eine Dokumentation zu schauen, ob die Überlegung richtig war, oder welche Methoden denn wirklich vorhanden sind.

Was meinst Du, was ich hier schon seit Stunden mache? :-(

Zum Beispiel DocumentFragment im MDN. Zumindest querySelector()/querySelectorAll() existiert.

Ja, schade! .findAll() ist noch experimentell...

Mit querySelectorAll() gibt's jetzt zwar keinen Fehler mehr, aber es funktioniert trotzdem nicht. Also erstmal gucken, was die Methode leistet und wenn sie das tut, was ich erhoffe, wo im Folgenden der Fehler steckt. Also bis später ;-)

Liebe Grüße
Tom S.

[1unitedpower]

Ja, leider. Obwohl es doch so logisch erschien und z. B. im DOM-Parser von PHP so realisiert ist. Wäre ja noch schöner, wenn JavaScript das genauso machen würde :-O

Die DOM-Implementiereung der JavaScript-Engines halten sich soweit es geht an die W3C-/WHATWG-Standards. Dem PHP-Entwicklerteam fehlen vermutlich schlicht die Kapazitäten, um so ein Unterfangen erfolgreich umzusetzen - deshalb gibt es in PHP nur die entkoffeinierte Version des DOM. Aber getElementsByTagName ist auch da keine Methode von DOMDocumentFragment.

Unabhängig davon hatte dein Code einen weiteren logischen Fehler:

var scriptnodes = mynode.getElementsByTagName('script');
for (idx = 0; idx < scriptnodes.length; idx++) {
    mynode.removeChild(scriptnodes[idx]);
}

document.getElementsByTagName gibt eine "lebendige" HTMLCollection zurück, das heißt, dass die Länge scriptnodes.length bei jedem Schleifendurchlauf verringert wird und die Schleife somit nicht über alle Einträge iteriert hätte. Bei querySelectorAll bekommst du stattdessen eine "statische" NodeList. Da hast du also schon mal zwei Fliegen mit einer Klappe geschlagen 😉

[TS]

Hello,

Unabhängig davon hatte dein Code einen weiteren logischen Fehler:

var scriptnodes = mynode.getElementsByTagName('script');
for (idx = 0; idx < scriptnodes.length; idx++) {
    mynode.removeChild(scriptnodes[idx]);
}

document.getElementsByTagName gibt eine "lebendige" HTMLCollection zurück, das heißt, dass die Länge scriptnodes.length bei jedem Schleifendurchlauf verringert wird und die Schleife somit nicht über alle Einträge iteriert hätte. Bei querySelectorAll bekommst du stattdessen eine "statische" NodeList. Da hast du also schon mal zwei Fliegen mit einer Klappe geschlagen 😉

Herzlichen Dank! Schon wieder was gelernt. :-)

Ich hatte das zwar gelesen mit der statischen Collection bei .querySelectorAll(), war jetzt aber nicht aufmerksam genug, dass gleich die rote Lampe anginge bezüglich der dynamischen Collection bei document.getElementsByTagName(). Da hätte ich die also per while-Schleife auffressen lassen müssen. Macht aber nichts. Es läuft jetzt. Aber leider nicht mit document.createDocumentFragment(). Damit komme ich noch nicht zurecht.

Ich habe stattdessen jetzt eine "lose" div-Node erzeugt und einfach das resultierende innerHTML ins innerHTML des Output-Divs geschoben. Das scheint ja zulässig zu sein.

Es hat so sowieso keinen praktischen Nutzen; es ist nur eine Übung. Für den produktiven Teil muss ich das dann mit dem PHP DOM-Parser auf dem Server überprüfen, bevor das Ergebnis abgespeichert werden darf.

Ziel ist, am CKEditor ein paar chirurgische Eingriffe machen zu können. Soweit bin ich aber noch nicht und muss auch erst den human readable Source Code suchen.

Liebe Grüße
Tom S.