Kombinieren von HTML-Tags mit DOM-Knoten

Dieses Mal werde ich Ihnen die Kombination aus HTML-Tag und DOM-Knoten vorstellen. Was sind die Vorsichtsmaßnahmen für die Kombination von HTML-Tag und DOM-Knoten? , wie folgt Dies ist ein praktischer Fall, schauen wir uns ihn an.

Kürzlich habe ich ein Open-Source-Framework geschrieben, das bereits die meisten gängigen Funktionen von jquery enthält. Später werden auch viele Toolfunktionen und MVVM-Treiberfunktionen erweitert. Die Verwendungsmethode ist genau die gleiche wie bei jquery. Warum hat dies etwas mit dem Thema dieses Artikels zu tun? Denn in diesem Artikel geht es um ein Problem, auf das ich beim Schreiben eines Frameworks gestoßen bin. Es kapselt die After-Methode von jquery und unterstützt zwei Verwendungen von DOM- und HTML-Tags. Das HTML-Tag übergibt Parameter in eine DOM-Struktur einfügen.

Zuerst schreiben wir einen gemeinsamen HTML-Tag:

dies ist eine Testzeichenfolge

Dieser HTML-Code enthält Ereignisse, Stile, Attribute und Inhalte.

Wir verwenden dann reguläre Ausdrücke, um jeden Teil dieses HTML-Codes abzugleichen. Was wir brauchen, ist:

1. Tag-Name, da

beim Erstellen eines Dom-Knotens benötigt wird 2. Attribute und Inhalte müssen getrennt getrennt werden

Um die Erstellung von Dom zu erleichtern, verwenden wir zum Speichern einen JSON, z. B. dieses Tag. Das Endergebnis, das wir verarbeiten möchten, ist:

{
id:"test
inner:"this is a test string
name:"test"
onclick:"test();"
style:"color:red;background:green;"
tag:"p"
}

Wenn Sie über diese Struktur verfügen, müssen Sie nur die entsprechenden Schlüssel und Werte abrufen und sie zu einem DOM zusammensetzen

var o = document.createElement( obj['tag'] );
  o.innerHTML = obj['inner'];
  delete obj['inner'];
  delete obj['tag'];
  for( var key in obj ){
   o.setAttribute( key, obj[key] );
  } 
  document.body.appendChild( o );

Die Erklärungsidee ist klar, daher müssen wir zunächst jeden Teil des HTML-Tags mit regulärem Ausdruck

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);

abgleichen

Nun, das ist das Ergebnis unseres Matchings. Wie auf dem Bild zu sehen ist,

res[1] speichert den Tag-Namen, Sie müssen nur die Leerzeichen auf beiden Seiten entfernen

res[2] speichert Attribute und Werte. Wir verwenden die Split-Funktion, um einmal durch Leerzeichen zu schneiden, und verwenden dann die Split-Funktion, um einmal durch „=“ zu zerlegen, um es zu zerlegen

res[4] speichert den Inhalt von string

Für die oben genannten 3 Teile können Sie mit ein wenig Verarbeitung mithilfe von Schleifen und Zeichenfolgen das Zielergebnis erhalten

Dann lautet der vollständige Verarbeitungscode:

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);
  var tagName = null, attrList = [], arr = [], obj = {};
  if( res[1] ) {
   tagName = res[1].trim();
   obj['tag'] = tagName;
  }
  if( res[4] ) {
   obj['inner'] = res[4];
  }
  if ( res[2] ) {
   attrList = res[2].split( /\s+/ );
   for( var i = 0, len = attrList.length; i 

Sie können eine Funktion selbst kapseln. 
 Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben die chinesische PHP-Website! 
Empfohlene Lektüre: 

Das obige ist der detaillierte Inhalt vonKombinieren von HTML-Tags mit DOM-Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!