Explication détaillée des méthodes de base d'exploitation du DOM HTML avec des connaissances JavaScript

Explication détaillée des méthodes de base d'exploitation du DOM HTML avec des connaissances JavaScript_Basic

WBOY

Libérer： 2016-05-16 15:35:57

original

1190 Les gens l'ont consulté

Le HTML DOM permet d'accéder à tous les éléments d'un document HTML JavaScript.
HTML DOM (Modèle Objet de Document)
Lorsqu'une page Web est chargée, le navigateur crée le modèle objet de document de la page.
Le modèle HTML DOM est construit comme une arborescence d'objets :
Explication détaillée des méthodes de base dexploitation du DOM HTML avec des connaissances JavaScript_Basic
Grâce au modèle objet programmable, JavaScript a acquis suffisamment de puissance pour créer du HTML dynamique.

JavaScript peut modifier tous les éléments HTML de la page
JavaScript peut modifier tous les attributs HTML de la page
JavaScript peut modifier tous les styles CSS de la page
JavaScript peut réagir à tous les événements de la page

Rechercher un élément HTML
Généralement, avec JavaScript, vous devez manipuler des éléments HTML.
Pour ce faire, vous devez d’abord trouver l’élément. Il existe trois façons de procéder :

Rechercher un élément HTML par identifiant
Rechercher un élément HTML par nom de balise
Rechercher des éléments HTML par nom de classe
Rechercher un élément HTML par identifiant

Le moyen le plus simple de trouver un élément HTML dans le DOM consiste à utiliser l'identifiant de l'élément.
Cet exemple trouve l'élément avec id="intro":
Exemple

var x=document.getElementById("intro");

Copier après la connexion

Si l'élément est trouvé, la méthode renvoie l'élément sous forme d'objet (en x).
Si l'élément n'est pas trouvé, x contiendra null.
Rechercher des éléments HTML par nom de balise
Cet exemple recherche l'élément avec id="main" puis recherche tous les éléments

dans l'élément id="main" :
Exemple

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

Copier après la connexion

Rechercher un élément HTML par nom de classe
Cet exemple utilise la fonction getElementsByClassName pour rechercher des éléments avec class="intro":
Exemple

var x=document.getElementsByClassName("intro");

Copier après la connexion

Changer le HTML
Le HTML DOM permet à JavaScript de modifier le contenu des éléments HTML.
Modifier le flux de sortie HTML
JavaScript peut créer du contenu HTML dynamique :
La date d'aujourd'hui est : mercredi 21 octobre 2015, 14:43:25 GMT 0800 (heure normale de Chine)
En JavaScript, document.write() peut être utilisé pour écrire du contenu directement dans le flux de sortie HTML.
Exemple

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Copier après la connexion

lamp N'utilisez jamais document.write() une fois le chargement du document terminé. Cela écrasera le document.

Modifier le contenu HTML
Le moyen le plus simple de modifier le contenu HTML consiste à utiliser la propriété innerHTML.
Pour modifier le contenu d'un élément HTML, utilisez cette syntaxe :
document.getElementById(id).innerHTML=new HTML
Cet exemple modifie le contenu de l'élément

Exemple

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

Copier après la connexion

Cet exemple modifie le contenu de l'élément

Exemple

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

Copier après la connexion

Explication avec exemples :

Le document HTML ci-dessus contient l'élément

avec id="header"

Nous utilisons HTML DOM pour obtenir l'élément avec id="header"
JavaScript modifie le contenu de cet élément (innerHTML)

Modifier les attributs HTML

Pour modifier les attributs d'un élément HTML, utilisez cette syntaxe :

document.getElementById(id).attribute=new value

Copier après la connexion

Cet exemple modifie l'attribut src de l'élément

Explication détaillée des méthodes de base d'exploitation du DOM HTML avec des connaissances JavaScript_Basic

Exemple

Explication avec exemples :

<!DOCTYPE html>
<html>
<body>

<img  id="image" src="smiley.gif" alt="Explication détaillée des méthodes de base d'exploitation du DOM HTML avec des connaissances JavaScript_Basic" >

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

Copier après la connexion

Le document HTML ci-dessus contient un élément Explication détaillée des méthodes de base d'exploitation du DOM HTML avec des connaissances JavaScript_Basic avec id="image"