Dalam JavaScript, elemen dokumen dokumen sering diperoleh, yang merupakan singkatan bahasa Inggris dari model objek dokumen HTML. Model objek dokumen untuk HTML didasarkan pada pemrograman browser. HTML DOM mendefinisikan serangkaian objek standar yang digunakan untuk HTML, serta metode standar untuk mengakses dan memproses dokumen HTML.
Melalui DOM, semua elemen HTML dapat diakses, bersama dengan teks dan properti yang dikandungnya. Isi dapat dimodifikasi dan dihapus, dan elemen baru dapat dibuat. HTML DOM adalah bahasa platform-independen dan pemrograman. Ini dapat digunakan oleh bahasa pemrograman apa pun seperti Java, JavaScript, dan VBScript.
Childnodes Mengembalikan array dari semua elemen anak dari elemen saat ini, Firschild mengembalikan elemen anak yang lebih rendah pertama dari elemen saat ini, LastChild mengembalikan elemen anak terakhir dari elemen saat ini, NextSibling mengembalikan elemen segera setelah elemen saat ini, NODEVALUE menentukan elemen tabel sebelumnya, dan Atribut Baca/Tulis ParentNode menentukan node induk yang mewakili NODEVALUE.
Document.GetElementById adalah elemen dalam dokumen yang memiliki nilai atribut ID unik yang ditentukan. Document.getElementByTagname Mengembalikan array elemen anak dengan tagname yang ditentukan di elemen saat ini. haschildnodes () mengembalikan nilai boolean yang menunjukkan apakah elemen memiliki elemen anak. Document.GetElementByCclassName adalah untuk mendapatkan elemen nama kelas dalam dokumen. Document.GetElementsByName (ElementName): Dapatkan node melalui nama. Dari namanya, dapat dilihat bahwa metode ini mengembalikan bukan elemen simpul, tetapi array node dengan nama yang sama. Kemudian, kita dapat mengulangi atribut node untuk mendapatkan loop untuk menentukan apakah itu node yang diperlukan.
Lebar browser yang ingin Anda dapatkan adalah sebagai berikut:
Lebar area yang terlihat dari halaman web: document.body.clientwidth
Tinggi area yang terlihat dari halaman web: document.body.clientHeight
Lebar area yang terlihat dari halaman web: document.body.offsetwidth (termasuk lebar garis tepi)
Tinggi area yang terlihat dari halaman web: document.body.offsetHeight (termasuk lebar garis tepi)
Lebar teks lengkap dari halaman web: document.body.scrollwidth
Teks lengkap dari halaman web: document.body.scrollheight
Halaman web diluncurkan pada tingkat tinggi: document.body.scrolltop
Kiri halaman web sedang diluncurkan: document.body.scrollleft
Di bagian utama halaman web: window.screentop
Kiri teks utama halaman web: window.screenleft
Resolusi Layar Tinggi: Window.Screen.Height
Lebar resolusi layar: window.screen.width
Layar Tersedia Tinggi Ruang Kerja: Window.Screen.AvailHeight
Layar Tersedia Lebar Ruang Kerja: Window.Screen.availwidth
Mari kita bicarakan secara detail menggunakan halaman web e-commerce:
<html> <head> <title> </title> <tyle> *{margin: 0; padding: 0;} A {Text-Decoration: None; Color: white;} a: hover {color: red;} ul, li, ol {List-style: none; font-size: 13px; Warna: #fff; line-height: 27px;} img {border: none;} img, input, select, textarae {vertical-align: middle} body {width: 1350px; margin: 0 otomatis; font-size: 12px;} ol li a {color: #fff;} #header {width: 1350px; Tinggi: 37px; Latar Belakang: URL (122.png) No-Repeat; Border-Bottom: 1px Solid #C9C9C9; line-height: 37px;} #main {width: 1350px; Tinggi: 504px; latar belakang: #f8f8;} #left {width: 182px; Tinggi: 500px; Latar Belakang:#3D4E64; Border-Radius: 3px; float: left;} #lunbo {width: 1160px; Tinggi: 300px; Latar Belakang:#F8F8; Border-Bottom: 2px Solid #666666; float: benar; margin: 0 otomatis; margin-top: 10px; posisi: relatif;} #lunbo img {lebar: 1160px; Tinggi: 300px; Tampilan: Tidak Ada; Posisi: Absolute; z-index: 5; } ul {margin-left: 400px;} ul li {List-style: none; Perbatasan: 1px Solid #000; Border-Radius: 50%; Lebar: 18px; Tinggi: 18px; Teks-Align: tengah; float: kiri; margin-top: 300px; margin-kiri: 10px; z-index: 15; } </tyle> </head> <body> <v id = "header"> <a href = "#"> <h3> Semua kategori produk </h3> </a> </div> <div id = "main"> <div id = "kiri"> <ol style = "margin-top: 12px; margin-left: 14px;" e-reader> </a> </p> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> SIGET> </a> </p> <p> <a href = "#"> KICET> </a> </p> <p> <a href = "#"> KICAR e-reader> </a> </li> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#"> Fire tablet> </a> </li> <p> <a href = "#"> Fire tablet> </a> </p> <p> <a href = "#"> fire tablet> </a> </p> <p> <a href = "#"> fire tablet> </a> </p> <p> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> Kindle E </a> </p> <p> <a href = "#"> Kindle E. href = "#"> Tablet Fire> </a> </p> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> fire table> </a> <p> <p> <a href = "#"> fire tablet> </a> <p> <p> <a href = "#"#"> FICE> </a> <p> <p> Tablet> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> Fire tablet> </a> </p> <p> <a href = "#"> fire tablet> </a> </p> <p> <a href = "#"> fire tablet> </a> </p> <p> <p> <a href = "#"> Tablet Fire> </a> </p> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> fire tablet> </a> </a> <p> <a href = "#"> Kindle e-reader> <a> <p> <a href = "#"> Kindle e-reader> <a> <a> <a href = "#"> Kindle e-reader> <a> <a> Tablet> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <p> "Kindle e-reader> </a> </li> <p> <p> e-reader> </a> </li> <p> <a href = "#"> tablet fire> </a> </p> </l> </div> <div id = "lunbo"> <img src = "1.png"> <mg src = "2.png"> <img src = "3.png =" 2.png "> <img src =" 3.png " src = "5.png"> <ul> <li style = "latar belakang: merah" onmouseover = "jin (0)" onmouseout = "chu (0)"> 1 </li> <li onmouseover = "jin (1)" oNMouseout = "chu (1)"> 2 </Li> <Li OnMouseer = "Jin" (1) "> 2 </Li> <Li OnMouse =" Li (1) " <li onmouseover = "jin (3)" onmouseout = "chu (3)"> 4 </li> <li onmouseover = "jin (4)" onmouseout = "chu (4)"> 5 </li> </ul> </Div> <v ID = "footer"> <img SRC = "121.GIF" p = document.getElementsbyTagname ("img"); l = document.getElementsbyTagname ("li"); m = 0 onload = function () {s = setInterval ("kaishi ()", 850)} function kaishi () {for (var i = 0; i <5; i ++) {p [i] .style.display = "none"; l [i] .style.background = "white"} m ++; if (m> = 5) {m = 0;} p [m] .style.display = "block"; l [m] .style.background = "red"} lunbo.onmouseover = function () {clearInterval (s);} lunbo.onmouseout = function () {s = setInterval ("kaishi ()", 850);} function Jin (tangan) {for (var i = 0; i <) ", 850);} function Jin (hand) {for (var i = 0; i <)"); i+{i <5; p [i] .style.display = "none"; l [i] .style.background = "white"} m ++; if (m> = 5) {m = 0;} p [hand] .style.display = "block"; l [hand] .style.background = "merah"} fungsi chu (tangan) {m = tangan; } </script> </html>Artikel di atas JS mengoperasikan elemen DOM dan memperoleh tinggi dan lebar browser adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.