Maison  >  Article  >  interface Web  >  Explication détaillée des propriétés des objets de document javascript et exemples de codes de méthode

Explication détaillée des propriétés des objets de document javascript et exemples de codes de méthode

伊谢尔伦
伊谢尔伦original
2017-07-21 13:44:541517parcourir

Chaque document HTML chargé dans le navigateur devient un objet Document. L'objet Document nous permet d'accéder à tous les éléments d'une page HTML à partir de scripts.

Propriétés

1 document.anchors Renvoie les références à tous les objets Anchor du document. Il existe également document.links/document.forms/document.images, etc.

2 document.URL Renvoie l'url du document actuel

3 document.title Renvoie le titre du document actuel document

4 document.body Renvoie le nœud de l'élément de corps

méthode

1 document.close() Ferme le flux de sortie ouvert avec le document. open() et affichez les données de sélection.


<!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() Crée un nœud d'élément.


<!DOCTYPE html>
<html lang="en">
<!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() Crée un nœud d'attribut.


<!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() Crée un nœud de texte.


<!DOCTYPE html>
<html lang="en">
<!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() Renvoie une collection de tous les éléments avec le nom de classe spécifié dans le document sous la forme d'une collection d'objets NodeList. La collection d'objets NodeList est un format de données similaire à un tableau. Elle fournit uniquement l'attribut de longueur, et les méthodes push et pop dans le tableau ne sont pas fournies.

6 document.getElementById() Renvoie une référence au premier objet avec l'identifiant spécifié.

7 document.getElementsByName() renvoie une collection d'objets avec le nom spécifié.

8 document.getElementsByTagName() renvoie une collection d'objets avec le nom de balise spécifié.

9 document.write() écrit des expressions HTML ou du code JavaScript dans le document. Remarque : L'utilisation de la méthode d'écriture après le chargement du document HTML entraînera l'écrasement du contenu d'écriture par rapport au document HTML d'origine.


<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
  <p>hello world</p>

<script>
  document.write(&#39;hahahh&#39;)
</script>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn