في JavaScript ، غالبًا ما يتم الحصول على عناصر المستندات ، وهو اختصار اللغة الإنجليزية لنموذج كائن مستند HTML. يعتمد نموذج كائن المستند لـ HTML على برمجة المتصفح. يحدد HTML DOM سلسلة من الكائنات القياسية المستخدمة في HTML ، بالإضافة إلى الطرق القياسية للوصول إلى مستندات HTML ومعالجتها.
من خلال DOM ، يمكن الوصول إلى جميع عناصر HTML ، إلى جانب النص والخصائص التي تحتوي عليها. يمكن تعديل المحتويات وحذفها ، ويمكن إنشاء عناصر جديدة. HTML DOM مستقلة عن النظام الأساسي ولغة البرمجة. يمكن استخدامه بواسطة أي لغة برمجة مثل Java و JavaScript و VBScript.
تُرجع childnodes صفيف جميع عناصر الأطفال للعنصر الحالي ، ويعيد Firschild أول عنصر الطفل السفلي للعنصر الحالي ، ويعيد LastChild العنصر الأخير للطفل للعنصر الحالي ، ويعيد Nextsibling العنصر الذي يتبع العنصر الحالي على الفور العنصر السابق على الفور المقدمة على الفور.
document.getElementById هو عنصر في المستند الذي يحتوي على قيمة سمة معرف فريدة محددة. document.getElementByTagName إرجاع مجموعة من عناصر الأطفال مع tagname المحددة في العنصر الحالي. Haschildnodes () يعيد قيمة منطقية تشير إلى ما إذا كان العنصر لديه عناصر الطفل. document.getElementByCclassName هو الحصول على عنصر اسم الفصل في المستند. document.getElementsByName (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.hight
عرض دقة الشاشة: window.screen.width
شاشة مساحة العمل المتاحة: window.screen.availheight
عرض مساحة العمل المتاح: window.screen.availwidth
دعنا نتحدث عن ذلك بالتفصيل باستخدام صفحة ويب التجارة الإلكترونية:
<html> <head> <title> </title> <style> *{margin: 0 ؛ Padding: 0 ؛} a {text-decoration: none ؛ اللون: أبيض ؛} a: hover {color: red ؛} ul ، li ، ol {list-style: none ؛ حجم الخط: 13px ؛ اللون: #fff ؛ خط الارتفاع: 27px ؛} img {border: none ؛} img ، input ، select ، textarae {allign align: middle} body {width: 1350px ؛ الهامش: 0 Auto ؛ حجم الخط: 12px ؛} ol li a {color: #fff ؛} #Header {width: 1350px ؛ الارتفاع: 37 بكسل ؛ الخلفية: URL (122.png) عدم التكرار ؛ Border-Bottom: 1PX Solid #C9C9C9 ؛ Line-Height: 37px ؛} #main {width: 1350px ؛ الارتفاع: 504px ؛ الخلفية: #f8f8 ؛} #Left {width: 182px ؛ الارتفاع: 500 بكسل ؛ الخلفية:#3d4e64 ؛ الحدود الحدودية: 3px ؛ تعويم: اليسار ؛} #lunbo {width: 1160px ؛ الارتفاع: 300 بكسل ؛ الخلفية:#f8f8 ؛ Border-Bottom: 2px Solid #666666 ؛ تعويم: صحيح. الهامش: 0 Auto ؛ الهامش: 10 بكسل ؛ الموضع: النسبية ؛} #lunbo img {width: 1160px ؛ الارتفاع: 300 بكسل ؛ العرض: لا شيء ؛ الموقف: مطلق ؛ Z-index: 5 ؛ } ul {margin-left: 400px ؛} ul li {list-style: none ؛ الحدود: 1 بكسل الصلبة #000 ؛ الحدود الحدودية: 50 ٪ ؛ العرض: 18 بكسل ؛ الارتفاع: 18 بكسل ؛ محاذاة النص: المركز ؛ تعويم: اليسار. الهامش: 300 بكسل ؛ الهامش اليساري: 10px ؛ Z-index: 15 ؛ } </style> </head> <body> <div id = "header"> <a href = "#"> <h3> جميع فئات المنتجات </h3> </a> </div> <div id = "main" 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 = "#"> fire tablet> </a> </p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#" <p> <a href = "#"> fire tablet> </a> </p> <p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#" href = "#"> fire tablet> </a> </p> <p> <a href = "#"> fire tablet> </a> </p> <p> <a href = "#" tablet> </a> </p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#" <p> <a href = "#"> tablet fire> </a> </p> <p> <p> <a href = "#"> tablet fire> </a> </p> <p> <a href = "#"> fire tablet> </a> </p> <p> <a href = "#" tablet> </a> </p> <p> <a href = "#"> kindle e-reader> </a> </li> <p> <a href = "#"> fire tablet> </a> </p> <p> <p> <a href = "#" e-reader> </a> </li> <p> <a href = "#"> tablet fire> </a> </p> </ol> </liv> <div id = "lunbo"> <img src = "1.png"> <img src = "2.png"> <img src = "3.png" src = "5.png"> <ul> <li style = "background: red" onMouseover = "jin (0)" onMouseout = "Chu (0)"> 1 </li> <li onMouseover = "Jin (1)" onMouseout = "Chu (1)" <li onmouseover = "jin (3)" onMouseout = "chu (3)"> 4 </li> <li onMouseover = "Jin (4) p = document.getElementSbyTagName ("img") ؛ l = document.getElementSbyTagname ("li") ؛ m = 0 onload = function () {s = setInterval ("kaishi ()" ، 850)} وظيفة 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] 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 = "red"} function chu (hand) {m = hand ؛ } </script> </html>تدير المقالة أعلاه JS عناصر DOM وتحصل على ارتفاع المتصفح وعرضها هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.