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

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

伊谢尔伦

Libérer： 2017-07-20 11:50:46

original

1548 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!