ใน JavaScript องค์ประกอบเอกสารมักจะได้รับซึ่งเป็นตัวย่อภาษาอังกฤษของโมเดลวัตถุเอกสาร HTML โมเดลวัตถุเอกสารสำหรับ HTML ขึ้นอยู่กับการเขียนโปรแกรมเบราว์เซอร์ HTML DOM กำหนดชุดของวัตถุมาตรฐานที่ใช้สำหรับ HTML รวมถึงวิธีมาตรฐานสำหรับการเข้าถึงและประมวลผลเอกสาร HTML
ผ่าน DOM องค์ประกอบ HTML ทั้งหมดสามารถเข้าถึงได้พร้อมกับข้อความและคุณสมบัติที่มีอยู่ เนื้อหาสามารถแก้ไขและลบได้และสามารถสร้างองค์ประกอบใหม่ได้ HTML DOM เป็นภาษาที่ไม่ขึ้นกับแพลตฟอร์มและการเขียนโปรแกรม สามารถใช้งานได้โดยภาษาการเขียนโปรแกรมใด ๆ เช่น Java, JavaScript และ VBScript
ChildNodes ส่งคืนอาร์เรย์ขององค์ประกอบเด็กทั้งหมดขององค์ประกอบปัจจุบัน Firschild ส่งคืนองค์ประกอบลูกล่างแรกขององค์ประกอบปัจจุบัน LastChild ส่งคืนองค์ประกอบลูกสุดท้ายขององค์ประกอบปัจจุบัน Nextsibling ส่งคืนองค์ประกอบทันทีหลังจากองค์ประกอบปัจจุบัน
document.getElementById เป็นองค์ประกอบในเอกสารที่มีค่าแอตทริบิวต์ ID ที่ไม่ซ้ำกันที่ระบุ document.getElementByTagname ส่งคืนอาร์เรย์ขององค์ประกอบเด็กด้วย tagname ที่ระบุในองค์ประกอบปัจจุบัน HaschildNodes () ส่งคืนค่าบูลีนระบุว่าองค์ประกอบมีองค์ประกอบลูกหรือไม่ document.getElementByCclassName คือการรับองค์ประกอบชื่อคลาสในเอกสาร document.getElementByName (ElementName): รับโหนดผ่านชื่อ จากชื่อจะเห็นได้ว่าวิธีนี้ส่งคืนองค์ประกอบโหนด แต่เป็นอาร์เรย์ของโหนดที่มีชื่อเดียวกัน จากนั้นเราสามารถวนผ่านแอตทริบิวต์ของโหนดเพื่อรับลูปเพื่อตรวจสอบว่าเป็นโหนดที่ต้องการหรือไม่
ความกว้างของเบราว์เซอร์ที่คุณต้องการได้รับดังนี้:
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientwidth
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientheight
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetWidth (รวมถึงความกว้างของเส้นขอบ)
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetheight (รวมถึงความกว้างของเส้นขอบ)
ความกว้างข้อความแบบเต็มของหน้าเว็บ: document.body.scrollwidth
ข้อความเต็มของหน้าเว็บ: document.body.scrollheight
หน้าเว็บจะเปิดตัวในระดับสูง: document.body.scrolltop
ด้านซ้ายของหน้าเว็บที่กำลังเปิดตัว: document.body.scrollleft
ในส่วนหลักของหน้าเว็บ: window.screentop
ด้านซ้ายของข้อความหลักของหน้าเว็บ: window.screenleft
ความละเอียดหน้าจอสูง: window.screen.height
ความกว้างของความละเอียดหน้าจอ: window.screen.width
หน้าจอความสูงของพื้นที่ทำงาน: window.screen.availheight
หน้าจอความกว้างของพื้นที่ทำงาน: window.screen.availwidth
มาพูดถึงรายละเอียดโดยใช้หน้าเว็บอีคอมเมิร์ซ:
<html> <head> <title> </title> <style> *{margin: 0; Padding: 0;} a {การตกแต่งข้อความ: ไม่มี; สี: สีขาว;} a: hover {color: red;} ul, li, ol {list-style: none; ขนาดตัวอักษร: 13px; สี: #FFF; LINE-HEIGHT: 27PX;} IMG {Border: None;} IMG, อินพุต, Select, Textarae {แนวตั้ง-แนว: Middle} Body {Width: 1350px; มาร์จิ้น: 0 อัตโนมัติ; FONT-SIZE: 12px;} ol li a {color: #fff;} #header {width: 1350px; ความสูง: 37px; ความเป็นมา: URL (122.png) ไม่ทำซ้ำ; ขอบด้านล่าง: 1px Solid #C9C9C9; Line-Height: 37px;} #Main {Width: 1350px; ความสูง: 504px; พื้นหลัง: #f8f8;} #left {width: 182px; ความสูง: 500px; ความเป็นมา:#3D4E64; แนวชายแดน: 3px; float: ซ้าย;} #lunbo {width: 1160px; ความสูง: 300px; ความเป็นมา:#F8F8; ขอบด้านล่าง: 2px Solid #666666; ลอย: ขวา; มาร์จิ้น: 0 อัตโนมัติ; ระยะขอบด้านบน: 10px; ตำแหน่ง: ญาติ;} #lunbo img {width: 1160px; ความสูง: 300px; แสดง: ไม่มี; ตำแหน่ง: สัมบูรณ์; z-index: 5; } ul {margin-left: 400px;} ul li {list-style: none; ชายแดน: 1px Solid #000; แนวชายแดน: 50%; ความกว้าง: 18px; ความสูง: 18px; TEXT-ALIGN: CENTER; ลอย: ซ้าย; ระยะขอบด้านบน: 300px; ขอบซ้าย: 10px; z-index: 15; } </style> </head> <body> <div id = "header"> <a href = "#"> <h3> หมวดหมู่ผลิตภัณฑ์ทั้งหมด </h3> </a> </div> <div id = "main"> <div id = "left"> <ol style = "margin-top: 12px; e-reader> </a> </p> <p> <a href = "#"> แท็บเล็ตดับเพลิง> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> แท็บเล็ต e-reader> </a> </li> <p> <a href = "#"> แท็บเล็ตดับเพลิง> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> แท็บเล็ตดับเพลิง> <p> <a href = "#"> แท็บเล็ตไฟ> </a> </p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#"> แท็บเล็ตไฟ> </a> </p> <p> <a href = "#" href = "#"> แท็บเล็ตดับเพลิง> </a> </p> <p> <a href = "#"> แท็บเล็ตไฟ> </a> </p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#" แท็บเล็ต> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> แท็บเล็ตไฟ> </a> </p> <p> <a href = "#"> แท็บเล็ตดับเพลิง> </a> </p> <p> <a href = "#"> แท็บเล็ตดับเพลิง> </a> </p> <p> <a href = "#"> แท็บเล็ตดับเพลิง> </a> </p> <p> <a href = "#"> แท็บเล็ตไฟ> </a> </p> <p> <p> <a href = "#" แท็บเล็ต> </a> </p> <p> <a href = "#"> Kindle e-reader> </a> </li> <p> <a href = "#"> แท็บเล็ตไฟ> </a> </p> <p> <a href = "#" e-reader> </a> </li> <p> <a href = "#"> แท็บเล็ตดับเพลิง> </a> </p> </ol> </div> <div id = "lunbo"> <img src = "1.png"> <img src = "2.png"> src = "5.png"> <ul> <li style = "พื้นหลัง: สีแดง" onMouseOver = "jin (0)" onmouseout = "chu (0)"> 1 </li> <li onmouseover = "jin (1)" onMouseOut = "chu (1)"> 2 </li> <li onMouseOver = "jin (3)" onMouseOut = "chu (3)"> 4 </li> <li onmouseover = "jin (4)" onmouseout = "chu (4)"> 5 </li> </ul> </div> p = document.getElementsByTagname ("IMG"); l = document.getElementsByTagname ("li"); m = 0 onload = function () {s = setInterval ("kaishi ()", 850)} ฟังก์ชัน kaishi () {สำหรับ (var i = 0; i <5; i ++) {p [i] .style.display = "ไม่มี"; 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); l [i] .style.background = "White"} M ++; if (m> = 5) {m = 0;} p [hand] .style.display = "block"; l [hand] .style.background = "red"} ฟังก์ชั่น chu (มือ) {m = hand; } </script> </html>บทความข้างต้น JS ดำเนินการองค์ประกอบ DOM และรับความสูงและความกว้างของเบราว์เซอร์เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น