Maison >interface Web >js tutoriel >Explication détaillée de la façon dont JavaScript lit les attributs de l'objet DOM et implémente le code

Explication détaillée de la façon dont JavaScript lit les attributs de l'objet DOM et implémente le code

伊谢尔伦original: 2017-07-20 11:50:461557parcourir

L'objet DOM est un élément très basique pour js. De manière générale, lorsque nous écrivons js, nous allons certainement opérer dessus. Nous pouvons facilement y ajouter des attributs personnalisés, tels que :

<p id="test" class="hello"></p>

var test = document.getElementById("test");

test.adang = "adang";

alert(test.adang);

Nous constaterons que l'élément DOM avec l'identifiant de test a reçu un attribut appelé adang a été ajouté, puis cet attribut peut être appelé en js. Cette méthode est souvent utilisée lors de l'écriture de js. Elle peut facilement ajouter des données spéciales à un certain objet DOM. On a l'impression que l'objet DOM est comme un conteneur utile dans lequel un tas de données peuvent être placées.

Les attributs pris en charge en HTML tels que id, title et src peuvent être définis dans des balises puis accessibles par js. Alors, que se passe-t-il s'il s'agit d'un attribut personnalisé comme adang dans l'exemple ci-dessus ? Le DOM est-il accessible ? Nous avons fait une expérience comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  test.adang = "adang";
  alert(test.adang);
}
</script>
<body>
<p id="test"></p> 
</body>
</html>

En utilisant js pour étendre les attributs personnalisés, le résultat est que le résultat que nous voulons est affiché normalement, IE et Tout est normal sous FF.

Puis j'ai écrit un deuxième morceau de code, comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  alert(test.adang);
}
</script>
<body>
<p id="test" adang="adang"></p> 
</body>
</html>

Cette fois j'ai écrit les attributs étendus sur la balise html . La sortie normale d'adang est sous IE, mais la sortie sous FF n'est pas définie.

Mais c'est très étrange. Si vous utilisez la méthode getAttribute("") fournie par DOM, vous pouvez récupérer les attributs personnalisés que nous avons écrits dans la balise, que ce soit sous IE ou FF.

Donc, pour des raisons de compatibilité, nous devons utiliser getAttribute("") pour obtenir la valeur de l'attribut d'étiquette personnalisé.

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

Article précédent：Explication détaillée des exemples de méthodes sur la façon d'utiliser javascript et jquery pour détecter l'existence de nœuds domArticle suivant：Explication détaillée des exemples de méthodes sur la façon d'utiliser javascript et jquery pour détecter l'existence de nœuds dom

Articles Liés

Voir plus