recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de la prise en charge par JavaScript des modèles DOM du W3C_Connaissances de base

Explication détaillée de la prise en charge par JavaScript des modèles DOM du W3C_Connaissances de base

WBOY
WBOYoriginal
2016-05-16 15:54:331169parcourir

Ce modèle objet de document permet d'accéder à tout le contenu et aux modifications du document, comme spécifié par le World Wide Web Consortium (W3C). Presque tous les navigateurs modernes prennent en charge ce mode.

La spécification DOM du W3C contient la plupart des fonctionnalités du DOM traditionnel, mais ajoute également de nouvelles fonctionnalités importantes. En plus de prendre en charge les formulaires[ ], images[ ] et d'autres propriétés de tableau de l'objet document, il définit des méthodes qui permettent aux scripts d'accéder et de manipuler n'importe quel élément du document, et pas seulement les éléments spécialisés tels que les formulaires et les images.
Propriétés du document dans le DOM W3C :

Ce modèle prend en charge toutes les propriétés fournies par le DOM traditionnel. De plus, voici une liste des propriétés du document accessibles à l'aide du DOM du W3C :

2015616110345962.jpg (684×368)

Méthodes de documentation dans le DOM du W3C :

Ce modèle prend en charge toutes les méthodes fournies par le DOM traditionnel. De plus, voici une liste des méthodes prises en charge par le DOM du W3C :

2015616110407101.jpg (655×753)

2015616110427713.jpg (674×348)

Exemple :

Il est facile de manipuler (accéder et définir) des éléments à l'aide des documents DOM du W3C. Vous pouvez utiliser n'importe quelle méthode comme getElementById, getElementsByName, orgetElementsByTagName.

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

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

 var ret = document.getElementById("heading");
 alert(ret.innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id="heading">This is main title</h1>
<p>Click the following to see the result:</p>

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

<form d="form2" 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：Méthode de chargement dynamique de jQuery_jqueryArticle suivant：Méthode de chargement dynamique de jQuery_jquery

Articles Liés

Voir plus