Eigenes HTML-Element definieren @ tutorials.de: Tutorials, Forum & Hilfe

***einfach nur crack*** · 07.02.12 20:12

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 Javascript:

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.

tobee · 08.02.12 02:18

Laut meinem Test in JSFiddle* kann man mit JS das HTML von einem selbst definierten Html Element lesen.
Soll dein Element sich anders als ein reguläres Html Element verhalten?

* http://jsfiddle.net/wfykP/

***einfach nur crack*** · 08.02.12 02:22

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.

tobee · 08.02.12 02:26

Eigene Attribute lassen sich ja auch auslesen: http://jsfiddle.net/wfykP/1/
Oder hatte ich dich falsch verstanden?

***einfach nur crack*** · 08.02.12 02:30

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-Code:

<decorator>
  <content>
    Inhalt des Dekorators
  </content>
</decorator>

Code Javascript:

1 2	var decorator = document.getElementsByTagName('decorator')[0]; decorator.content; // Gibt "Inhalt des Dekorators" aus

tobee · 08.02.12 03:37

Du könntest das mit jQuery parseXML machen:

HTML-Code:

<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/

***einfach nur crack*** · 08.02.12 07:55

Das hätte ich auch noch erwähnen sollen: jQuery ist nicht, genauso wenig wie jedes andere Framework.

tobee · 08.02.12 11:58

Zitat von einfach nur crack

Das hätte ich auch noch erwähnen sollen: jQuery ist nicht, genauso wenig wie jedes andere Framework.

Was meinst du mit "ist nicht". Ist nicht gut? Ist nicht geeignet?
Du möchtest quasi das es nativ im Browser (Chrome) funktioniert?

wollmaus · 08.02.12 12:38

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).

***einfach nur crack*** · 08.02.12 13:14

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.

wollmaus · 09.02.12 00:24

Code :

HTMLElement.prototype.content=function()
{
  return(
          (this.getElementsByTagName('content').length)
            ? this.getElementsByTagName('content')[0].textContent
            : null
        );
}

Guggsdu: http://jsfiddle.net/t59gq/

***einfach nur crack*** · 09.02.12 00:29

Aber damit erweitere ich doch nur das HTMElement und definiere kein eigenes neues HTML-Element..

wollmaus · 09.02.12 00:45

Du kannst mit Javascript kein neues HTML-Element definieren. HTML-Elemente werden definiert durch die DTD, und wenn das Element in der HTML-DTD nicht definiert ist, dann gibt es das in HTML nicht.

Um ein eigenes Element zu definieren musst du also eine eigene DTD erstellen, diese kannst du dann referenzieren.
Referenzieren geht entweder dokumentweit oder per Element, aber wie auch immer, dein Dokument wird dann kein gültiges HTML-Dokument, es ist XML.

Prominenter Anwendungsfall ist Facebook, die <fb:irgendwas>-Tags der FBML sind dir sicher schon mal begegnet. Aber: auch mit Milliarden in der Hinterhand wird daraus kein HTML, diese Elemente wurden im Nachhinein per JS durch HTML-Elemente ersetzt.
Info: Diese Vorgehensweise fanden die Entwickler anscheinend auf Dauer nicht mehr für anstrebenswert, FBML wird ab Juni 2012 nicht mehr unterstützt.

***einfach nur crack*** · 09.02.12 00:52

Du brauchst mir nicht die Grundidee hinter HTML, XML und DTD erklären, denn diese kenne ich ausreichend. Aber ich weiß, dass man gerade in Hinsicht auf HTML5, beispielsweise in alten Versionen des Internet Explorers, die neuen Elemente, die im Quelltext enthalten sind, registrieren konnte und musste, damit der IE dieses als HTML-Elemente erkannt hat. Also muss es doch einen Ansatz geben, wie ich das lösen kann.

wollmaus · 09.02.12 01:11

Du hast recht, ich brauch dir nichts erklären, anstatt zu erzählen dass du eh alles weisst:

Du brauchst mir nicht die Grundidee hinter HTML, XML und DTD erklären, denn diese kenne ich ausreichend.
[...]
Außerdem sind mir die Probleme beim Erweitern des DOM bekannt, dass stört mich aber in erster Linie nicht.

könntest du dir Wissen verschaffen, anstatt hier die OOP/DOM-Basics abzufragen, von denen du, mit Verlaub erwähnt, angesicht der von dir geposteten Codeschnipsel nur sehr rudimentäre Kenntnisse zu Haben scheinst.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

eigenes Ereignis definieren

eigenes Element

Eigenes Swing-Element für Dialog erstellen

Eigenes CMS in html für Termine

Newskästen in HTML definieren

E-Mail:

Abonnieren Abbestellen