Introduction à l'objet document en js-js tutoriel-php.cn

Introduction à l'objet document en js

PHPz

Libérer： 2024-02-18 13:06:07

original

760 Les gens l'ont consulté

Introduction à lobjet document en js

Introduction à l'objet Document en JavaScript et exemples de code

Introduction :
En JavaScript, l'objet Document est une interface qui représente l'intégralité du document HTML. Il fournit des méthodes d'accès et de fonctionnement au document HTML. Cet article présentera les méthodes et propriétés courantes de l'objet Document et fournira quelques exemples de code spécifiques.

Méthode getElementById
getElementById est une méthode importante de l'objet Document, utilisée pour obtenir le nœud d'élément correspondant en fonction de l'attribut id de l'élément spécifié. Des modifications dynamiques de la page peuvent être obtenues en modifiant les propriétés ou le contenu des nœuds d'éléments. Voici un exemple de code spécifique :

<html>
<body>
  <h1 id="myHeading">Hello, World!</h1>
  <script>
    var heading = document.getElementById("myHeading");
    heading.innerHTML = "Hello, JavaScript!";
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, le nœud d'élément avec l'identifiant "myHeading" est obtenu via la méthode getElementById et son contenu est modifié en "Bonjour, JavaScript à l'aide de l'attribut innerHTML !"

Méthode getElementsByTagName
La méthode getElementsByTagName est utilisée pour obtenir tous les nœuds d'élément du nom de balise spécifié et renvoyer un objet NodeList. Vous pouvez utiliser la propriété length de l'objet NodeList pour obtenir le nombre d'éléments correspondants et accéder à chaque élément par index. Voici un exemple de code :

<html>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <script>
    var listItems = document.getElementsByTagName("li");
    for (var i = 0; i < listItems.length; i++) {
      listItems[i].style.color = "red";
    }
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, tous les nœuds d'éléments li sont obtenus via la méthode getElementsByTagName et la couleur du texte de chaque élément li est modifiée en rouge via une boucle for.

Méthodes createElement et appendChild
La méthode createElement est utilisée pour créer un nouveau nœud d'élément, tandis que la méthode appendChild ajoute le nouveau nœud d'élément au nœud parent spécifié. Voici un exemple de code :

<html>
<body>
  <div id="myDiv"></div>
  <script>
    var newElement = document.createElement("p");
    newElement.innerHTML = "This is a new paragraph.";
    document.getElementById("myDiv").appendChild(newElement);
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, un nouveau nœud d'élément p est créé via la méthode createElement et ajouté à l'élément div avec l'identifiant "myDiv" à l'aide de la méthode appendChild.

Résumé :
Cet article présente certaines méthodes et propriétés courantes des objets Document en JavaScript, notamment getElementById, getElementsByTagName, createElement et appendChild. Grâce à ces méthodes et propriétés, vous pouvez facilement accéder et utiliser les nœuds d'éléments des documents HTML. J'espère que les exemples de code fournis dans cet article seront utiles aux lecteurs qui apprennent et utilisent JavaScript.

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!