Eigenes HTML-Element definieren

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.
 
Zuletzt bearbeitet:
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.
 
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.
Zum Vergrößern anklicken....

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.
 
Ich glaube wir verstehen uns gerade sehr falsch, denn ich arbeite nicht erst seit kurzer Zeit mit Webanwendungen, sondern meine Anfänge liegen schon mindestens sechs Jahre zurück und in der Zeit habe ich mich viel und intensiv mit Sprachen wie PHP, Javascript, HTML, XML, CSS, Ruby, Java und C sowie Webtechnologien, Protokollen und Strukturen beschäftigt und habe somit einen recht guten Überblick darüber, wie das hier alles zusammen läuft.

Außerdem steht für mich nicht die Frage im Raum, wie ich denn jetzt ein Element als Objekt definiere, so dass es von einem anderen Objekt erbt, sondern es geht mir allein darum, dass es eine Möglichkeit geben muss, damit Browser beim Parsen dieses Objektes erkennen, dass es eben ein eigen-definiertes Element ist.

Um mal ein wenig mehr Code zu liefern:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>custom elements</title>
  <script type="text/javascript" src="elements.js"></script>
  <script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function () {
      var elements = ['template', 'content'];
      for(var element in elements) {
        var nodes = document.getElementsByTagName(element);
        for(var i = 0; i < nodes.length; ++i) {
          var replace = document.createElement(element);
          replace.innerHTML = nodes[i].innerHTML;
          nodes[i].parentElement.replaceChild(replace, nodes[i]);
        }
      }
    }, false);
  </script>
</head>
<body>
  <template>
    <content>Inhalt des Templates</content>
  </template>
</body>
</html>
Code: 
HTMLTemplateElement = {};
HTMLTemplateElement.prototype = HTMLElement;
HTMLTemplateElement.prototype.__defineGetter('content', function () {
  var content = this.getElementsByTagName('content');
  return (content.length === 0) ? null : content[0];
}, false);
HTMLContentElement = {};
HTMLContentElement.prototype = HTMLElement;
Das Problem ist: auch documen.createElement(...); gibt mir ein Objekt vom Typ HTMLUnknownElement aus.

––––––
Ansonsten: Ich verbiete mir diesen Ton und ich finde es echt grenzwertig wie du hier willkürlich über die Kenntnisse von anderen urteilst. Wenn es für dich die falsche Uhrzeit ist, dann halte dich lieber zurück, bevor du hier abfällig bewertest und sprichst. Aber das nur für deine Zukunft.
 
Code: 
HTMLTemplateElement = {};
HTMLTemplateElement.prototype = HTMLElement;

Dir ist angesichts deiner jahrelangen Erfahrung hoffentlich klar, dass dieser Code eine [Object]-instance namens "HTMLTemplateElement" erstellt.

Der constructor deines HTMLTemplateElement ist somit [Object], und das bleibt er auch. Daraus wird kein [HTMLElement] irgendwelcher Art mehr.

Diese Zeile :
Code: 
HTMLTemplateElement.prototype = HTMLElement;
fügt deiner Object-instance eine Eigenschaft "prototype" hinzu, mehr nicht.

Wenn HTMLTemplateElement etwas erben soll/kann, dann tut es das von Object.prototype , von nichts Anderem.


Auch wenn du es nicht wahrhaben willst, die einzige Methode, ein HTML-Element zu erzeugen ist createElement(), das ist es was das DOM und das JS-API der Browser zur Verfügung stellt. Wenn es dir nicht passt, musst du dir einen eigenen Browser programmieren, der dir das gewünschte Handwerkszeug (einen HTMLElement-constructor) bereitstellt.


Um letztendlich auf deinen ersten Codeabschnitt einzugehen:
dies hier:
Code: 
for(var element in elements)
dir ist schon klar, dass diese Art Objekte zu durchlaufen in JS Schlüssel(label) liefert und keine Werte(übrigens sollte man diese Methode nur auf [Object] anwenden und nicht auf [Array] oder Sonstiges).

element hat da also die Werte 0 und 1, das sind die numerischen Schlüssel des Arrays.
 
Zuletzt bearbeitet:
Erkenntnis 1: Ich sollte ebenfalls nicht mitten in der Nacht Beiträge verfassen.
Erkenntnis 2: Ich sollte vorher meine Skripte ausprobieren und sie nicht direkt hier schreiben.

Du hast natürlich in allen Punkten Recht und ich weiß das auch, aber es war spät. Also so sollte es eigentlich aussehen:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>custom elements</title>
  <script type="text/javascript" src="elements.js"></script>
  <script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function () {
      var elements = ['template', 'content'];
      for(var j = 0; j < elements.length; ++j) {
        var nodes = document.getElementsByTagName(elements[j]);
        for(var i = 0; i < nodes.length; ++i) {
          var replace = document.createElement(element);
          replace.innerHTML = nodes[i].innerHTML;
          nodes[i].parentElement.replaceChild(replace, nodes[i]);
        }
      }
    }, false);
  </script>
</head>
<body>
  <template>
    <content>Inhalt des Templates</content>
  </template>
</body>
</html>
Code: 
HTMLTemplateElement = function () {};
HTMLTemplateElement.prototype = new HTMLElement();
HTMLTemplateElement.prototype.constructor = HTMLTemplateElement;
HTMLTemplateElement.prototype.__defineGetter('content', function () {
  var content = this.getElementsByTagName('content');
  return (content.length === 0) ? null : content[0];
}, false);
HTMLContentElement = function () {};
HTMLContentElement.prototype = new HTMLElement();
HTMLContentElement.prototype.constructor = HTMLContentElement;
Hierbei entsteht aber noch das Problem, dass man von HTMLElement keine Instanzen erstellen kann, da diese Klasse keinen Konstruktor besitzt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück