Maison >interface Web >js tutoriel >Une brève introduction à la prise en charge par JavaScript du modèle objet de document traditionnel_Connaissances de base

Une brève introduction à la prise en charge par JavaScript du modèle objet de document traditionnel_Connaissances de base

WBOYoriginal: 2016-05-16 15:54:39996parcourir

Il s'agit du modèle qui a été introduit dans les versions antérieures du langage JavaScript. Tous sont pris en charge par tous les navigateurs, mais autorisent uniquement l'accès à certaines parties clés du fichier, telles que les formulaires, les éléments de formulaire et les images.

Ce modèle fournit plusieurs propriétés en lecture seule telles que le titre, l'URL et la dernière modification qui fournissent des informations sur le document dans son ensemble. De plus, diverses méthodes fournies par ce modèle peuvent être utilisées pour définir et obtenir les valeurs des propriétés du document.
Propriétés du document dans le DOM traditionnel :

Ce qui suit est une liste de propriétés de document accessibles à l'aide du DOM traditionnel :

2015616103205974.jpg (662×762)

2015616103233946.jpg (655×726)

Méthode document dans le DOM traditionnel :

Voici une liste de méthodes supportées par le DOM traditionnel :

2015616103255189.jpg (681×498)

Exemple :

Nous pouvons trouver n'importe quel élément HTML, n'importe quel document HTML en utilisant HTML DOM. Par exemple, si un document Web contient un élément de formulaire, alors en utilisant JavaScript, nous pouvons l'appeler document.forms[0]. Si un document Web comprend deux éléments de formulaire, le premier formulaire s'appelle document.forms[0] et le second est document.forms[1].

En utilisant la structure hiérarchique et les propriétés données ci-dessus, vous pouvez utiliser document.forms[0].elements[0], etc.

Voici un exemple d'accès aux propriétés d'un document à l'aide des méthodes DOM traditionnelles :

<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
  var ret = document.title;
  alert("Document Title : " + ret );

  var ret = document.URL;
  alert("Document URL : " + ret );

  var ret = document.forms[0];
  alert("Document First Form : " + ret );

  var ret = document.forms[0].elements[1];
  alert("Second element : " + ret );

}
//-->
</script>
</head>
<body>
<h1 id="title">This is main title</h1>
<p>Click the following to see the result:</p>

<form name="FirstForm">
<input type="button" value="Click Me" onclick="myFunc();" />
<input type="button" value="Cancel">
</form>

<form name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>

</body>
</html>

REMARQUE : Cet exemple renvoie des objets tels que le formulaire et le contenu, et nous devrons utiliser les propriétés de ces objets qui ne sont pas abordées dans ce tutoriel pour accéder à leurs valeurs.

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

Article précédent：Comment utiliser AngularJS pour implémenter une page HTML nesting_AngularJSArticle suivant：Comment utiliser AngularJS pour implémenter une page HTML nesting_AngularJS

Articles Liés

Voir plus