Heim > Artikel > Web-Frontend > Detaillierte Erläuterung gängiger Attributmethoden von Dokumentobjekten in DOM basierend auf js

Detaillierte Erläuterung gängiger Attributmethoden von Dokumentobjekten in DOM basierend auf js

高洛峰Original: 2016-12-08 14:35:351227Durchsuche

-----Einführung

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

Das Document-Objekt ermöglicht uns den Zugriff auf alle Elemente einer HTML-Seite über Skripte.

Eigenschaften

1 document.anchors Gibt Verweise auf alle Anchor-Objekte im Dokument zurück. Es gibt auch document.links/document.forms/document.images usw.

2 document.URL Gibt die URL des aktuellen Dokuments zurück

3 document.title Gibt den Titel des aktuellen zurück document

4 document.body Gibt den Körperelementknoten zurück

method

1 document.close() Schließt den mit der Methode document.open() geöffneten Ausgabestream und zeigt ihn an die 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() Elementknoten erstellen.

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
   
<script>
  var a = document.createElement(&#39;hr&#39;);
  document.body.appendChild(a)
 
 
</script>
</body>
</html>

3 document.createAttribute() Attributknoten erstellen.

<!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>
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
 
<script>
  var a = document.createTextNode(&#39;hahahah&#39;);
  document.body.appendChild(a)
 
 
</script>
</body>
</html>

5 document.getElementsByClassName() Gibt eine Sammlung aller Elemente mit dem angegebenen Klassennamen im Dokument als Sammlung von NodeList-Objekten zurück. Die sogenannte NodeList-Objektsammlung ist ein Datenformat ähnlich einem Array. Sie stellt nur das Längenattribut bereit, die Push- und Pop-Methoden im Array werden nicht bereitgestellt.

6 document.getElementById() Gibt einen Verweis auf das erste Objekt mit der angegebenen ID zurück.

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

8 document.getElementsByTagName() gibt eine Sammlung von Objekten mit dem angegebenen Tag-Namen zurück.

9 document.write() schreibt HTML-Ausdrücke oder JavaScript-Code in das Dokument. Hinweis: Die Verwendung der Schreibmethode nach dem Laden des HTML-Dokuments führt dazu, dass der Schreibinhalt das ursprüngliche HTML-Dokument überschreibt.

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>
 
<script>
  document.write(&#39;hahahh&#39;)
 
 
</script>
</body>
</html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einfache Entwicklung eines Zeichenprogramms mit RequireJSNächster Artikel：Einfache Entwicklung eines Zeichenprogramms mit RequireJS

In Verbindung stehende Artikel

Mehr sehen