ในตอนต้นของบทความ ผมอยากจะพูดถึง ในแง่ทั่วไป ว่า DOM คืออะไร และ BOM คืออะไร เพราะ ท้ายที่สุดแล้วบทความนี้มุ่งเป้าไปที่เพื่อนที่มีพื้นฐาน JavaScript บางอย่าง แต่ไม่เข้าใจหรือไม่รู้เกี่ยวกับ DOM และ BOM ด้วยซ้ำ .
อย่างไรก็ตาม ก่อนที่เราจะพูดถึง DOM คืออะไร และ BOM คืออะไร โปรดให้ฉันแสดง ให้คุณดูโครงสร้างทั้งหมดของ Javascript :
ในภาพด้านบน เราจะเห็นได้ว่ามี สี่องค์ประกอบ: JavaScript, ECMAScript, DOM และ BOM แล้วอะไรคือความเชื่อมโยงระหว่างองค์ประกอบทั้งสี่นี้? ใช้สมการเพื่อสรุปความสัมพันธ์ระหว่างกัน:
JavaScript = ECMAscript + BOM + DOM
มา ดูภาพรวมกันทีละ :
ECMAscript:
ECMAScript เป็นภาษาที่ส่งผ่านโดย ECMA International (เดิมชื่อ European Computer Manufacturing Association) ผ่าน ECMA- 262 คือ ภาษาการเขียนโปรแกรมสคริปต์มาตรฐาน เป็นมาตรฐานสำหรับ JavaScript (เรียกสั้น ๆ ว่า JS) และเบราว์เซอร์ใช้มาตรฐานนี้
ECMAscript เป็นเหมือนกฎระเบียบที่กำหนดวิธีที่แต่ละเบราว์เซอร์ดำเนินการไวยากรณ์ของ JavaScript เพราะเรารู้ว่า JavaScript เป็นภาษาสคริปต์ที่ทำงานบนเบราว์เซอร์! มีข้อบังคับ แต่เรา ยังไม่มีวิธีโต้ตอบกับแต่ละองค์ประกอบบนหน้าเว็บ ในเวลานี้ DOM ต่อไปนี้ถือกำเนิดขึ้น!
DOM:
DOM ( Document Object Model ) คือ อินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน ที่ไม่ขึ้นกับภาษา สำหรับการใช้งานเอกสาร xml และ html
สำหรับ JavaScript: เพื่อ ให้ JavaScript ทำงาน Html ได้ JavaScript มีอินเทอร์เฟซการเขียนโปรแกรม DOM ของตัวเอง
ในประโยคเดียว: DOM ให้ "วิธีการ" แก่ JavaScript เพื่อเข้าถึงและใช้งานองค์ประกอบ HTML (สาเหตุที่เราไม่ใช้คำว่าอินเทอร์เฟซก็เพราะเรากลัวว่าเพื่อนบางคนจะกลัวเมื่อเห็นอินเทอร์เฟซ แต่ในความเป็นจริงแล้ว คำอธิบายที่ถูกต้องที่สุดคือ JavaScript) มีอินเทอร์เฟซให้ )
BOM:
BOM คือ Browser Object Model, เบราว์เซอร์ object model BOM เป็นอินเทอร์เฟซที่ดูเหมือนจะควบคุมพฤติกรรมของเบราว์เซอร์
สำหรับ JavaScript: เพื่อ ให้ JavaScript ควบคุมพฤติกรรมของเบราว์เซอร์ JavaScript จึงมีอินเทอร์เฟซ BOM ของตัวเอง
ในประโยคเดียว: BOM ให้ "วิธีการ" แก่ JavaScript เพื่อควบคุมพฤติกรรมของเบราว์เซอร์
สุดท้ายนี้ ในบรรดาองค์ประกอบทั้งสามข้างต้นของ JavaScript นั้น ECMscript เป็นข้อกำหนด ในขณะที่ อีกสององค์ประกอบที่เหลือมี "วิธีการ" ที่สอดคล้องกับองค์ประกอบ HTML และเบราว์เซอร์ตามลำดับ ดังนั้นด้านล่างนี้เรา จะมุ่งเน้นไปที่สององค์ประกอบหลัง: DOM และ BOM ให้คำอธิบายที่เป็นระบบ เนื่องจากเป็นเนื้อหาสำหรับมือใหม่ คำอธิบายต่อไปนี้ของฉันจึงง่ายและเข้าใจง่ายที่สุด หากคุณไม่มีพื้นฐานที่ดี คุณสามารถกินมันได้อย่างมั่นใจ !
ก่อนอื่น เรามา อธิบายความรู้ที่เกี่ยวข้องของ DOM กันก่อน ฉัน แบ่งออกเป็นสองส่วน :
โอเค แล้วอะไรคือ DOM tree?
ผู้เริ่มต้นบางคนที่ได้เรียนรู้ DOM อาจไม่คุ้นเคยกับคำนี้เล็กน้อย แต่จริงๆ แล้ว DOM tree ไม่ใช่สิ่งที่เพ้อฝันเป็นพิเศษ ในทางตรงกันข้าม สำหรับ front-end staff ต้นไม้ DOM คือ HTML ของเพจที่คุณดำเนินการ ทุกวัน ต้นไม้ประกอบด้วยองค์ประกอบ:
ใน แผนผัง BOM แต่ละโหนดสามารถมีตัวตนได้ 2 แบบ: อาจเป็นโหนดย่อยของโหนดหลัก หรืออาจเป็นโหนดหลักของโหนดย่อยอื่นๆ เรามาสังเกตโค้ดต่อไปนี้ด้วยกัน :
<!DOCTYPE html>
<html lang="th">
<หัว>
<meta charset="UTF-8">
<title>DOM_demo</title>
</หัว>
<ร่างกาย>
<p>
<a href="https://blog.csdn.net/qq_52736131">กั้งเต้นแทงโก้</a>
</p>
</ร่างกาย>
</html> สำหรับโค้ดข้างต้น โครงสร้าง DOM ของมันควรจะเป็นดังนี้:
ตอนนี้มีคนอยากถามว่าคุณ คิดว่า DOM tree ที่มีความเกี่ยวโยงกับปฏิบัติการ html element มานานแล้วหรือ เปล่า?
คำตอบนั้น มีความเกี่ยวข้องมากและมีเพียงความเข้าใจโครงสร้างแผนผัง DOM ของเอกสารเท่านั้นที่เราจะสามารถใช้งานองค์ประกอบ DOM ได้อย่างถูกต้องและมีประสิทธิภาพ ไม่เช่นนั้นข้อบกพร่องที่ไม่คาดคิดต่างๆ จะปรากฏขึ้น ก่อนที่เราจะใช้งานองค์ประกอบ HTML ของเพจ เราต้องมีภาพวาด DOM ของทั้งเพจที่ชัดเจน แม้ว่าเราจะไม่ได้วาดจริงๆ แต่เราต้องมีโครงสร้างบริบทที่ชัดเจนในใจของเรา
เกี่ยวกับ วิธีการทั่วไปบางประการของการดำเนินงานองค์ประกอบ html ใน DOM ใน JavaScript ฉัน ได้แบ่งออกเป็นหลายส่วนย่อย เพื่อแนะนำให้คุณรู้จัก:
// 1. ผ่านรับ ค่าแอตทริบิวต์ id ขององค์ประกอบ และส่งคืนวัตถุองค์ประกอบ var element = document.getElementById(id_content) //2 รับองค์ประกอบผ่านค่าแอตทริบิวต์ชื่อและส่งกลับอาร์เรย์ของวัตถุองค์ประกอบ var element_list = document.getElementsByName(name_content) //3 รับองค์ประกอบผ่านค่าแอตทริบิวต์คลาสขององค์ประกอบและส่งกลับอาร์เรย์ของวัตถุองค์ประกอบ var element_list = document.getElementsByClassName(class_content) //4 รับองค์ประกอบผ่านชื่อแท็ก และส่งคืนอาร์เรย์ของวัตถุองค์ประกอบ var element_list = document.getElementsByTagName(tagName)
//1 รับค่าแอตทริบิวต์ขององค์ประกอบ โดยธรรมชาติแล้วพารามิเตอร์ที่ส่งผ่านจะเป็นชื่อแอตทริบิวต์ เช่น class, id, href var attr = element.getAttribute(attribute_name) //2. ตั้งค่าแอตทริบิวต์ขององค์ประกอบ พารามิเตอร์ที่ส่งเป็นชื่อแอตทริบิวต์ขององค์ประกอบและค่าแอตทริบิวต์ที่สอดคล้องกันที่จะตั้งค่า element.setAttribute(attribute_name,attribute_value)
//1 สร้างองค์ประกอบ html และพารามิเตอร์ที่ส่งผ่านคือประเภทองค์ประกอบ เช่น p, h1-5, a โดยที่ p เป็นตัวอย่างด้านล่าง var element = document.createElement( "พี") //2. สร้างโหนดข้อความและส่งเนื้อหาข้อความที่เกี่ยวข้อง (โปรดทราบว่าเป็นโหนดข้อความ ไม่ใช่องค์ประกอบ html) var text_node = document.createTextNode (ข้อความ) //3 สร้างโหนดแอตทริบิวต์และพารามิเตอร์ที่ส่งผ่านคือชื่อแอตทริบิวต์ที่สอดคล้องกัน var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
ให้ความสนใจเป็นพิเศษกับ วิธีที่สาม วิธีการสร้างโหนดแอตทริบิวต์นี้จะต้องจับคู่กับองค์ประกอบเฉพาะ นั่นคือ คุณ ต้องได้รับองค์ประกอบเฉพาะก่อน สร้างโหนดแอตทริบิวต์ และสุดท้ายเพิ่มสิ่งนี้ โหนดคุณลักษณะขององค์ประกอบนี้ ( setAttributeNode)
//1 เพิ่มโหนดที่ส่วนท้ายขององค์ประกอบ พารามิเตอร์ที่ส่งผ่านคือประเภทโหนด element.appendChild(Node) //2. แทรกโหนดที่ด้านหน้าของโหนดที่มีอยู่ภายในองค์ประกอบ และยังคงส่งผ่านในพารามิเตอร์ประเภทโหนด element.insertBefore(new_Node, existing_Node)
โปรดทราบว่า ก่อนที่จะเพิ่มโหนด คุณ ต้องสร้างโหนดก่อน และที่ ในเวลาเดียวกัน เลือกองค์ประกอบโหนดหลัก ในวิธีที่สอง คุณ ยังต้องค้นหาโหนดพี่น้องที่อยู่ด้านหลังตำแหน่งการแทรก
// ลบโหนดภายในองค์ประกอบ พารามิเตอร์ที่ส่งผ่านคือพารามิเตอร์ประเภทโหนด element.removeChild (โหนด)
โปรดทราบว่า เมื่อลบคุณจะต้องค้นหาองค์ประกอบโหนดหลักที่เกี่ยวข้องเพื่อลบออกอย่างราบรื่น
ในที่สุด คุณลักษณะ DOM ทั่วไปบางอย่าง :
//1 รับโหนดหลักขององค์ประกอบปัจจุบัน var element_father = element.parentNode //2 รับโหนดย่อยประเภทองค์ประกอบ html ขององค์ประกอบปัจจุบัน var element_son = element.children //3 รับโหนดย่อยทุกประเภทขององค์ประกอบปัจจุบัน รวมถึงองค์ประกอบ html ข้อความ และแอตทริบิวต์ var element_son = element.childNodes //4 รับโหนดลูกแรกขององค์ประกอบปัจจุบัน var element_first = element.firstChild //5 รับองค์ประกอบพี่น้องก่อนหน้าขององค์ประกอบปัจจุบัน var element_pre = element.previousSibling //6 รับองค์ประกอบพี่น้องถัดไปขององค์ประกอบปัจจุบัน var element_next = element.nextSibling //7 รับข้อความทั้งหมดขององค์ประกอบปัจจุบัน รวมถึงซอร์สโค้ด html และข้อความ var element_innerHTML = element.innerHTML
// 8
รับข้อความทั้งหมดขององค์ประกอบปัจจุบัน ยกเว้นซอร์สโค้ด html var element_innerTEXT = element.innerText
ถูกดำเนินการ การแปลงเป็นข้อความเทียบเท่ากับการเปลี่ยนให้เป็นสตริงธรรมดา!
ต่อไป เราจะพูดถึง BOM อีกครั้ง เนื่องจากมี พื้นที่จำกัด จึงไม่มีการอธิบาย BOM อย่างละเอียด (การใช้งานจริงไม่ได้ดีเท่ากับ DOM) เรามาทบทวน บทนำเกี่ยวกับ BOM กันตั้งแต่ต้น:
BOM มี "วิธีการ" หลายอย่างสำหรับ JavaScript เพื่อใช้งานเบราว์เซอร์
ขั้นแรก ลอง ใช้รูปภาพเพื่อจัดเรียงโครงสร้างของ BOM ทั้งหมด เช่นเดียวกับ DOM BOM ยังมีโครงสร้างแบบต้นไม้:
จากภาพด้านบน เราจะเห็น:
หน้าต่างอยู่ด้านบนสุดของห่วงโซ่อาหารจากต้นไม้ BOM ทั้งหมด ดังนั้น ทุกหน้าต่างที่เพิ่งเปิดใหม่จะถือเป็นวัตถุหน้าต่าง
วัตถุหน้าต่างมี คุณสมบัติและวิธีการทั่วไป ดังต่อไปนี้:
| คุณสมบัติ/วิธี | การ ความหมาย |
| ที่เปิด | หน้าต่างหลักของ |
| ความยาว | หน้าต่างปัจจุบันจำนวนเฟรมใน |
| เอกสาร | หน้าต่างวัตถุเอกสารที่แสดงในปัจจุบันใน |
| การแจ้งเตือนหน้าต่าง (สตริง) | สร้างกล่องโต้ตอบคำเตือนและ แสดงข้อความ |
| close() | ปิดหน้าต่าง |
| ยืนยัน() | สร้างกล่องโต้ตอบที่ต้องเปิดการยืนยันผู้ใช้ |
| (url, ชื่อ, [ตัวเลือก]) | เปิดหน้าต่างใหม่และส่งคืน |
| พรอมต์วัตถุหน้าต่างใหม่ (ข้อความ, defaultInput) | สร้างกล่องโต้ตอบ ที่กำหนดให้ผู้ใช้ป้อนข้อมูล |
| setInterval(expression, milliseconds) | คำนวณนิพจน์หลังจากช่วงเวลาที่ระบุ |
| setInterval(function, millis enconds, [arguments]) | เรียกใช้ฟังก์ชัน setTimeout(expression, milli seconds) หลังจากช่วงเวลาที่ระบุ |
| setTimeout(นิพจน์, มิลลิวินาที | |
| ) | หลังจากตัวจับเวลาหมดอายุ | คำนวณฟังก์ชันหลังจากตัวจับเวลาหมดอายุ |
ในบรรดานั้น คุณจะเห็น ว่ามีฟังก์ชัน alert() ด้านบน เพราะ เมื่อเราเรียนรู้ JavaScript ส่วนใหญ่ เราใช้หน้าต่างป๊อปอัปฟังก์ชัน alert() เป็นสตรีมอินพุตและเอาท์พุต นี่เป็นการสาธิตครั้งแรกของฉัน ดังนั้นเมื่อคุณเห็นสิ่งนี้ คุณอาจถามว่า:
เมื่อฉันใช้ฟังก์ชัน alert() ดูเหมือนว่าไม่ได้กล่าวถึงหน้าต่างนี้ alert() ที่นี่เป็น alert() เดียวกับที่ฉันเรียนรู้มาก่อน หรือไม่ คำตอบคือ:
alert() ทั้งสองนี้เป็นฟังก์ชันเดียวกันจริงๆ สาเหตุที่ window สามารถละเว้นได้ก็เพราะ คุณสมบัติและวิธีการทั้งหมดของ window สามารถแสดงได้สองวิธี :
(1) window.property/window
(2) การเรียกใช้แอตทริบิวต์/เมธอดโดยตรง ()
ไม่ใช่แค่การแจ้งเตือน () คุณลักษณะและฟังก์ชันของหน้าต่างข้างต้นทั้งหมดนั้นถูกต้อง เพื่อนที่สนใจสามารถลองใช้งานได้ด้วยตัวเอง
วัตถุ ระบุตำแหน่ง คืออะไร?
วัตถุตำแหน่งเป็นแอตทริบิวต์ของวัตถุหน้าต่างที่ให้ข้อมูลเกี่ยวกับเอกสารที่โหลดในหน้าต่างปัจจุบันและยังมีฟังก์ชันการนำทางบางอย่างอีกด้วย
วัตถุตำแหน่งมีคุณลักษณะและวิธีการทั่วไปดังต่อไปนี้:
| เนื้อหา | แอตทริบิวต์/วิธีการ | |
| ชื่อโฮสต์ | โฮสต์ | : หมายเลขพอร์ต|
| โฮสต์ | ชื่อโฮสต์ | |
| href | URL ทั้งหมด | |
| พาธ | ชื่อ | พาธ หมายเลข|
| พอร์ต | หมายเลขพอร์ต | |
| โปรโตคอล | โปรโตคอล | |
| การค้นหา | ส่วนคำค้นหา สตริง | |
| reload() | โหลด URL ปัจจุบันซ้ำ | |
| โดยใช้ | repalce() | URL ใหม่จะแทนที่หน้าปัจจุบัน ที่ |
จริงแล้ว ถ้าเราสังเกตแผนภาพโครงสร้างด้านบนอย่างละเอียด เราจะพบว่า
วัตถุตำแหน่งไม่เพียงแต่เป็นคุณลักษณะของวัตถุหน้าต่างเท่านั้น แต่ยังเป็นคุณลักษณะของวัตถุเอกสารด้วย
ซึ่งหมายความว่า:
window.location = location = document.location
วัตถุ ประวัติศาสตร์ คืออะไร?
ออบเจ็กต์ประวัติเป็นคุณลักษณะของออบเจ็กต์หน้าต่าง โดยจะบันทึกบันทึกการเข้าถึงอินเทอร์เน็ตของผู้ใช้ การประทับเวลาของบันทึกนี้จะคำนวณจากช่วงเวลาที่เปิดหน้าต่าง
วัตถุประวัติมีคุณลักษณะและวิธีการทั่วไปดังต่อไปนี้:
| คำอธิบาย | แอตทริบิวต์/วิธี | การ
| จำนวน | บันทึกในวัตถุประวัติ |
| back() | ไปที่ URL ก่อนหน้าของรายการประวัติเบราว์เซอร์ คล้ายกับการย้อนกลับไป |
| ข้างหน้า () | ไปที่ URL ถัดไป ของรายการประวัติเบราว์เซอร์ คล้ายกับการไป |
| ข้างหน้า (num) | เบราว์เซอร์จะเลื่อนไปข้างหน้าหรือข้างหลังในออบเจ็กต์ประวัติ |
สุดท้ายนี้ เรามาแนะนำออบเจ็ก ต์เนวิ เกเตอร์กันดีกว่า:
ออบเจ็กต์เนวิเกเตอร์เป็นคุณลักษณะหน้าต่างใน BOM ที่ระบุเบราว์เซอร์ไคลเอ็นต์
คุณลักษณะทั่วไปบางประการที่เกี่ยวข้องกับเนวิเกเตอร์:
| คำอธิบาย | คุณลักษณะ |
| appName | ชื่อเบราว์เซอร์ที่สมบูรณ์และแพลตฟอร์มข้อมูล |
| เวอร์ชัน | แพลตฟอร์มระบบที่เบราว์เซอร์ |
| อาร์เรย์ปลั๊กอิน | ของข้อมูลปลั๊กอินที่ติดตั้งในเบราว์เซอร์ |
| userAgent | สตริงตัวแทนผู้ใช้ของเบราว์เซอร์ |
| ผู้ใช้ | ของระบบปฏิบัติการ |