js Grundlagen: Details der häufig verwendeten Eigenschaften und Methoden von Documentobjekten im DOM

-----Einleitung

Jedes in den Browser geladene HTML-Dokument wird zu einem Document-Objekt.

Das Document-Objekt ermöglicht es uns, alle Elemente einer HTML-Seite aus Skripten zu erreichen.

Eigenschaft

1　 document.anchors - Rückgabe auf alle Anchor-Objekte im Dokument. Und document.links/document.forms/document.images u.ä.

2　 document.URL - Rückgabe der URL des aktuellen Dokuments

3　 document.title - Rückgabe des Titels der aktuellen Dokument

4　 document.body - Rückgabe des body-Elementknotens

Methode

1　 document.close() - Schließen des Ausgabestroms, der mit document.open() geöffnet wurde, und Anzeigen der ausgewählten Daten.

<!DOCTYPE html>
<html>
<head>
<script>
function createDoc()
{
var w = window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1">);
w.document.close();
}
</script>
</head>
<body>
<input type="button" value="New document in a new window" onclick="createDoc()">
</body>
</html>

2　 document.createElement() - Erstellen eines Elementknotens.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
<script>
  var a = document.createElement('hr');
  document.body.appendChild(a)
</script>
</body>
</html>

3　 document.createAttribute() - Erstellen eines Attributknotens.

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to make a BUTTON element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var btn = document.createElement("BUTTON");
document.body.appendChild(btn);
};
</script>
</body>
</html>

4　 document.createTextNode() erstellt einen Textknoten.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
<script>
  var a = document.createTextNode('hahahah');
  document.body.appendChild(a)
</script>
</body>
</html>

5　 document. getElementsByClassName() gibt eine Sammlung aller Elemente mit der angegebenen Klasse im Dokument zurück, als NodeList-Sammlung. Eine NodeList-Sammlung ist ein Datenformat, das ähnlich wie ein Array ist, bietet jedoch nur die length-Eigenschaft, wie Methoden wie push und pop in Arrays nicht bereitgestellt werden.

6　 document.getElementById() gibt eine Referenz auf das erste Objekt mit dem angegebenen id zurück.

7　 document.getElementsByName() gibt eine Sammlung von Objekten mit der angegebenen Namen zurück.

8　 document.getElementsByTagName() gibt eine Sammlung von Objekten mit der angegebenen Tagname zurück.Objektmenge.

9　 document.write() schreibt HTML-Ausdrücke oder JavaScript-Code in das Dokument. Beachten Sie: Wenn Sie den write-Methodenaufruf nach dem Laden des HTML-Dokuments verwenden, wird der Inhalt von write das ursprüngliche HTML-Dokument überschreiben.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
<script>
  document.write('hahahh')
</script>
</body>
</html>

Das ist alles, was der Autor Ihnen als detaillierte Erklärung der häufig verwendeten Eigenschaften und Methoden des document-Objekts im DOM des js-basis bietet. Ich hoffe, dass Sie die Anleitung von Shouting-Tutorial weiter unterstützen!

Grundlagen-Tutorial

Vermutlich gefällt Ihnen