Eigenes HTML-Element definieren

Parantatatam

Parantatatam

mag Cookies & Kekse
Hallo Tutorianer,

ich fragte mich gerade, ob der Chrome einfach keine selbst definierten Elemente erkennt oder erkennen will, oder ob ich nicht noch etwas vergessen habe als ich mein eigenes Objekt definierte. Folgendes habe ich bereits:
Code: 
HTMLTemplateElement = {
  content: null,
}
HTMLTemplateElement.prototype = HTMLElement;
Wenn ich jetzt ein solches Template-Element in meinem Quelltext platziere und aufrufe, dann gibt mir der Chrome als Elementyp HTMLUnknownElement aus. Ebenso kann ich nicht auf die Eigenschaft content zugreifen. Gleiches ist der Fall, wenn ich ein Element mit document.createElement('template') erstelle.

Übersehe ich da etwas? Vielleicht muss man die Elemente auch vorher mit einer Methode registrieren, damit diese verfügbar sind.
 
Ja, es soll noch andere Attribute erhalten. Deshalb ist das etwas nervig mit den unbekannten Elementtypen, da diese logischerweise nicht die selbstdefinierten Attribute enthalten und somit beim Versuch darauf zuzugreifen eine Warnmeldung anzeigen.
 
So war das nicht gemeint sondern Attribute des Elements, eher eine Art Methode. Beispielsweise brauche ich ein Attribut content, das den Quelltext des enthaltenen content-Elements ausgibt:
HTML: 
<decorator>
  <content>
    Inhalt des Dekorators
  </content>
</decorator>
Code: 
var decorator = document.getElementsByTagName('decorator')[0];
decorator.content; // Gibt "Inhalt des Dekorators" aus
 
Du könntest das mit jQuery parseXML machen:
HTML: 
<html>

<head>
<script type="text/javascript">
function usemytag()
{
    var tag = document.getElementsByTagName('mytag')[0];
    var html = tag.innerHTML;
    var xml = jQuery.parseXML(html);
    console.log($(xml).find('decorator').find('content').text());
}
</script>
</head>

<body>
<mytag myAttribute="myValue">
    <decorator>
  <content>
    Inhalt des Dekorators2
  </content>
</decorator>

    </mytag><br>
<input type="button" value="Use My Tag" onclick="usemytag();">
</body>

</html>
http://jsfiddle.net/wfykP/4/
 
Das, was du willst, ist das Erweitern des HTMLElement-prototypes. Darüber wäre es möglich, alle HTML-Elemente um eine eigene Methode zu Erweitern, welche bspw. den Inhalt des Kind-<content/> eines Elementes liefert.

Knackpunkt: nicht alle Browser stellen einen constructor für (HTML)Element zur Verfügung. Abgesehen davon gibt es eine Menge Gründe, das DOM nicht zu erweitern

Also besser: Finger weg davon.

Und auch wenn du jQuery nicht leiden kannst: das ist einer der Gründe, warum jQuery im Laufe der Jahre andere Frameworks so weit hinter sich gelassen hat, es fummelt nicht wie die Kontrahenten am DOM herum.

Wenn du dich also (hoffentlich)entschliessen solltest, die Idee mit der DOM-Erweiterung zu vergessen, kommst du über kurz oder lang auf eine Lösung, die dem Ansatz von jQuery ähnelt(und wirst jQuery dann nicht mehr doof finden).
 
Zuletzt bearbeitet:
Es geht mir nicht darum, dass ich jQuery nicht mag, aber es geht mir darum eine möglichst einfache Lösung zu finden, die nicht auf ein Framework setzt. Außerdem sind mir die Probleme beim Erweitern des DOM bekannt, dass stört mich aber in erster Linie nicht.

Trotzdem mag ich wissen, wie das jetzt genau aussehen muss.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück