Detaillierte Erläuterung gängiger Attributmethoden von Dokumentobjekten in DOM basierend auf js-js-Tutorial-php.cn

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

高洛峰

Freigeben： 2016-12-08 14:35:35

Original

1275 Leute haben es durchsucht

-----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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren