Ausführliche Erklärung, wie JavaScript HTML-Elemente und -Stile verarbeitet. Grundkenntnisse-js-Tutorial-php.cn

Ausführliche Erklärung, wie JavaScript HTML-Elemente und -Stile verarbeitet. Grundkenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:35:47

Original

1280 Leute haben es durchsucht

JavaScript HTML DOM-Element (Knoten)
Neues HTML-Element erstellen
Um dem HTML-DOM ein neues Element hinzuzufügen, müssen Sie zunächst das Element (Elementknoten) erstellen und es dann an ein vorhandenes Element anhängen.
Beispiel

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

Nach dem Login kopieren

Beispielanalyse:
Dieser Code erstellt ein neues

-Element:

var para=document.createElement("p");

Nach dem Login kopieren

Um Text zu einem

-Element hinzuzufügen, müssen Sie zunächst einen Textknoten erstellen. Dieser Code erstellt einen Textknoten:

var node=document.createTextNode("This is a new paragraph.");

Nach dem Login kopieren

Dann müssen Sie diesen Textknoten an das

-Element anhängen:

para.appendChild(node);

Nach dem Login kopieren

Abschließend müssen Sie das neue Element an ein vorhandenes Element anhängen.
Dieser Code findet ein vorhandenes Element:

var element=document.getElementById("div1");

Nach dem Login kopieren

Der folgende Code fügt ein neues Element nach einem vorhandenen Element hinzu:

element.appendChild(para);

Nach dem Login kopieren

Vorhandene HTML-Elemente löschen
Dieser Code hängt ein neues Element an dieses vorhandene Element an:
Beispiel

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

Nach dem Login kopieren

Beispielanalyse
Dieses HTML-Dokument enthält ein

-Element mit zwei untergeordneten Knoten (zwei

-Elemente):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Nach dem Login kopieren

Suchen Sie das Element mit der ID="div1":

var parent=document.getElementById("div1");

Nach dem Login kopieren

Suchen Sie das

-Element mit der ID="p1":

var child=document.getElementById("p1");

Nach dem Login kopieren

Untergeordnete Elemente von übergeordneten Elementen entfernen:

parent.removeChild(child);

Nach dem Login kopieren

Lampe Es wäre großartig, wenn Sie ein Element löschen könnten, ohne auf das übergeordnete Element zu verweisen.
Aber es ist schade. Das DOM muss das zu löschende Element und sein übergeordnetes Element kennen.
Dies ist eine gängige Lösung: Suchen Sie das untergeordnete Element, das Sie entfernen möchten, und verwenden Sie dann seine parentNode-Eigenschaft, um das übergeordnete Element zu finden:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Nach dem Login kopieren

JavaScript HTML DOM – CSS ändern
Das HTML-DOM ermöglicht es JavaScript, den Stil von HTML-Elementen zu ändern.
HTML-Stil ändern
Um den Stil eines HTML-Elements zu ändern, verwenden Sie diese Syntax:
document.getElementById(id).style.property=neuer Stil
Das folgende Beispiel ändert den Stil des

-Elements:
Beispiel

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Nach dem Login kopieren

In diesem Beispiel ändert sich der Stil des HTML-Elements mit id="id1", wenn der Benutzer auf die Schaltfläche klickt:
Beispiel

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

Nach dem Login kopieren