Ausführliche Erklärung, wie JavaScript mithilfe von Zeichenfolgen dynamisch DOM-Instanzen erstellt-js-Tutorial-php.cn

Ausführliche Erklärung, wie JavaScript mithilfe von Zeichenfolgen dynamisch DOM-Instanzen erstellt

伊谢尔伦

Freigeben： 2017-07-18 16:16:55

Original

1651 Leute haben es durchsucht

Um ein Standard-Dom-Objekt in JavaScript dynamisch zu erstellen, verwenden Sie im Allgemeinen:

var obj = document.createElement(&#39;p&#39;);

Nach dem Login kopieren

und legen Sie dann einige Attribute für obj fest.
Bei der tatsächlichen Verwendung denken einige Leute jedoch möglicherweise, dass es großartig wäre, wenn auf diese Weise ein Standard-Dom-Objekt erstellt werden könnte
Pseudocode: var obj=strToDom('

Hallo Welt!

');
Dann ist der Zweck von heute, Ihnen beizubringen, wie Sie eine solche Methode implementieren, um einen String direkt in ein Standard-DOM-Objekt umzuwandeln

Start:
Tatsächlich ist es sehr einfach, eine solche Konvertierung zu implementieren. Hier verwenden wir hauptsächlich ein Attribut innerHTML, ich glaube, jeder hat es verwendet, insbesondere um ein dynamisch zu ändern Element wird beim Einfügen von Inhalten verwendet. Hier werde ich innerHTML zur Vereinfachung für diejenigen vorstellen, die damit nicht vertraut sind.
InnerHTML ist kein W3C-Standard, sondern wurde vom IE erfunden und erstellt. Aufgrund der Bequemlichkeit dieses Attributs und des damaligen Status von Weibo haben jedoch auch andere Nicht-IE-Browser innerHTML integriert und bereitgestellt.
Obwohl innerHTML kein W3C-Standard ist, ist es ein De-facto-Standard. Das heißt, alle Mainstream-Browser unterstützen derzeit innerHTML und sind daher natürlich mit mehreren Browsern kompatibel.

function parseDom(arg) { 
　　 var objE = document.createElement("p"); 
　　 objE.innerHTML = arg; 
　　 return objE.childNodes; 
};

Nach dem Login kopieren

Die Konvertierung erfolgt in nur wenigen Codezeilen. Wir erstellen zunächst ein p mit der Standardmethode und verwenden dann innerHTML, um ein Element einzufügen Kernel. Eine durch einen Algorithmus implementierte Konvertierung. Geben Sie es mit childNodes zurück.

Auf diese Weise haben wir die Konvertierung einer Zeichenfolge in ein Standard-DOM abgeschlossen. Mithilfe des browsereigenen Algorithmus können wir eine große Anzahl komplexer Konvertierungen mit einer einfachen und kleinen Codemenge durchführen die Zeichenfolge, aber überlassen Sie es dem Browser, dies selbst zu tun, was genau und fehlerfrei ist.
Verwendung:

var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p>&#39;); 
var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p><span>多个也没关系</span>&#39;);

Nach dem Login kopieren

Hinweis:

childNodes gibt eine Array-ähnliche Liste zurück. Wenn es sich also um ein Element handelt, müssen Sie zur Verwendung dieses Doms obj[0] wie folgt verwenden. Wenn es sich um mehrere DOM-Konvertierungen auf derselben Ebene handelt, können Sie obj[0], obj[1]...

verwenden

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie JavaScript mithilfe von Zeichenfolgen dynamisch DOM-Instanzen erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!