Comment utiliser DOM dans JS pour contrôler les éléments HTML

Cet article présente principalement les informations pertinentes sur l'utilisation de DOM pour contrôler les éléments HTML dans JS. Les amis qui en ont besoin peuvent s'y référer

1.getElementsByName() : Obtenez le nom.

~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

Exemple :

<p name="pn">hello</p>
   <p name="pn">hello</p>
   <p name="pn">hello</p>
   <script>
       function getName(){
                  var count=document.getElementsByName("pn");
                  alert(count.length);
                  var p=count[2];
                  p.innerHTML="world";
          }
   </script>

Résultat : L'interface imprime trois bonjour, accompagnés d'une boîte d'invite "3". Lorsque l'on clique sur OK, le contenu affiché sur l'interface devient bonjour bonjour tout le monde

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ··

2.getElementsByTagName() : récupère des éléments.

~~~~~~~~~~~~~~~~~~~~~~~~~

Exemple

<p>hello</p>
   <p>hello</p>
   <p>hello</p>
   <script>
       function getName(){
                  var count=document.getElementsByTagName("p");
                  alert(count.length);
                  var p=count[2];
                  p.innerHTML="world";
          }
   </script>

Résultat : L'interface imprime trois bonjour, accompagnés d'une boîte d'invite "3". Lorsque vous cliquez sur OK, le contenu affiché sur l'interface devient bonjour bonjour tout le monde

. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~

3.getAttribute() : Récupère les attributs de l'élément.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Exemple

<a id="aid" title="得到a的标签属性"></a>
   <script>
           function getAttr1(){
               var anode=document.getElementById("aid");
               var attr=anode.getAttribute("id");
               alert("a的ID是:"+attr);
            }
           function getAttr2(){
              var anode=document.getElementById("aid");
              var attr=anode.getAttribute("title");
              alert("a的title内容是："+attr);
           }
            getAttr1();
            getAttr2();
  </script>

Résultat : Une boîte d'invite apparaît "L'ID d'un est : aide". Après avoir cliqué sur OK, une boîte d'invite apparaît "Le contenu du titre d'un". c'est : obtenir le label d'une "propriété".

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute() définition des attributs de l'élément.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Exemple

<a id="aid2">aid2</a> 
   <script>
        function setAttr(){
           var anode=document.getElementById("aid2");
           anode.setAttribute("title","动态设置a的title属性");
           var attr=anode.getAttribute("title");
           alert("动态设置的title值为："+attr);
       }
       setAttr();
   </script>

Résultat : Une boîte de dialogue apparaît "La valeur du titre définie dynamiquement est : Définissez dynamiquement l'attribut de titre d'un".

~~~~~~~~~~~~~~~~~~~~~~~~~~

5.childNodes() : accédez aux nœuds enfants.

~~~~~~~~~~~~~~~~~~~~~~~~··

Exemple

<ul><li>1</li><li>2</li><li>3</li></ul>
   <script>
           function getChildNode(){
                var childnode=document.getElementsByTagName("ul")[0].childNodes;
                alert(childnode.length);
                alert(childnode[0].nodeType);
           }
          getChildNode();
  </script>

Résultat : L'interface imprime .1 .2 .3 et la boîte de dialogue "3" apparaît. Après avoir appuyé sur OK, "1" apparaît.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

6.parentNode() : accédez au nœud parent.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

Exemple

<p>
        <p id="pid"></p>
   </p>
   <script>
        function getParentNode(){
            var p=document.getElementById("pid");
            alert(p.parentNode.nodeName);
        }
       getParentNode();
  </script>

Résultat : boîte d'invite contextuelle : p.

~~~~~~~~~~~~~~~~~~ ~ ~~~~~~~~~~~~~~

7.createElement() : Créez un nœud d'élément.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Exemple :

 <script>
       function createNode(){
             var body=document.body;
             var input=document.createElement("input");
             input.type="button";
             input.value="按钮";
             body.appendChild(input);//插入节点
        }
         createNode();
 </script>

Résultat : Un bouton apparaît.

~~~~~~~~~~~~~~~~~~~~~~~~~

8.createTextNode() : Créez un nœud de texte.

~~~~~~~~~~~~~~~~~~~~~~~~~~

Exemple :

    <script>
        function createNode(){
              var element = document.createElement("p");
              element.className = "message";
              var textNode = document.createTextNode("Hello world!");
              element.appendChild(textNode);
              document.body.appendChild(element);
        }
      createNode();
   </script>

Analyse du code : cet exemple crée un nouvel élément e388a4556c0f65e1904146cc1a846bee et lui attribue un attribut de classe avec la valeur "message". Ensuite, un autre nœud de texte est créé et ajouté à l'élément créé précédemment. La dernière étape consiste à ajouter cet élément à l'élément 6c04bd5ca3fcae76e30b72ad730ca86d dans le document, afin que les éléments et nœuds de texte nouvellement créés soient visibles dans le navigateur.

Résultat : La page affiche bonjour tout le monde.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

9.insertBefore() : Insérer un nœud.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Exemple

<p id="p">
          <p id="pid">p元素</p>
    </p>
    <script>
        function addNode(){
             var p=document.getElementById("p");
             var node=document.getElementById("pid");
             var newnode=document.createElement("p");
             newnode.innerHTML="动态插入一个p元素";
             p.insertBefore(newnode,node);
        }
        addNode();
    </script>

Résultat : L'interface affiche : insertion dynamique d'un élément p

~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~

10.removeChild() : Supprimez le nœud.

~~~~~~~~~~~~~~~~~~~~~~~~~~·

Exemple

<p id="p">
          <p id="pid">p元素</p>
    </p>
    <script>
       function removeNode(){
               var p=document.getElementById("p");
               var p=p.removeChild(p.childNodes[1]);
        }
      removeNode();
   </script>

Résultat : L'interface n'affiche rien.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

11.offsetHeight :Taille de la page Web

12.scrollHeight : Taille de la page Web

~~~~~~~~~~~~~~~~~~~~~~~~~ ·

Exemple :

  <script>
      function getSize(){
          var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题
          var height=document.documentElement.offsetHeight||document.body.offsetHeight;
          alert(width+","+height);
      }
      getSize();
 </script>

Résultat d'affichage :

Ce qui précède est le contenu de cet article. Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment afficher les données JSON en HTML

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!