DOM คืออะไร?
1. บทนำ
Document Object Model (DOM) เป็นอินเทอร์เฟซการเขียนโปรแกรมมาตรฐานที่แนะนำโดยองค์กร W3C เพื่อจัดการภาษาโลโก้ที่ขยายได้ โมเดลวัตถุเอกสารสามารถย้อนกลับไปที่ "การต่อสู้ของเบราว์เซอร์" ระหว่าง Microsoft และ Netscape ในช่วงปลายปี 1990 เพื่อที่จะต่อสู้กับชีวิตและความตายด้วย JScript ใน JavaScript ทั้งสองฝ่ายได้ให้ฟังก์ชั่นที่ทรงพลังของเบราว์เซอร์ในขนาดใหญ่ Microsoft ได้เพิ่มสิ่งพิเศษมากมายให้กับเทคโนโลยีหน้าเว็บรวมถึง VBScript, ActiveX และรูปแบบ DHTML ของ Microsoft ซึ่งทำให้หน้าเว็บจำนวนมากไม่สามารถแสดงได้ตามปกติโดยใช้แพลตฟอร์มและเบราว์เซอร์ที่ไม่ใช่ Microsoft DOM เป็นผลงานชิ้นเอกที่ผลิตในเวลานั้น
DOM (โมเดลวัตถุเอกสาร) เป็นอินเตอร์เฟสโปรแกรมแอปพลิเคชัน (API) สำหรับ HTML และ XML DOM จะวางแผนทั้งหน้าเป็นเอกสารที่ประกอบด้วยระดับโหนด
โมเดลวัตถุเอกสารที่เรียกว่าจริง ๆ แล้วเป็นตัวแทนภายในขององค์ประกอบต่าง ๆ ในหน้าเว็บ HTML เช่นส่วนหัว, ย่อหน้า, รายการ, สไตล์, รหัส, ids ฯลฯ ใน HTML องค์ประกอบทั้งหมดสามารถเข้าถึงได้ผ่าน DOM
ในที่สุด JavaScript จำเป็นต้องใช้งานหน้า HTML และเปลี่ยน HTML เป็น DHTML และจำเป็นต้องใช้ DOM เพื่อใช้งานหน้า HTML DOM คือการจำลองหน้า HTML เป็นวัตถุ หาก JavaScript ดำเนินการคำนวณลูปและการดำเนินการอื่น ๆ เท่านั้นและไม่สามารถใช้งาน HTML ได้มันจะสูญเสียความหมาย
DOM เป็นแบบจำลองของหน้า HTML แต่ละแท็กใช้เป็นวัตถุ JavaScript สามารถควบคุมกล่องข้อความเลเยอร์และองค์ประกอบอื่น ๆ ในหน้าเว็บได้โดยการเรียกคุณสมบัติและวิธีการใน DOM ตัวอย่างเช่นโดยการใช้งานวัตถุ DOM ของกล่องข้อความคุณสามารถอ่านค่าในกล่องข้อความและตั้งค่าในกล่องข้อความ
2. ภาพประกอบ
เกี่ยวกับหน้าต่างทั้งหน้าหรือหน้าต่างเป็นวัตถุหน้าต่าง ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ตัวแปรและวิธีการที่กำหนดไว้ในหน้าคือหน้าต่าง
window.id
document.getElementById ()
เมื่อใช้คุณสมบัติและวิธีการของวัตถุหน้าต่างสามารถละเว้นหน้าต่างได้
ตัวอย่างเช่น:
window.alert ('สวัสดี');
สามารถละเว้นการแจ้งเตือน ('สวัสดี');
window.document สามารถเขียนได้โดยตรงด้วยเอกสาร
หากคุณไม่สามารถเขียนหน้าต่างอย่าเขียนเพราะสามารถลดจำนวนไบต์ในไฟล์ JS
การคัดลอกรหัสมีดังนี้:
window.alert ('สวัสดีทุกคน!'); // กล่องโต้ตอบคำเตือนปรากฏขึ้น
window.confirm ('คุณแน่ใจหรือไม่ว่าต้องการลบมัน?'); // ยืนยันยกเลิกกล่องโต้ตอบส่งคืนจริงหรือเท็จ
window.navigate (url); // re-navigate หน้าเว็บไปยัง URL, สนับสนุน IE และ opera11.6 ไม่แนะนำเบราว์เซอร์บางตัวไม่ทำงาน
ขอแนะนำให้ใช้ window.location.href = 'url'; // สนับสนุนเบราว์เซอร์ส่วนใหญ่
ใช้งานองค์ประกอบ DOM แบบไดนามิก
1. รับ DOM
GetElementById (), (ใช้กันมาก) รับวัตถุตาม ID ขององค์ประกอบและ ID ในหน้าเว็บไม่สามารถทำซ้ำได้ นอกจากนี้คุณยังสามารถอ้างถึงองค์ประกอบโดยตรงผ่าน ID ขององค์ประกอบ แต่มีขอบเขตที่ถูกต้อง
GetElementsByName () รับวัตถุตามชื่อขององค์ประกอบ เนื่องจากชื่อขององค์ประกอบในหน้าสามารถทำซ้ำได้เช่นชื่อของ radiobuttons หลายตัวค่าส่งคืนของ getElementsByName เป็นอาร์เรย์วัตถุ
getElementsByTagname () รับอาร์เรย์ขององค์ประกอบที่มีชื่อแท็กที่ระบุ ตัวอย่างเช่น getElementsByTagname ("อินพุต") สามารถรับแท็ก <put> ทั้งหมดได้ *ระบุป้ายกำกับทั้งหมด
2. เพิ่ม, ลบ, แทนที่
document.write สามารถสร้างได้แบบไดนามิกระหว่างการโหลดหน้าเว็บเท่านั้น
คุณสามารถเรียกวิธีการสร้างสรรค์ของเอกสารเพื่อสร้างวัตถุ DOM ด้วยแท็กที่ระบุจากนั้นเพิ่มองค์ประกอบที่สร้างขึ้นใหม่ลงในองค์ประกอบที่เกี่ยวข้องโดยเรียกภาคผนวก (); วิธีการขององค์ประกอบบางอย่าง // องค์ประกอบองค์ประกอบหลัก removeChild (วัตถุองค์ประกอบลูก); ลบองค์ประกอบ
CreateElement ('Element'); สร้างโหนด
ภาคผนวก (โหนด); ต่อท้ายโหนด
RemoveChild (Node); RemoveChild (Node); ลบโหนด
Replacechild (ใหม่เก่า); เปลี่ยนโหนด
แทรกก่อน (ใหม่อ้างถึง); เพิ่มโหนดไปด้านหน้า (แทรกไปด้านหน้าของโหนด)
วิธี:
คุณสมบัติ:
FirstChild
LastChild
3. ใช้ innerhtml หรือ createElement (), appendchild () และ removeChild ()?
เมื่อจัดการกับองค์ประกอบของหน้าเราควรใช้ innerhtml, createElement (), appendchild () และ removeChild () หรือไม่?
1. เมื่อทำการดำเนินการโหนดจำนวนมากประสิทธิภาพของการใช้ InnerHTML นั้นดีกว่าการทำงานของ DOM บ่อย (มีตัวแยกวิเคราะห์ HTML ที่เขียนขึ้นเป็นพิเศษใน C หรือ C ++) ก่อนอื่นเขียนรหัส HTML ของหน้าแล้วโทร InnerHTML หนึ่งครั้งแทนที่จะโทร InnerHTML ซ้ำ ๆ ซ้ำ ๆ
2. สำหรับการลบโหนดโดยใช้ innerhtml = '' จะมีปัญหาหน่วยความจำในบางกรณี ตัวอย่างเช่น: มีองค์ประกอบอื่น ๆ อีกมากมายภายใต้ DIV และแต่ละองค์ประกอบจะถูกผูกไว้กับตัวจัดการเหตุการณ์ ในเวลานี้ InnerHTML เพียงแค่ลบองค์ประกอบปัจจุบันออกจากทรีโหนด แต่ตัวจัดการเหตุการณ์เหล่านั้นยังคงครอบครองหน่วยความจำ
สไตล์การดำเนินงาน JS
รูปแบบขององค์ประกอบคือคุณสมบัติ classname
(คลาสเป็นคำที่สงวนไว้ใน JavaScript แอตทริบิวต์ไม่สามารถใช้คำหลักหรือคำที่สงวนไว้ได้ดังนั้นจึงกลายเป็นคลาสคลาส) เอฟเฟกต์ของไฟการสลับเว็บเพจ
ปรับเปลี่ยนรูปแบบขององค์ประกอบไม่สามารถเป็นสิ่งนี้ style = "พื้นหลังสี: สีแดง"
ใช้ "สไตล์. ชื่อแอตทริบิวต์" เพื่อแก้ไขแอตทริบิวต์ของสไตล์แยกกัน โปรดทราบว่าเมื่อชื่อแอตทริบิวต์ดำเนินการใน JavaScript ใน CSS ชื่อแอตทริบิวต์อาจแตกต่างกันโดยส่วนใหญ่มุ่งเน้นไปที่แอตทริบิวต์ที่มีอยู่ - ในแอตทริบิวต์เนื่องจาก - ไม่สามารถใช้ใน JavaScript ได้
เมื่อใช้งานสไตล์การลอยตัว
เช่น: obj.style.stylefloat = 'ขวา';
เบราว์เซอร์อื่น ๆ : obj.style.cssfloat = 'ขวา';
รูปแบบวัตถุ
ใช้กันทั่วไป: คลิก (), โฟกัส (), เบลอ (); // อุปกรณ์เป็นเหตุการณ์ที่กระตุ้นการคลิกองค์ประกอบได้รับโฟกัสและสูญเสียโฟกัสผ่านโปรแกรม
วัตถุแบบฟอร์มเป็นวัตถุ DOM ของแบบฟอร์ม
วิธีการ: ส่ง () ส่งแบบฟอร์ม แต่เหตุการณ์ onsubmit จะไม่ถูกเรียกใช้
ใช้งาน Autopost นั่นคือหน้าจะถูกส่งทันทีหลังจากโฟกัสออกจากการควบคุมแทนที่จะส่งหลังจากส่งปุ่มส่งเท่านั้น เมื่อเคอร์เซอร์ออกไปเหตุการณ์ onblur จะถูกกระตุ้นและวิธีการส่งแบบฟอร์มจะถูกเรียกใน onblur
หลังจากคลิกส่งเหตุการณ์ onsubmit ของแบบฟอร์มจะถูกเรียกใช้ การตรวจสอบข้อมูลสามารถทำได้ใน Onsubmit หากมีปัญหาใด ๆ กับข้อมูลให้ส่งคืน FALSE เพื่อยกเลิกการส่ง
ข้างต้นคือความเข้าใจส่วนตัวของฉันเกี่ยวกับ DOM ของ JavaScript และฉันหวังว่าทุกคนจะชอบ