So verwenden Sie DOM in JS zur Steuerung von HTML-Elementen

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von DOM zur Steuerung von HTML-Elementen in JS vorgestellt. Freunde, die es benötigen, können darauf verweisen

1.getElementsByName(): Holen Sie sich den Namen.

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

Beispiel:

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

Ergebnis: Die Benutzeroberfläche druckt drei Hallo zusammen mit einem Eingabeaufforderungsfeld „3“. Wenn auf „OK“ geklickt wird, ändert sich der auf der Benutzeroberfläche angezeigte Inhalt zu „Hallo, hallo Welt“

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

2.getElementsByTagName(): Elemente abrufen.

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

Beispiel

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

Ergebnis: Die Benutzeroberfläche druckt drei Hallo zusammen mit einem Eingabeaufforderungsfeld „3“. Wenn auf „OK“ geklickt wird, ändert sich der auf der Benutzeroberfläche angezeigte Inhalt zu „Hallo, hallo Welt“

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

3.getAttribute(): Elementattribute abrufen.

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

Beispiel

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

Ergebnis: Es erscheint ein Eingabeaufforderungsfeld „Die ID eines ist: Hilfe“. Nachdem Sie auf „OK“ geklickt haben, erscheint ein Eingabeaufforderungsfeld „Der Titelinhalt eines ist:“. Holen Sie sich das Label-Attribut von a" .

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute() Festlegen von Elementeigenschaften.

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

Beispiel

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

Ergebnis: Es erscheint ein Eingabeaufforderungsfeld „Der dynamisch festgelegte Titelwert lautet: Das Titelattribut von a dynamisch festlegen“.

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

5.childNodes(): Auf untergeordnete Knoten zugreifen.

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

Beispiel

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

Ergebnis: Die Schnittstelle druckt .1 .2 .3 und ein Dialogfeld „3“ erscheint. Nach dem Drücken von „OK“ erscheint „1“.

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

6.parentNode(): Greifen Sie auf den übergeordneten Knoten zu.

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

Beispiel

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

Ergebnis: Popup-Eingabeaufforderungsfeld: p.

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

7.createElement(): Elementknoten erstellen.

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

Beispiel:

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

Ergebnis: Eine Schaltfläche erscheint.

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

8.createTextNode(): Erstellt einen Textknoten.

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

Beispiel:

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

Codeanalyse: Dieses Beispiel erstellt ein neues e388a4556c0f65e1904146cc1a846bee-Element und weist ihm ein Klassenattribut mit dem Wert „message“ zu. Anschließend wird ein weiterer Textknoten erstellt und dem zuvor erstellten Element hinzugefügt. Der letzte Schritt besteht darin, dieses Element zum 6c04bd5ca3fcae76e30b72ad730ca86d-Element im Dokument hinzuzufügen, damit die neu erstellten Elemente und Textknoten im Browser sichtbar sind.

Ergebnis: Auf der Seite wird „Hallo Welt“ angezeigt.

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

9.insertBefore(): Knoten einfügen.

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

Beispiel

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

Ergebnis: Die Schnittstelle gibt Folgendes aus: Dynamisch ein p-Element einfügen

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

10.removeChild(): Den Knoten löschen.

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

Beispiel

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

Ergebnis: Die Schnittstelle zeigt nichts an.

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

11.offsetHeight :Webseitengröße

12.scrollHeight: Webseitengröße

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

Beispiel:

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

Ergebnis anzeigen:

Das Obige ist das Ich hoffe, dass der gesamte Inhalt dieses Artikels zum Lernen aller beiträgt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So zeigen Sie JSON-Daten in HTML an

Das obige ist der detaillierte Inhalt vonSo verwenden Sie DOM in JS zur Steuerung von HTML-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!