องค์ประกอบ JS
เราทุกคนรู้ว่า javascript มีสามส่วน: ECMAScript , DOM และ BOM อาการเฉพาะนั้นก็แตกต่างกันทั้งนี้ขึ้นอยู่กับโฮสต์ (เบราว์เซอร์)
1. DOM เป็นมาตรฐาน W3C; [มาตรฐานที่เบราว์เซอร์ทั้งหมดเป็นไปตามมาตรฐานสาธารณะ]
2. BOM ขึ้นอยู่กับ DOM โดยผู้ผลิตเบราว์เซอร์ต่างๆ
การใช้งานในแต่ละเบราว์เซอร์ [มันปรากฏเป็นคำจำกัดความที่แตกต่างกันของเบราว์เซอร์ที่แตกต่างกันและวิธีการใช้งานแตกต่างกัน]
3. หน้าต่างเป็นวัตถุ BOM ไม่ใช่วัตถุ JS;
DOM (โมเดลวัตถุเอกสาร) เป็นอินเตอร์เฟสโปรแกรมแอปพลิเคชัน ( API ) สำหรับ HTML และ XML
BOM ส่วนใหญ่เกี่ยวข้องกับหน้าต่างและเฟรมเวิร์กเบราว์เซอร์ แต่ส่วนขยาย JavaScript เฉพาะเบราว์เซอร์มักจะถือเป็นส่วนหนึ่งของ BOM ส่วนขยายเหล่านี้รวมถึง:
การย้ายป๊อปอัพหน้าต่างเบราว์เซอร์ใหม่ปิดหน้าต่างเบราว์เซอร์และปรับขนาดหน้าต่าง การวางตำแหน่งวัตถุที่ให้รายละเอียดเว็บเบราว์เซอร์ วัตถุหน้าจอที่ให้รายละเอียดการแก้ไขหน้าจอผู้ใช้ สนับสนุนคุกกี้ IE ได้ขยาย BOM และเพิ่มคลาส ActiveXObject วัตถุ ActiveX สามารถสร้างอินสแตนซ์ผ่าน JavaScript
javacsript เข้าถึงควบคุมและปรับเปลี่ยนไคลเอนต์ (เบราว์เซอร์) โดยการเข้าถึงวัตถุ BOM (โมเดลวัตถุเบราว์เซอร์) เนื่องจาก window ของ BOM มี document คุณสมบัติและวิธีการของวัตถุหน้าต่างสามารถใช้และรับรู้โดยตรง ดังนั้นแอตทริบิวต์ document ของวัตถุ window สามารถใช้โดยตรงและเนื้อหาและโครงสร้างของเอกสาร XHTML สามารถเข้าถึงได้ดึงและแก้ไขผ่านแอตทริบิวต์ document เนื่องจากวัตถุ document เป็นโหนดรูทของโมเดล DOM (โมเดลวัตถุเอกสาร) อาจกล่าวได้ว่า BOM มี DOM (วัตถุ) และเบราว์เซอร์ให้การเข้าถึงวัตถุ BOM ซึ่งจะเข้าถึงวัตถุ DOM เพื่อให้ JS สามารถใช้งานเบราว์เซอร์และเอกสารที่เบราว์เซอร์อ่าน ใน
DOM ประกอบด้วย: window
วัตถุหน้าต่างมีคุณสมบัติ: เอกสาร, ตำแหน่ง, การนำทาง, หน้าจอ, ประวัติ, โหนดรูท framesDocument มีโหนดลูก: รูปแบบ, ตำแหน่ง, จุดยึด, รูปภาพ, ลิงก์, ลิงก์
สามารถเห็นได้จาก window.document ว่าวัตถุพื้นฐานที่สุดของ DOM คือวัตถุลูกของวัตถุหน้าต่างของ BOM
ความแตกต่าง: DOM อธิบายวิธีการและอินเทอร์เฟซสำหรับการประมวลผลเนื้อหาเว็บเพจและ BOM อธิบายวิธีการและอินเทอร์เฟซสำหรับการโต้ตอบกับเบราว์เซอร์
พบกับ Dom
มาดูรหัสต่อไปนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>> href = "http://www.baidu.com"> javaScript dom </a> </h2> <p> ใช้งานองค์ประกอบ html, เพิ่ม, เปลี่ยนหรือลบสไตล์ CSS ฯลฯ </p> <ul> <li> JavaScript </li> <li> <li> <li> <li>
สลายรหัส HTML ลงในไดอะแกรมลำดับชั้นของโหนด DOM:
** เอกสาร HTML สามารถกล่าวได้ว่าเป็นชุดของโหนด โหนด DOM รวมถึง: ** 1 โหนดองค์ประกอบ: ในรูปด้านบน <html>, <body>, <p>, ฯลฯ เป็นโหนดองค์ประกอบทั้งหมดนั่นคือแท็ก 2. โหนดข้อความ: เนื้อหาที่แสดงต่อผู้ใช้เช่น JavaScript, DOM, CSS และข้อความอื่น ๆ ใน <li> ... </li> 3. แอตทริบิวต์โหนด: แอตทริบิวต์องค์ประกอบเช่นแอตทริบิวต์ลิงก์ href = "http://www.baidu.com" ของแท็ก <a>
แอตทริบิวต์โหนด แอตทริบิวต์ NodeName ส่งคืนสตริงที่มีเนื้อหาเป็นชื่อของโหนดโหนดที่ส่งคืนจำนวนเต็ม ค่านี้แสดงถึงประเภทของโหนดโหนดที่กำหนดส่งคืนค่าปัจจุบันของโหนดที่กำหนด
Traversal Node Tree Treamal Node Tree ChildNodes ส่งคืนอาร์เรย์อาร์เรย์นี้ประกอบด้วยลูกขององค์ประกอบที่กำหนด FirstChild ส่งคืนโหนดลูกแรกที่ LastChild ส่งคืนโหนดลูกสุดท้าย ParentNode ส่งคืนโหนด Nextsibling ส่งคืนโหนดลูกถัดไปของโหนด
การดำเนินการ DOM การดำเนินการ createElement (องค์ประกอบ) สร้างโหนดองค์ประกอบใหม่โหนด createTextNode () สร้างโหนดข้อความใหม่ที่มีข้อความที่กำหนดภาคผนวก () เพิ่มส่วนเด็กใหม่หลังจากรายการโหนดสุดท้ายของโหนดที่ระบุไว้ก่อน () แทรกโหนดที่กำหนดไว้ด้านหน้า กับโหนดอื่น
DOM แสดงถึงเอกสารโดยการสร้างต้นไม้อธิบายวิธีการและอินเทอร์เฟซสำหรับการประมวลผลเนื้อหาเว็บเพื่อให้นักพัฒนามีการควบคุมเนื้อหาและโครงสร้างของเอกสารอย่างไม่เคยปรากฏมาก่อน การใช้ DOM API โหนดสามารถลบได้อย่างง่ายดายเพิ่มและแทนที่
1. การเข้าถึงโหนด
`var ohtml = document.documentelement;` // ส่งคืนโหนดรูทเอกสารที่มีอยู่ในเอกสาร XML และ HTML OHTML มีวัตถุ htmlelement `document.body` การแทน <html/> // เป็นส่วนขยายพิเศษไปยังหน้า html ฉันให้การเข้าถึงโดยตรงไปยัง <body> แท็ก </span> <span> </span> </span>` document.getElementById ("id") จะส่งคืนองค์ประกอบด้วยชื่อเป็น ID ที่ระบุ `document.getElementByName (" ชื่อ ")` พร้อมชื่อเป็น ID ที่ระบุ // รับองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อเท่ากับค่าที่ระบุ อย่างไรก็ตามใน IE6 และ OperA7.5 มันจะส่งคืนองค์ประกอบด้วย ID เป็นชื่อที่กำหนดและตรวจสอบ <put/> และ <img/> `var x = document.getElementSbyTagname (" P ");` // ใช้ชื่อแท็กที่ระบุทั้งหมดจะไม่กลับรายการองค์ประกอบทั้งหมด2. ลักษณะและวิธีการของโหนดโหนด
FirstChild // Node ชี้ไปที่โหนดแรกในรายการ childNodes LastChild // Node ชี้ไปที่โหนดสุดท้ายในรายการ ChildNodes รายการ parentNodes รายการ parentnode // โหนดชี้ไปที่ Node Ownerdocument // เอกสารในรายการ Node Node รายการเด็ก ๆ รายชื่อ ParentNodes childNodes // โหนดชี้ไปที่โหนด parent node childNodes // nodelist, รายการของเด็กทุกคนก่อนหน้านี้ /โหนด, ชี้ไปที่โหนดพี่น้องก่อนหน้านี้: ถ้าโหนดนี้เป็นโหนดแรก `haschildnodes ()` // บูลีนเมื่อ ChildNodes มีหนึ่งโหนดหรือมากกว่าค่าที่แท้จริงจะถูกส่งคืน
3. เหตุการณ์
DOM มีสองโมเดลเหตุการณ์ในเวลาเดียวกัน: เหตุการณ์ฟองและเหตุการณ์เหตุการณ์ฟองสบู่: เหตุการณ์จะถูกกระตุ้นตามลำดับจากเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงที่สุดไปยังเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงน้อยที่สุด <body onclick = "handleclick ()"> <div onclick = "handleclick () (Mozilla 1.0) เหตุการณ์ที่ถูกจับ: ในกระบวนการตรงกันข้ามกับเหตุการณ์ฟองเหตุการณ์เริ่มต้นจากวัตถุที่ไม่ถูกต้องมากที่สุดและจากนั้นไปยังลำดับที่แม่นยำที่สุดในการเรียกใช้ตัวอย่างข้างต้นคือ: เอกสาร, div คุณสมบัติที่ไม่เหมือนใครที่สุดของโมเดลเหตุการณ์ DOM คือโหนดข้อความยังกระตุ้นเหตุการณ์ (ไม่ใช่ใน IE)
4. ฟังก์ชั่นการจัดการเหตุการณ์/ฟังก์ชั่นการฟัง
** ฟังก์ชั่น Handler Event Handler/Listenergy ** ใน JavaScript: var odiv = document.getElementById ("div1"); odiv.onclick = function () {// onclick สามารถใช้ในตัวพิมพ์เล็กได้เท่านั้นค่าเริ่มต้นคือการแจ้งเตือนเหตุการณ์ฟอง ("คลิก!"); } ใน html: <div onclick = "JavaScript: Alert (" คลิก! ")"> </div> // onclick เป็นกรณีเช่นตัวจัดการเหตุการณ์ attightEvent () และ detachevent ()
ใน IE แต่ละองค์ประกอบและวัตถุหน้าต่างมีสองวิธี: attachEvent()和detachEvent() ซึ่งยอมรับพารามิเตอร์ที่เหมือนกันสองตัวชื่อตัวจัดการเหตุการณ์และฟังก์ชั่นตัวจัดการเหตุการณ์เช่น::
[Object] .AttacheVent ("NAME_OF_EVENT_HANDLER", "function_to_attach") [Object] .detacheVent ("NAME_OF_EVENT_HANDLER", "function_to_remove") var fnclick = function () {Alert ("คลิก!"); } odiv.attachevent ("onclick", fnclick); // เพิ่มฟังก์ชั่นการจัดการเหตุการณ์ odiv.attachevent ("onclick", fnclickanother); // คุณสามารถเพิ่มฟังก์ชั่นการจัดการเหตุการณ์หลายรายการ odiv.detachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ odiv.detachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ odiv.detachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ odiv.attachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ odiv.attachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ odiv.detachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ odiv.attachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ odiv.attachevent ("onclick", fnclick); // ลบฟังก์ชั่นการจัดการเหตุการณ์ ด้วยวิธี attachEvent() ตัวจัดการเหตุการณ์จะทำงานในขอบเขตทั่วโลกดังนั้นหน้าต่างนี้จะเท่ากับหน้าต่าง
ตัวจัดการกิจกรรมข้ามเบราว์เซอร์
addHandler()和removeHandler() วิธี addHandler() เป็นของวัตถุที่เรียกว่า EventUntil () ทั้งสองวิธียอมรับพารามิเตอร์ที่เหมือนกันสามตัวองค์ประกอบที่จะดำเนินการชื่อเหตุการณ์และฟังก์ชันตัวจัดการเหตุการณ์
ประเภทเหตุการณ์
** ประเภทเหตุการณ์ ** เหตุการณ์เมาส์: คลิก, dbclick, mousedown, mouseup, mouseover, mouseout, กิจกรรมแป้นพิมพ์ Mousemove: keydown, keypress, keyup html เหตุการณ์: โหลด, ยกเลิกการโหลด, abort, select, เปลี่ยน, ส่ง, รีเซ็ต, resize, scroll, โฟกัส,
ตัวจัดการเหตุการณ์
โปรแกรมที่ดำเนินการรหัส JavaScript ตอบสนองต่อเหตุการณ์เมื่อเหตุการณ์เกิดขึ้น ในการตอบสนองต่อเหตุการณ์เฉพาะ
รหัสที่ดำเนินการเรียกว่าตัวประมวลผลเหตุการณ์
ไวยากรณ์สำหรับการใช้ตัวจัดการเหตุการณ์ในแท็ก HTML คือ:
<HTML标签事件处理器="JavaScript代码''>ตัวจัดการเหตุการณ์
เหตุการณ์คือการกระทำบางอย่างที่ดำเนินการโดยผู้ใช้หรือเบราว์เซอร์เอง ตัวอย่างเช่น click,mouseup,keydown,mouseover ฯลฯ เป็นชื่อของเหตุการณ์ทั้งหมด ฟังก์ชั่นที่ตอบสนองต่อเหตุการณ์บางอย่างเรียกว่าตัวจัดการเหตุการณ์ (ผู้ฟังเหตุการณ์) ตัวจัดการเหตุการณ์เริ่มต้นด้วย on ดังนั้นตัวจัดการเหตุการณ์ click จึง onclick
DOM ระดับ 0 ตัวจัดการเหตุการณ์
ตัวจัดการเหตุการณ์ระดับ 0 DOM: กำหนดฟังก์ชั่นให้กับแอตทริบิวต์ Handler ของเหตุการณ์
<อินพุต type = "ปุ่ม" value = "ปุ่ม 2" id = "ben2"/> var btn2 = document.getElementById ('btn2'); รับวัตถุปุ่ม btn2 btn2.onclick // เพิ่มแอตทริบิวต์ onclick ลงใน btn2 และแอตทริบิวต์กระตุ้นให้ตัวจัดการเหตุการณ์ btn2.onclick = function () {} // เพิ่มฟังก์ชั่นที่ไม่ระบุชื่อ btn2.onclick = null // ลบแอตทริบิวต์ onclickจะหยุดฟองได้อย่างไร?
มีวิธีต่อไปนี้ในการป้องกันการเดือด:
e.cancelBubble=true;e.stopPropagation();return false;InnerText, innerhtml, outerhtml, outertext
InnerText, InnerHTML, OUTERHTML, OUTERTEXT INNERTEXT: ระบุข้อความระหว่างแท็กเริ่มต้นและแท็กปลายทาง innerHTML: รหัส HTML ที่แสดงถึงองค์ประกอบและข้อความทั้งหมดขององค์ประกอบเช่น: <b> <b> hello </b> โลก และปัญหาจะส่งคืนเนื้อหาเดียวกันกับ InnerText OuterHTML: ความแตกต่างจากเดิมคือโหนดเป้าหมายทั้งหมดจะถูกแทนที่และรหัส HTML ที่สมบูรณ์ขององค์ประกอบจะถูกส่งคืนรวมถึงองค์ประกอบเอง
ตัวจัดการเหตุการณ์ DOM ระดับ 2
เหตุการณ์ DOM ระดับ 2 กำหนดสองวิธีในการระบุและลบการทำงานของตัวจัดการเหตุการณ์ addEventListener() และ removeEventListener()
addeventListener () และ removeEventListener ()
ใน DOM, addeventListener () และ removeVentListener () ถูกใช้เพื่อจัดสรรและลบตัวจัดการเหตุการณ์ ซึ่งแตกต่างจาก IE วิธีการเหล่านี้ต้องใช้สามพารามิเตอร์: ชื่อเหตุการณ์ไม่ว่าจะเป็นฟังก์ชันที่จะจัดสรรและฟังก์ชั่นการประมวลผลใช้สำหรับขั้นตอนฟอง (เท็จ) หรือขั้นตอนการจับภาพ (จริง) ค่าเริ่มต้นคือ Bubble Stage False [Object] .AddeVentListener ("name_of_event", fnhander, bcapture) [Object] .removeeVentListener ("name_of_event", fnhander, bcapture) var fnclick = ฟังก์ชั่น () } odiv.addeventListener ("onclick", fnclick, false); // เพิ่มฟังก์ชั่นการจัดการเหตุการณ์ odiv.addeventListener ("onclick", fnclickanother, false); // เช่นเดียวกับ IE สามารถเพิ่มฟังก์ชั่นการจัดการเหตุการณ์หลายรายการได้ Odiv.removeeVentListener ("onclick", fnclick, false); // ลบฟังก์ชั่นการจัดการเหตุการณ์หากคุณใช้ addeventListener () เพื่อเพิ่มฟังก์ชั่นการจัดการเหตุการณ์ในขั้นตอนการจับภาพคุณต้องระบุใน removeEventListener () เป็นขั้นตอนการจับภาพเพื่อลบฟังก์ชั่นการจัดการเหตุการณ์นี้อย่างถูกต้อง ODIV.onclick = fnclick; odiv.onclick = fnclick; // ใช้การกำหนดโดยตรงฟังก์ชั่นการจัดการเหตุการณ์ที่ตามมาจะเขียนทับฟังก์ชั่นการประมวลผลก่อนหน้า odiv.onclick = fnclick; odiv.addeventListener ("onclick", fnclickanother, false); // การโทรจะถูกเรียกตามลำดับและจะไม่ถูกเขียนทับรูปภาพที่จะเข้าใจ outhtml, innertext, innerhtml:
แผนที่การทำงานของ Dom Basic Operation Mind
สำหรับรายละเอียดเพิ่มเติม XML DOM - สำหรับคุณสมบัติและวิธีการของวัตถุองค์ประกอบกรุณาเยี่ยมชม w3cshool
ส่วนระเบิด
แกนกลางของ BOM คือ window และวัตถุ window มีบทบาทคู่ มันเป็นทั้งอินเทอร์เฟซเพื่อเข้าถึงหน้าต่างเบราว์เซอร์ผ่าน JS และวัตถุ Global ซึ่งหมายความว่าวัตถุตัวแปรและฟังก์ชั่นใด ๆ ที่กำหนดไว้ในหน้าเว็บจะใช้หน้าต่างเป็นวัตถุ global
window.close (); // ปิดหน้าต่างหน้าต่าง Alert ("ข้อความ"); // ป๊อปอัพกล่องข้อความระบบด้วยปุ่มตกลงแสดงหน้าต่างข้อความที่ระบุการยืนยัน ("แน่ใจหรือไม่"); // ป๊อปอัพกล่องโต้ตอบแบบสอบถามพร้อมปุ่มตกลงและยกเลิกปุ่มส่งคืนหน้าต่างค่าบูลีน prompt ("คุณชื่ออะไร", "เริ่มต้น"); // แจ้งให้ผู้ใช้ป้อนข้อมูลและยอมรับพารามิเตอร์สองพารามิเตอร์คือข้อความที่จะแสดงต่อผู้ใช้และค่าเริ่มต้นในกล่องข้อความส่งคืนค่าในกล่องข้อความเป็นค่าฟังก์ชัน // คุณสามารถเปลี่ยนข้อความของหน้าต่างแถบสถานะได้ชั่วคราว defaultstatus // ข้อมูลแถบสถานะเริ่มต้นสามารถเปลี่ยนข้อความก่อนที่ผู้ใช้จะออกจากหน้าต่างหน้าปัจจุบัน settimeout ("การแจ้งเตือน ('xxx')", 1000); // ตั้งค่ารหัสที่ระบุหลังจากจำนวนมิลลิวินาทีที่ระบุยอมรับพารามิเตอร์ 2 พารามิเตอร์รหัสที่จะดำเนินการและจำนวนมิลลิวินาทีที่จะรอ window.leartimeout ("id"); // ยกเลิกการหยุดชั่วคราวที่ไม่ได้ดำเนินการและส่งผ่าน ID หยุดชั่วคราวไปยังหน้าต่าง SetInterval (ฟังก์ชั่น, 1,000); // ทำซ้ำรหัสที่ระบุอย่างไม่สิ้นสุดทุกช่วงเวลาที่ระบุพารามิเตอร์จะเหมือนกับ window.learinterval ("id"); // ยกเลิกช่วงเวลาและส่งรหัสช่วงเวลาไปยังหน้าต่าง history.go (-1); // เข้าถึงประวัติของหน้าต่างเบราว์เซอร์ จำนวนลบคือย้อนหลังและจำนวนบวกคือ window.history.back (); // เหมือนกับ window ด้านบน history.forward (); // เหมือนกับ window ด้านบน history.length // คุณสามารถดูจำนวนหน้าในประวัติศาสตร์วัตถุเอกสาร
วัตถุเอกสาร: จริงๆแล้วมันเป็นคุณสมบัติของวัตถุหน้าต่าง document == window.document เป็นจริงมันเป็นวัตถุเดียวที่เป็นของทั้ง BOM และ DOM document.lastmodified // รับสตริงที่แสดงถึง document.referrer // ใช้เพื่อติดตามตำแหน่งที่ผู้ใช้เชื่อมโยงไปยัง document.title // รับชื่อของหน้าอ่าน / document.url. Anchors ในเอกสารหน้ารูปแบบ [0] หรือ document.forms ["formName"] // เข้าถึงเอกสารทั้งหมด document.images [0] หรือ document.images ["imgname"] // เข้าถึงรูปภาพทั้งหมด links [0] หรือ document.links ["linkname" [0] หรือ document.embeds ["EmbedName"] // เข้าถึง documents วัตถุฝังตัวทั้งหมด document.write (); หรือ document.writeln (); // แทรกสตริงไปยังที่ที่พวกเขาถูกเรียก
วัตถุตำแหน่ง
วัตถุที่ตั้ง: แสดงถึง URL ของหน้าต่างการโหลดและสามารถอ้างอิงได้ด้วย window.location location.href // URL เต็มของหน้าโหลดในปัจจุบันเช่น http://www.some.com/pictures/index.htm location.portocol // protocol ที่ใช้ใน URL เช่น www.wrox.com location.hostname // มักจะเท่ากับโฮสต์และบางครั้งตำแหน่ง www ก่อนหน้านี้พอร์ต // พอร์ตของ URL ที่ร้องขอ โดยค่าเริ่มต้น URL ส่วนใหญ่ไม่มีข้อมูลพอร์ตเช่น 8080 location.pathName // ส่วนหลังจากชื่อโฮสต์ใน URL เช่น /pictures/index.htm ตำแหน่งการค้นหา // ส่วนหลังจากเครื่องหมายคำถามใน URL ที่ดำเนินการตามคำขอ location.assign ("http: www.baidu.com"); // location.href เดียวกันที่อยู่ใหม่จะถูกเพิ่มลงในตำแหน่งสแต็กประวัติของเบราว์เซอร์ ("http: www.baidu.com"); // การกำหนดเดียวกัน () แต่ที่อยู่ใหม่จะไม่ถูกเพิ่มลงในสแต็กประวัติของเบราว์เซอร์และ location.reload (จริง | เท็จ); // โหลดหน้าปัจจุบันใหม่หากเป็นเท็จมันจะถูกโอเวอร์โหลดจากแคชเบราว์เซอร์และถ้าเป็นจริงมันจะถูกโอเวอร์โหลดจากฝั่งเซิร์ฟเวอร์และค่าเริ่มต้นเป็นเท็จวัตถุนำทาง
วัตถุ `Navigator`: มีข้อมูลมากมายเกี่ยวกับเว็บเบราว์เซอร์ซึ่งมีประโยชน์มากในการตรวจจับเบราว์เซอร์และระบบปฏิบัติการ นอกจากนี้ยังสามารถอ้างอิงได้โดย window.navigator `navigator.appcodename` // สตริงของชื่อรหัสเบราว์เซอร์แสดงถึง Navigator.appname // สตริงของชื่อเบราว์เซอร์อย่างเป็นทางการแสดงถึง Navigator.Appversion // สตริงของ NELLEDITENTENTRESTENTENTRESTIONTRESTIONENTENTENTRESTIONTRITION เปิดใช้งาน, ส่งคืนจริงมิฉะนั้นส่งคืน Navigator.platform // สตริงของแพลตฟอร์มคอมพิวเตอร์ที่เบราว์เซอร์อยู่ที่แสดงถึง Navigator.plugins // อาร์เรย์ปลั๊กอินที่ติดตั้งในเบราว์เซอร์ Navigator.Taintenabled // กลับจริง
วัตถุหน้าจอ
วัตถุหน้าจอ: ใช้เพื่อรับข้อมูลบางอย่างเกี่ยวกับหน้าจอของผู้ใช้ นอกจากนี้คุณยังสามารถอ้างอิงได้ด้วย window.screen.width/ความสูง // ความกว้างและความสูงของหน้าจอในพิกเซล, หน้าจอ, availwidth/availheight // ความกว้างและความสูงของหน้าจอที่หน้าต่างสามารถใช้ในพิกเซล, หน้าจอ window.resizeto (screen.availwidth, screen.availheight); // เติมหน้าจอของผู้ใช้
วิธีวัตถุหน้าต่าง
แผนผังไดอะแกรมของความสัมพันธ์เชิงโครงสร้างระหว่าง BOM และ DOM
แผนที่ Object Windows Object