เรารู้ว่าการใช้งาน JavaScript ที่สมบูรณ์จะต้องประกอบด้วยสามส่วน: Ecmascript (Core), BOM (โมเดลวัตถุเบราว์เซอร์) และ DOM (โมเดลวัตถุเอกสาร)
วันนี้ฉันเรียนรู้ Bom และ Dom เป็นหลัก
Bom:
BOM จัดเตรียมวัตถุจำนวนมากเพื่อเข้าถึงฟังก์ชั่นของเบราว์เซอร์ซึ่งไม่มีส่วนเกี่ยวข้องกับเนื้อหาของหน้าเว็บ (นี่คือธุรกิจ DOM) ในปัจจุบัน BOM ได้ถูกย้ายเข้าไปในข้อกำหนด HTML5 โดย W3C
วัตถุหน้าต่าง:
แกนกลางของ BOM แสดงถึงอินสแตนซ์ของเบราว์เซอร์ มันเป็นทั้งอินเทอร์เฟซในการเข้าถึงหน้าต่างเบราว์เซอร์ผ่าน JavaScript และวัตถุส่วนกลางที่ระบุโดย ECMAScript ซึ่งหมายความว่าวัตถุใด ๆ ตัวแปรและฟังก์ชั่นที่กำหนดไว้ในหน้าเว็บมีหน้าต่างเป็นวัตถุทั่วโลกดังนั้นจึงมีสิทธิ์ในการเข้าถึงวิธีการเช่น paresinint () (ข้อความที่ตัดตอนมาจาก Elevation III) นอกจากนี้หากหน้าเว็บมีเฟรมแต่ละเฟรมมีวัตถุหน้าต่างของตัวเองและถูกบันทึกไว้ในคอลเลกชันเฟรม (ดัชนี 0 เริ่มต้น, LTR, TTB)
ก่อนอื่นตัวแปรและฟังก์ชั่นในสภาพแวดล้อมการดำเนินการทั่วโลกคือสกุลและวิธีการของวัตถุหน้าต่างทั้งหมด แน่นอนว่ามีความแตกต่างเล็กน้อยระหว่างตัวแปรทั่วโลกและแอตทริบิวต์หน้าต่างที่กำหนดโดยตรง ตัวแปรทั่วโลก (เพื่อความแม่นยำควรประกาศตัวแปรทั่วโลกอย่างชัดเจน) ไม่สามารถใช้การลบได้ในขณะที่แอตทริบิวต์หน้าต่างไม่เป็นไร นอกจากนี้ยังมีรายละเอียดอื่นที่ควรทราบว่าการพยายามเข้าถึงตัวแปรที่ไม่ได้ประกาศจะเกิดข้อผิดพลาด แต่ไม่มีปัญหาในการใช้วัตถุหน้าต่างแบบสอบถาม
ดังนั้นคุณสมบัติหรือวิธีการทั่วไปของหน้าต่างคืออะไร?
1. ชื่อวัตถุแต่ละหน้าต่างมีแอตทริบิวต์ชื่อซึ่งมีชื่อของเฟรม มักจะเข้าใจความสัมพันธ์ของหน้าต่างและกรอบงาน
2. วิธีการตำแหน่งหน้าต่าง: Moveto (พิกัด X ของตำแหน่งใหม่, พิกัด y ของตำแหน่งใหม่), Moveby (การเคลื่อนไหวแนวนอน X, การเคลื่อนไหวแนวตั้ง y) ทั้งสองวิธีนี้ใช้ไม่ได้กับเฟรมเวิร์ก
3. แอตทริบิวต์ขนาดหน้าต่าง: InnerWidth/ความสูง (ขนาดของพื้นที่มุมมอง (ลบความกว้างของเส้นขอบ)/ *เช่น Safari, Firefox */), Outerwidth/ความสูง (ส่งคืนขนาดของหน้าต่างเบราว์เซอร์/ *ie, Safari, Firefox */) ในโครเมี่ยมทั้งด้านในและด้านนอกทั้งสองส่งคืนขนาดของพื้นที่มุมมอง
แน่นอนคุณสามารถเปลี่ยนขนาดหน้าต่างโดย resizeto (ความกว้างของหน้าต่างใหม่ความสูงของหน้าต่างใหม่), ปรับขนาดโดยความกว้างเดิมและเพิ่ม y เมื่อเทียบกับความสูงดั้งเดิม) วิธีเพลงรักนี้ใช้ไม่ได้กับโครงสร้างเฟรมเวิร์ก
4.Window.Open (URL, เป้าหมายหน้าต่าง, สตริงคุณลักษณะไม่ว่าจะเป็นหน้าใหม่แทนที่บูลีนของหน้าโหลดในปัจจุบันในประวัติเบราว์เซอร์) ใช้เพื่อนำทางไปยัง URL เฉพาะหรือเปิดหน้าต่างใหม่ หากมีการระบุเป้าหมายหน้าต่างและเป้าหมายหน้าต่างเป็นชื่อของหน้าต่างหรือเฟรมที่มีอยู่ URL ที่ระบุจะถูกโหลดในหน้าต่างหรือเฟรมที่เปลี่ยนชื่อ มิฉะนั้นหน้าต่างใหม่ที่เปิดจะถูกตั้งชื่อเป็นหน้าต่างเป้าหมาย แน่นอนคำหลักที่หน้าต่างเป้าหมายสามารถระบุได้คือ _self, _parent, _top, _blank
<a href = // www.vevb.com> คลิกฉัน </a> <script> var link = document.getElementsByTagname ("A") [0]; การแจ้งเตือน (link.nodename); window.onload = function () {link.onclick = function () {window.open (link.href, "ดี", "width = 400px, ความสูง = 300px"); กลับเท็จ; }} </สคริปต์การตั้งค่าเฉพาะของสตริงคุณลักษณะไม่ได้มีรายละเอียดที่นี่ หากคุณสนใจคุณสามารถคลิกที่นี่
5. เป็นภาษาแบบเธรดเดี่ยว JS ยังคงอนุญาตให้ตั้งค่าค่าหมดเวลา (การดำเนินการรหัสหลังจากเหตุการณ์ที่ระบุ) และค่าเวลาช่วงเวลา (วนซ้ำทุกครั้งที่กำหนดทุกครั้ง) เพื่อกำหนดเวลาการดำเนินการโค้ดในช่วงเวลาที่กำหนด
การโทรหมดเวลา: settimeout (สตริงรหัส JS เวลามิลลิวินาที) เป็นภาษาเดียวที่มีเธรดคิวงาน JS สามารถเรียกใช้รหัสทีละชิ้นเท่านั้น หากคิวงานว่างเปล่าหลังจากช่วงเวลาที่กำหนดสตริงรหัสจะถูกเรียกใช้งาน มิฉะนั้นคุณต้องรอจนกว่ารหัสก่อนหน้าจะถูกดำเนินการก่อนที่จะดำเนินการ
var al = settimeout (function () {alert ("good");}, 5000); การแจ้งเตือน (อัล); // 2ที่นี่ฉันเรียกฟังก์ชั่นที่ไม่ระบุชื่อหลังจาก 5 วินาทีเพื่อส่งออกดี กล่องคำเตือนโผล่ขึ้นมาในหน้าต่างเพื่อแสดง 2 จะเห็นได้ว่าฟังก์ชั่น settimeout () ส่งคืน ID ตัวเลขซึ่งไม่ซ้ำกัน จากนั้นเราสามารถล้างการโทรหมดเวลาผ่าน ID นี้และสามารถใช้ ClearTimeOut (ID) เพื่อล้าง
การโทรทางอ้อม: setInterval () พารามิเตอร์ที่ยอมรับนั้นเหมือนกับ settimeout () และยังส่งคืน ID ตัวเลขและล้างด้วย ClearTimeOut ()
6. ระบบกล่องโต้ตอบระบบ: Alert (), ยืนยัน (), prompt () ฯลฯ เขียนไว้ในบล็อกก่อนหน้าของฉันคลิกที่นี่
วัตถุตำแหน่ง
แทนที่จะเป็นวัตถุใน BOM ตำแหน่งเป็นคุณสมบัติในวัตถุหน้าต่าง แน่นอนว่ามันเป็นคุณสมบัติของวัตถุเอกสารใน DOM ที่จะกล่าวถึงในภายหลัง นั่นคือ window.location และ document.location อ้างถึงวัตถุเดียวกัน
รายการแอตทริบิวต์วัตถุตำแหน่งการแก้ไขแอตทริบิวต์เหล่านี้สามารถโหลดหน้าใหม่และสร้างระเบียนใหม่ในประวัติศาสตร์ การใช้ location.retplace () จะไม่สร้างระเบียนใหม่ในบันทึกประวัติศาสตร์อีกต่อไป
| กัญชา | "#contents" | คืนแฮชใน URL ไม่ใช่ "" |
| เจ้าภาพ | "www.google.com" | ส่งคืนชื่อเซิร์ฟเวอร์และหมายเลขพอร์ต (ถ้ามี) |
| ชื่อโฮสต์ | "www.google.com" | ส่งคืนชื่อเซิร์ฟเวอร์โดยไม่มีหมายเลขพอร์ต |
| href | "www.google.com" | ส่งคืน URL เต็มของหน้าปัจจุบันและการโทรที่กำหนด () |
| ชื่อพา ธ | ''/wileycda/' | กลับไปที่ชื่อไดเรกทอรี |
| ท่าเรือ | "8080" | ส่งคืนหมายเลขพอร์ตหากไม่ส่งคืนสตริงว่างเปล่า |
| โปรโตคอล | "http:" | กลับไปที่โปรโตคอลที่ใช้โดยหน้า |
| ค้นหา | "? = JavaScript" | ส่งคืนสตริงแบบสอบถามเริ่มต้นด้วยเครื่องหมายคำถาม |
Object Navigator: มาตรฐานตามพฤตินัยที่ใช้ในการระบุเบราว์เซอร์และคุณสมบัติและวิธีการส่วนใหญ่จะใช้ในการตรวจจับประเภทเบราว์เซอร์
ส่วนที่เหลือเป็นเหมือนวัตถุประวัติศาสตร์ (บันทึกบันทึกประวัติศาสตร์) และวัตถุหน้าจอ (แสดงความสามารถของลูกค้า) เนื่องจากการเขียนโปรแกรมใน JS นั้นไม่มีประสิทธิภาพมากฉันจะไม่ทำซ้ำ
- -
DOM:
DOM เป็น API ที่ขยายออกไปสำหรับ HTML ตาม XML และ DOM อาศัยต้นไม้โหนดเพื่อขยาย
ก่อนอื่นจำเป็นต้องชัดเจนว่าโหนดเอกสารเป็นโหนดรูทของแต่ละโหนด โหนดเอกสารมีและโหนดเด็กเพียงหนึ่งโหนดคือ HTML (องค์ประกอบเอกสาร)
ประเภทโหนด:
อินเทอร์เฟซใน DOM1 ถูกนำมาใช้โดยทุกประเภทโหนด (โหนดข้อความโหนดแอตทริบิวต์โหนดองค์ประกอบ) และอินเทอร์เฟซนี้ถูกนำมาใช้เป็นประเภทโหนดใน JS
แอตทริบิวต์ Nodetype ซึ่งเป็นเจ้าของโดยแต่ละโหนด แสดงด้วยค่าตัวเลข 12 ค่าองค์ประกอบ-1, แอตทริบิวต์-2, ข้อความ-3 ...
แอตทริบิวต์ NodeName สำหรับโหนดโหนดองค์ประกอบค่าของ NodEname คือชื่อฉลาก
แอตทริบิวต์ NodeValue สำหรับโหนดโหนดองค์ประกอบค่าของ nodevalue เป็นโมฆะ
ความสัมพันธ์ของโหนด: แต่ละโหนดมีแอตทริบิวต์ ChildNodes ซึ่งบันทึกวัตถุ Nodelist (คลาสอาร์เรย์คลาส) แต่ละโหนดมีคุณสมบัติ parentNode ชี้ไปที่โหนดพาเรนต์ โหนดใน ChildNodes มี parentNode เดียวกัน ใช้คุณสมบัติก่อนหน้าและคุณสมบัติ Nextsibling เพื่อเข้าถึงโหนดพี่น้อง ในเวลาเดียวกัน ChildNodes [0] == FirstChild, ChildNodes [ChildNodes.length-1] == LastChild
Operation Node: AppendChild (), กดโหนดไปยังจุดสิ้นสุดของ Nodelist และส่งคืนโหนดที่เพิ่มขึ้นใหม่ InsertBefore () ส่งคืนโหนดไปยังส่วนหัวของ Nodelist Unshift และส่งคืนโหนดใหม่ Replacechild (Newchild, TargetChild) แทนที่โหนดเป้าหมาย โหนดดั้งเดิมยังคงอยู่ในเอกสาร แต่ไม่มีสถานที่ RemoveChild (tragetchild) ลบโหนดและเอฟเฟกต์จะคล้ายกับ replacechild () Clonechild (บูลีน) เมื่อเป็นจริงหมายถึงการจำลองแบบที่สมบูรณ์ (โหนดทั้งหมดและโหนดเด็ก), เท็จหมายถึงการจำลองแบบพื้นฐาน
ประเภทเอกสาร:
แสดงถึงเอกสารวัตถุเอกสารเป็นอินสแตนซ์ของ HTMLDDocument (สืบทอดมาจากประเภทเอกสาร) ซึ่งเป็นตัวแทนของหน้า HTML ทั้งหมด ในเวลาเดียวกันวัตถุ Douent ยังเป็นคุณสมบัติของวัตถุหน้าต่างดังนั้นจึงสามารถเข้าถึงได้เป็นวัตถุส่วนกลาง document.firstchild == html Document.body == Body document.doctype ---> อ้างอิงถึง <! doctype> doucment.title ---> title document.url ---> location.url
ค้นหาองค์ประกอบ: getElementById (), getElementsByTagname (), getElementsByClassName ()
การเขียนเอกสาร: เขียน (), writeeln (), open (), ปิด ()
ประเภทองค์ประกอบ:
getAttribute () รับคุณสมบัติสำหรับคลาสใช้ "คลาส" แทนที่จะเป็นคลาสคลาสและแอตทริบิวต์คลาสสามารถรับได้เมื่อใช้ element.className
SetAttribute () ตั้งค่าคุณสมบัติหากมีคุณสมบัติอยู่ให้แทนที่ มิฉะนั้นสร้าง
RemoveAttribute () ลบลักษณะองค์ประกอบอย่างสมบูรณ์
CreateElement () สร้างองค์ประกอบใหม่
ประเภทข้อความ:
createTextNode () สร้างโหนดข้อความ หากโหนดข้อความเชื่อมต่อกับโหนดเพื่อนร่วมชาติใกล้เคียงทั้งสองข้อความจะเชื่อมต่อโดยไม่มีช่องว่าง
องค์ประกอบของบทความข้างต้นของ JavaScript ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------