In JavaScript werden häufig Dokumentenelemente erhalten, bei denen das Modell des HTML -Dokumentobjektmodells englische Abkürzung ist. Das Dokumentobjektmodell für HTML basiert auf der Browser -Programmierung. HTML DOM definiert eine Reihe von Standardobjekten, die für HTML verwendet werden, sowie Standardmethoden zum Zugriff auf und zur Verarbeitung von HTML -Dokumenten.
Durch das DOM können alle HTML -Elemente zusammen mit dem von ihnen enthaltenen Text und Eigenschaften zugegriffen werden. Der Inhalt kann geändert und gelöscht werden und neue Elemente erstellt werden. HTML DOM ist plattformunabhängig und Programmiersprache. Es kann von jeder Programmiersprache wie Java, JavaScript und VBScript verwendet werden.
Childnodes gibt das Array aller untergeordneten Elemente des aktuellen Elements zurück, Firschild gibt das erste niedrigere untergeordnete Element des aktuellen Elements zurück, LastChild gibt das letzte untergeordnete Element des aktuellen Elements zurück, Nextsibling gibt das Element unmittelbar nach dem aktuellen Element zurück, NodeValue spezifiziert das Tabellenelement, und das Lese-/Schreib -Attribut -Attribut -Attribut -Attribut -Attribut -Element.
document.getElementById ist ein Element in dem Dokument, das über einen bestimmten eindeutigen ID -Attributwert verfügt. document.getElementByTagName gibt eine Reihe von untergeordneten Elementen mit angegebenem Tagname im aktuellen Element zurück. HaSchildnodes () gibt einen booleschen Wert zurück, der angibt, ob das Element unter Kinderelementen enthält. Dokument.GetElementByCClassName soll das Klassennamenelement im Dokument einholen. document.getElementsByName (ElementName): Den Knoten durch den Namen erhalten. Aus dem Namen ist ersichtlich, dass diese Methode nicht ein Knotenelement zurückgibt, sondern ein Array von Knoten mit demselben Namen. Anschließend können wir das Attribut des Knotens durchlaufen, um eine Schleife zu erhalten, um festzustellen, ob es sich um den erforderlichen Knoten handelt.
Die Breite des Browsers, den Sie erhalten möchten, lautet wie folgt:
Die sichtbare Flächenbreite der Webseite: Dokument.body.Clientwidth
Die sichtbare Höhe der Webseite: Dokument.Body.ClientHeight
Die sichtbare Flächenbreite der Webseite: document.body.Offsetwidth (einschließlich der Breite der Kantenlinie)
Die sichtbare Höhe der Webseite: Dokument.Body.offseteight (einschließlich der Breite der Kantenlinie)
Volltextbreite der Webseite: Dokument.body.Scrollwidth
Volltext der Webseite: Dokument.body.ScrollHeight
Die Webseite ist auf hoher Ebene eingeführt: document.body.scrolltop
Links von der Webseite, die eingeführt wurde: document.body.scrollleft
Im Hauptteil der Webseite: Fenster.Screentop
Links vom Haupttext der Webseite: Fenster.Screenleft
Auflösung der Hochbildschirme: window.screen.hohthy
Breite der Bildschirmauflösung: Fenster.Screen.width
Bildschirm verfügbarer Arbeitsbereich Höhe: Fenster.Screen.availHeight
Bildschirm verfügbar Arbeitsbereich Breite: window.screen.availwidth
Lassen Sie uns mit einer E-Commerce-Webseite ausführlich darüber sprechen:
<html> <kopf> <titels> </title> <style> *{Margin: 0; Polsterung: 0;} a {Textdekoration: Keine; Farbe: weiß;} a: hover {Farbe: rot;} ul, li, ol {Listenstil: Keine; Schriftgröße: 13px; Farbe: #fff; Zeilenhöhe: 27px;} img {Border: Keine;} img, eingeben, auswählen, textarae {vertikal-align: Middle} Körper {Breite: 1350px; Rand: 0 Auto; Schriftgröße: 12px;} ol li a {color: #fff;} #header {width: 1350px; Höhe: 37px; Hintergrund: URL (122.png) No-Repeat; Border-Bottom: 1PX Solid #C9C9C9; Zeilenhöhe: 37px;} #main {width: 1350px; Höhe: 504px; Hintergrund: #f8f8;} #left {width: 182px; Höhe: 500px; Hintergrund:#3d4e64; Border-Radius: 3px; float: links;} #lunbo {width: 1160px; Höhe: 300px; Hintergrund:#f8f8; Grenzboden: 2PX Solid #666666; float: rechts; Rand: 0 Auto; Rand: 10px; Position: relativ;} #lunbo img {width: 1160px; Höhe: 300px; Anzeige: Keine; Position: absolut; Z-Index: 5; } ul {margin-links: 400px;} ul li {Listenstil: Keine; Grenze: 1PX Solid #000; Grenzradius: 50%; Breite: 18px; Höhe: 18px; Text-Align: Mitte; float: links; Randtop: 300px; Rand-Links: 10px; Z-Index: 15; } </style> </head> <body> <div id = "header"> <a href = "#"> <h3> Alle Produktkategorien </h3> </a> </div> <div id = "main"> <div id = "links"> <ol style = "margin-top: 12px; margin-lft: 14px; e-reader> </a> </p> <p> <a href = "#"> feuertabletten> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"#"> feuer Tablet> </a> </p> <p> <a href e-reader> </a> </li> <p> <a href = "#"> feuertablette> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"##"> </p> <p> <p> <p> <p> <p> <p> <p> <a <a <a <a href = "#"#"« <p> <a href = "#"> Fire Tablet> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> feuertablette> </a> </p> <p> <a <a href = "#" href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> feuertablette> </a> </p> <p> <a href = "#"> feuer tablet> </p> <p> <p> <p> <p> <p> <a href = "#"#"> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> feuertablette> </a> </p> <p> <a href = "#"> Kindle E-Reader> </a> </li> <p> <a href = "#"#"#"#"#"#"#"#" e-reader> </a> </li> <p> <a href = "#"> feuertablette> </a> </p> </ol> </div> <div id = "lunbo"> <img src = "1.png"> <img Src = "2.png"> <img Src = "3.png"> <img Src = "> <iMg src =" 3.png " src = "5.png"> <ul> <li style = "Hintergrund: rot" onmouseover = "jin (0)" onmouseout = "chu (0)"> 1 </li> <li onmouseover = "jin (1)" Onmousout = "chu (1)"> 2 </li> <li li onmouNoUt = "jin (2). <li onmouseover="jin(3)"onmouseout="chu(3)">4</li> <li onmouseover="jin(4)"onmouseout="chu(4)">5</li> </ul> </div> <div id="footer"><img src="121.gif"/></div> </div> </body> <script> p = document.getElementsByTagName ("img"); l = document.getElementsByTagName ("li"); m = 0 onload = function () {s = setInterval ("kaishi ()", 850)} Funktion kaishi () {für (var i = 0; i <5; i ++) {p [i] .Style.display = "keine"; l [i] .style.background = "White"} m ++; if (m> = 5) {m = 0;} p [m] .Style.display = "block"; l [m] .style.background = "rot"} lunbo.onmouseover = function () {ClearInterval (s);} lunbo.onmouseout = function () {s = setInterval ("kaishi ()", 850); P [i] .Style.Display = "Keine"; l [i] .style.background = "White"} m ++; if (m> = 5) {m = 0;} p [Hand] .Style.Display = "Block"; l [Hand] .style.background = "rot"} Funktion chu (Hand) {m = Hand; } </script> </html>Der obige Artikel JS betreibt DOM -Elemente und erhält die Browserhöhe und die Breite, die der Inhalt ist, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.