1.GetElementsByName (): Name erhalten.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ `
Beispiel:
<p name = "pn"> Hallo </p> <p name = "pn"> hello </p> <p name = "pn"> Hallo </p> <script> Funktion getName () {var count = document.getElementsByname ("pn"); alert (count.length); var p = count [2]; P.innerhtml = "Welt"; } </script>Ergebnisse: Die Schnittstelle zeichnet drei Helloes aus, begleitet von einer Eingabeaufforderung "3". Wenn Sie auf OK klicken, wird der in der Schnittstelle angezeigte Inhalt Hallo Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2.GetElementsByTagName (): Holen Sie sich das Element.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel
<p> Hallo </p> <p> Hallo </p> <p> Hallo </p> <Script> Funktion getName () {var count = document.getElementsByTagName ("P"); alert (count.length); var p = count [2]; P.innerhtml = "Welt"; } </script>Ergebnisse: Die Schnittstelle zeichnet drei Helloes aus, begleitet von einer Eingabeaufforderung "3". Wenn Sie auf OK klicken, wird der in der Schnittstelle angezeigte Inhalt Hallo Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.GetAttribute (): Elementattribute abrufen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel
<a id = "aid"> </a> <script> Funktion getattr1 () {var Anode = document.getElementById ("Aid"); var attr = anode.getAttribute ("id"); Alert ("A's ID ist:"+attr); } function getattr2 () {var anode = document.getElementById ("aid"); var attr = anode.getAttribute ("title"); Alert ("A's Titelinhalt ist:"+attr); } getattr1 (); getattr2 (); </script>Ergebnis: Die Eingabeaufforderung Box "A's ID ist: Hilfe". Nachdem Sie auf OK geklickt haben, lautet das Eingabeaufforderungfeld "A's Title Inhalt: Holen Sie sich das Tag -Attribut eines".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.SetatTribute () legt Elementattribute fest.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel
<a id = "Aid2"> Aid2 </a> <Script> Funktion setAttr () {var Anode = document.getElementById ("Aid2"); Anode.SetatTribute ("Titel", "Dynamische Einstellung eines Titelattributs"); var attr = anode.getAttribute ("title"); alert ("Dynamische Einstellung des Titelwerts ist:"+attr); } setAttr (); </script>Ergebnis: Das Eingabeaufforderung Box "Dynamic Setting Title Value ist: Dynamisch die Titeleigenschaft eines Popups festlegen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.Childnodes (): Zugriff auf Kinderknoten.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <script> Funktion getChildnode () {var childnode = document.getElementsByTagName ("ul") [0] .Childnodes; Alert (childnode.length); Alert (Childnode [0] .nodetype); } getChildnode (); </script>Ergebnis: Die Schnittstelle druckt das Dialogfeld "3" auf .1.2.3 und drückt dann OK, um aufzutauchen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.Parentnode (): Zugriff auf den übergeordneten Knoten.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel
<div> <p id = "pid"> </p> </div> <skript> Funktion getParentNode () {var document = document.getElementById ("pid"); alert (div.parentnode.nodename); } getParentnode (); </script>Ergebnis: Eine Eingabeaufforderung Box wird angezeigt: Div.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.Createelement (): Elementknoten erstellen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel:
<Script> Funktion createNode () {var body = document.body; var input = document.createelement ("Eingabe"); input.type = "button"; input.Value = "Taste"; Body.AppendChild (Eingabe); // Node} createNode () einfügen; </script>Ergebnis: Eine Schaltfläche wird angezeigt.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8. CreateTextNode (): Textknoten erstellen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel:
<Script> Funktion createNode () {var element = document.createelement ("div"); element.className = "message"; var textnode = document.createTextNode ("Hallo Welt!"); Element.AppendChild (TextNode); document.body.Appendchild (Element); } createNode (); </script>Codeanalyse: Dieses Beispiel erstellt ein neues <div> -Element und gibt ein Klassenattribut mit einem Wert von "Nachricht" an. Dann wird ein weiterer Textknoten erstellt und dem zuvor erstellten Element hinzugefügt. Der letzte Schritt besteht darin, dieses Element dem <Body> -Element im Dokument hinzuzufügen, damit Sie die neu erstellten Elemente und Textknoten im Browser sehen können.
Ergebnis: Die Seite zeigt Hello World.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.InsertBefore (): Knoten einfügen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel
<div id = "div"> <p id = "pid"> pelement </p> </div> <script> Funktion addnode () {var div = document.getElementById ("div"); var node = document.getElementById ("pid"); var newnode = document.createelement ("p"); newnode.innerhtml = "Dynamisches Einfügen eines P -Elements"; div.insertBefore (NewNode, Knoten); } addnode (); </script>Ergebnis: Die Schnittstelle druckt aus: Dynamisch ein P -Element einfügen
P -Element
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10.Removechild (): Löschen Sie den Knoten.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel
<div id = "div"> <p id = "pid"> pelement </p> </div> <script> Funktion removenode () {var div = document.getElementById ("div"); var p = div.removechild (div.childnodes [1]); } removenode (); </script>Ergebnis: Die Schnittstelle zeigt nichts.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.Offseteight: Webseitengröße
12.ScrollHeight: Webseitengröße
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Beispiel:
<Script> Funktion getSize () {var width = document.documentElement.offsetwidth || document.body.OffsetWidth; // Kompatibilitätsprobleme var height = document.documentElement.offseteight || document.body.offseteight; Alarm (Breite+","+Höhe); } getSize (); </script>Ergebnisse zeigen:
Dieser Artikel führt hauptsächlich JS DOM vor, um HTML -Elemente zu kontrollieren. Der Inhalt des Artikels enthält hauptsächlich DOM, HTML usw. Der Artikel stammt aus dem Internet. Weitere Informationen finden Sie darauf.