สรุปประเด็นความรู้ JavaScript: DOM

1. ข้อมูลเบื้องต้นเกี่ยวกับ DOM

1.1 DOM คืออะไร

การใช้งาน JavaScript ที่สมบูรณ์ประกอบด้วย 3 ส่วนที่แตกต่างกันดังต่อไปนี้:

• Core (ECMAScript): ส่วนหลักของภาษา ซึ่งอธิบายไวยากรณ์และวัตถุพื้นฐานของภาษา

• Document Object Model (DOM): มาตรฐานการดำเนินการเอกสารหน้าเว็บ อธิบายวิธีการและอินเทอร์เฟซสำหรับการประมวลผลเนื้อหาหน้าเว็บ

• Browser Object Model (BOM): พื้นฐานสำหรับไคลเอ็นต์และการทำงานของหน้าต่างเบราว์เซอร์ ซึ่งอธิบายวิธีการและอินเทอร์เฟซสำหรับการโต้ตอบกับเบราว์เซอร์

Document Object Model ( Document Object Model，简称DOM ) คือ编程接口มาตรฐานที่แนะนำโดยองค์กร W3C สำหรับการประมวลผลภาษามาร์กอัปที่ขยายได้ (HTML หรือ XML)
W3C ได้กำหนดชุดของอินเทอร์เฟซ DOM ซึ่งเนื้อหา โครงสร้าง และรูปแบบของหน้าเว็บสามารถเปลี่ยนแปลงได้

ภาษาราชการ: Document Object Model (DOM) เป็นอินเทอร์เฟซการเขียนโปรแกรมมาตรฐานที่แนะนำโดยองค์กร W3C สำหรับการประมวลผลภาษามาร์กอัปที่ขยายได้ เป็น Application Programming Interface (API) ที่ไม่ขึ้นอยู่กับแพลตฟอร์มและภาษาที่สามารถเข้าถึงโปรแกรมและสคริปต์แบบไดนามิก และอัปเดตเนื้อหา โครงสร้าง และรูปแบบของเอกสาร www (เอกสาร HTML และ XML ถูกกำหนดผ่านส่วนคำอธิบาย) เอกสารสามารถประมวลผลเพิ่มเติมได้ และสามารถเพิ่มผลลัพธ์ของการประมวลผลลงในหน้าปัจจุบันได้ DOM เป็นเอกสาร API แบบต้นไม้ที่กำหนดให้เอกสารทั้งหมดแสดงในหน่วยความจำระหว่างการประมวลผล API แบบง่ายอีกตัวหนึ่งคือ SAX แบบอิงเหตุการณ์ ซึ่งสามารถใช้ในการประมวลผลเอกสาร XML ที่มีขนาดใหญ่มาก เนื่องจากมีขนาดใหญ่ จึงไม่เหมาะสำหรับการประมวลผลทั้งหมดในหน่วยความจำ

1.2 ต้นไม้ DOM

• เอกสาร: หน้าคือเอกสาร เอกสารถูกใช้ใน DOM เพื่อแสดง
• องค์ประกอบ แท็กทั้งหมดในหน้าคือองค์ประกอบ และองค์ประกอบถูกใช้ใน DOM เพื่อแสดง
• โหนด: เนื้อหาทั้งหมดในหน้าเว็บคือโหนด (ป้ายกำกับ คุณลักษณะ ข้อความ ความคิดเห็น ฯลฯ) ใช้โหนดใน DOM เพื่อแสดง

DOM 把以上内容都看做是对象

2.1 วิธีรับองค์ประกอบของหน้า

DOM

ส่วนใหญ่จะใช้เพื่อดำเนินการองค์ประกอบในการพัฒนาจริงของเรา
เราจะรับองค์ประกอบในหน้าได้อย่างไร คุณสามารถรับองค์ประกอบในหน้าได้ด้วยวิธีต่อไปนี้

• รับตาม ID
• รับตามชื่อแท็ก
• รับองค์ประกอบพิเศษ
• ผ่านวิธีการใหม่ใน HTML5
• 
  

2.2 รับตาม ID

ใช้เมธอด getElementById() เพื่อรับออบเจ็กต์องค์ประกอบที่มี ID

document.getElementById('id');

ใช้ console.dir() เพื่อพิมพ์วัตถุองค์ประกอบที่เราได้รับและดูคุณสมบัติและวิธีการในวัตถุได้ดีขึ้น

2.3 รับตามชื่อแท็ก

ใช้ getElementsByTagName() วิธีการส่งคืนคอลเลกชันของวัตถุที่มีชื่อแท็กที่ระบุ

document.getElementsByTagName('tag name');

หมายเหตุ:

1. เนื่องจากสิ่งที่เราได้รับคือชุดของวัตถุ เราจำเป็นต้องสำรวจหากเราต้องการดำเนินการองค์ประกอบภายใน
2. การได้รับวัตถุองค์ประกอบเป็นแบบไดนามิก

2.4 รับ document.getElementsByClassName('class name') ผ่านวิธีการใหม่ของ HTML5

; // ส่งคืนคอลเลกชันวัตถุองค์ประกอบตามชื่อคลาส document.querySelector('selector'); ตัวเลือกที่ระบุ องค์ประกอบแรกวัตถุ document.querySelectorAll('selector'); // กลับตามตัวเลือกที่ระบุ

注意：
ตัวเลือกใน querySelector และ querySelectorAll จำเป็นต้องถูกทำเครื่องหมาย ตัวอย่างเช่น: document.querySelector('#nav');

2.5 รับองค์ประกอบพิเศษ (body, html)

1. รับองค์ประกอบ body

doucumnet.body // ส่งคืนวัตถุองค์ประกอบ body

2. รับองค์ประกอบ html document.documentElement

// ส่งคืนวัตถุองค์ประกอบ html

3. พื้นฐานของเหตุการณ์

3.1 ภาพรวมกิจกรรม

เปิดใช้งาน JavaScript เราเพื่อสร้างหน้าไดนามิกและเหตุการณ์เป็นพฤติกรรมที่ JavaScript ตรวจพบได้
简单理解： 触发--- 响应机制。
แต่ละองค์ประกอบในหน้าเว็บสามารถสร้างเหตุการณ์บางอย่างที่สามารถทริกเกอร์ JavaScript ได้ ตัวอย่างเช่น เราสามารถสร้างเหตุการณ์เมื่อผู้ใช้คลิกปุ่ม แล้วดำเนินการบางอย่าง

3.2 องค์ประกอบสามประการของเหตุการณ์:

1. แหล่งที่มาของเหตุการณ์ (ใคร)
2. ประเภทเหตุการณ์ (เหตุการณ์อะไร)
3. ตัวจัดการเหตุการณ์ (จะทำอย่างไร)

กรณี:

var btn = document.getElementById('btn');
btn.onclick = ฟังก์ชั่น() {
 alert('สบายดีไหม'); 
};

3.3 ขั้นตอนในการดำเนินการเหตุการณ์:

1. รับแหล่งที่มาของเหตุการณ์,
2. ลงทะเบียนเหตุการณ์ (เหตุการณ์ผูก)
3. , เพิ่มตัวจัดการเหตุการณ์ (ในรูปแบบของการกำหนดฟังก์ชัน)

3.3 เหตุการณ์เมาส์ทั่วไป

注：以下图片的事件只是常见的并不代表所有

3.4 วิเคราะห์องค์ประกอบ 3 ประการ

ของเหตุการณ์:
1. แหล่งที่มาของเหตุการณ์ (คุณต้องการดำเนินการอะไร)

2. เหตุการณ์ (คุณต้องการทำอะไรเพื่อให้ได้เอฟเฟกต์การโต้ตอบที่ต้องการ)

3. ฟังก์ชั่นการประมวลผล (คุณต้องการให้เป้าหมายมีลักษณะอย่างไรหลังจากเหตุการณ์ดำเนินไป)

4 องค์ประกอบการดำเนินงาน การดำเนินงาน

DOM JavaScript สามารถเปลี่ยนเนื้อหา โครงสร้าง และรูปแบบของหน้าเว็บ เราสามารถใช้องค์ประกอบการดำเนินงาน DOM เพื่อเปลี่ยนเนื้อหา คุณลักษณะ ฯลฯ ภายในองค์ประกอบ โปรดทราบว่าต่อไปนี้เป็นคุณลักษณะทั้งหมด

4.1 เปลี่ยนเนื้อหาองค์ประกอบ

element.innerText

จากตำแหน่งเริ่มต้นไปยังตำแหน่งสิ้นสุด แต่จะลบแท็ก html ในเวลาเดียวกัน การเว้นวรรคและการขึ้นบรรทัดใหม่จะลบ

เนื้อหาทั้งหมดออกจากจุดเริ่มต้น ตำแหน่งไปยังตำแหน่งสิ้นสุดของ

element.innerHTML

4.2 การดำเนินการแอตทริบิวต์องค์ประกอบทั่วไป

InnerText และ InnerHTML เพื่อเปลี่ยนเนื้อหาองค์ประกอบ
src,hrref
id, alt, title

4.3 การดำเนินการแอตทริบิวต์ขององค์ประกอบแบบฟอร์ม

คุณสามารถใช้ DOM เพื่อดำเนินการแอตทริบิวต์ขององค์ประกอบแบบฟอร์มต่อไปนี้:

ประเภท ค่า ตรวจสอบ เลือก ปิดการใช้งาน

4.4 การดำเนินการแอตทริบิวต์สไตล์

เราสามารถปรับเปลี่ยนขนาด สี ตำแหน่ง และสไตล์อื่น ๆ ขององค์ประกอบผ่าน JS

1. element.style การดำเนินการสไตล์อินไลน์
2. element.className การดำเนินการสไตล์ชื่อคลาส

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

องค์ประกอบการทำงานเป็นเนื้อหาหลักของ DOM

4.5 การคิดแบบแยกส่วน

หากมีองค์ประกอบกลุ่มเดียวกัน และเราต้องการให้องค์ประกอบบางอย่างใช้สไตล์บางอย่าง เราจำเป็นต้องใช้อัลกอริธึมเฉพาะของลูป:

1. ล้างสไตล์ขององค์ประกอบทั้งหมด (ฆ่าผู้อื่น)
2. และตั้งค่าสไตล์สำหรับองค์ประกอบปัจจุบัน ( ปล่อยให้ตัวเองอยู่คนเดียว)
3. โปรดทราบว่าคำสั่งซื้อไม่สามารถย้อนกลับได้ ก่อนอื่นให้ฆ่าคนอื่นแล้วตั้งค่าตัวเอง

4.6 การดำเนินการของแอตทริบิวต์ที่กำหนดเอง

1. รับค่าแอตทริบิวต์

• element.property รับค่าแอตทริบิวต์
• element.getAttribute('attribute');

ความแตกต่าง:

• element.attribute รับค่าแอตทริบิวต์ในตัว (แอตทริบิวต์ที่มาพร้อมกับองค์ประกอบเอง)
• element.getAttribute('attribute'); ส่วนใหญ่จะได้รับแอตทริบิวต์ที่กำหนดเอง (มาตรฐาน) ที่ปรับแต่งโดย คุณสมบัติโปรแกรมเมอร์ของเรา

2. ตั้งค่าคุณสมบัติ

• element.property = 'value' ตั้งค่าคุณสมบัติในตัว
• element.setAttribute('Attribute', 'Value');

ความแตกต่าง:

• element.Attribute ตั้งค่าแอตทริบิวต์ในตัว
• element.setAttribute('Attribute'); ส่วนใหญ่จะตั้งค่าแอตทริบิวต์ที่กำหนดเอง (มาตรฐาน)

3. ลบแอตทริบิวต์

• element.removeAttribute(' Properties ');

4.7 คุณสมบัติที่กำหนดเอง H5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

คุณสมบัติที่กำหนดเองได้รับผ่าน getAttribute('attribute')
อย่างไรก็ตาม แอตทริบิวต์ที่กำหนดเองบางรายการอาจทำให้เกิดความคลุมเครือได้ง่าย และเป็นการยากที่จะระบุว่าเป็นแอตทริบิวต์ในตัวหรือแอตทริบิวต์ที่กำหนดเองขององค์ประกอบ

H5 ได้เพิ่มแอตทริบิวต์ที่กำหนดเองใหม่ให้กับเรา:

1. ตั้งค่าแอตทริบิวต์ที่กำหนดเอง H5

H5 กำหนดว่าส่วนเริ่มต้นของข้อมูลแอตทริบิวต์ที่กำหนดเอง ควรใช้เป็นชื่อแอตทริบิวต์และกำหนดค่า

หรือใช้ JS เพื่อตั้งค่า

element.setAttribute('data-index', 2)

2. รับแอตทริบิวต์ที่กำหนดเอง H5 <br/> ความเข้ากันได้ รับ element.getAttribute('data-index');
H5 ได้เพิ่ม element.dataset.index หรือ element.dataset['index'] ซึ่งได้รับการสนับสนุนเฉพาะใน IE 11 เท่านั้น

5. การทำงานของโหนด

มักจะใช้สองวิธีในการรับองค์ประกอบ:
1. ใช้วิธีการที่ DOM จัดเตรียมไว้เพื่อรับองค์ประกอบ

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector ฯลฯ ` ตรรกะไม่ซับซ้อนและยุ่งยาก

• ใช้

ความสัมพันธ์แบบลำดับชั้นของโหนดเพื่อรับองค์ประกอบ

• - ความสัมพันธ์ของโหนดพี่น้องเพื่อรับองค์ประกอบ
• ตรรกะมีความแข็งแกร่ง แต่เข้ากันได้น้อยกว่าเล็กน้อย

ทั้งสองวิธีสามารถรับโหนดองค์ประกอบซึ่งจะใช้ในภายหลัง แต่การดำเนินการของโหนดนั้นง่ายกว่า

5.2 ภาพรวมของโหนด

เนื้อหาทั้งหมดในหน้าเว็บคือ โหนด (ป้ายกำกับ คุณลักษณะ ข้อความ ความคิดเห็น ฯลฯ) ใน DOM โหนด ใช้โหนดเพื่อเป็นตัวแทน
โหนดทั้งหมดในแผนผัง HTML DOM สามารถเข้าถึงได้ผ่าน JavaScript และองค์ประกอบ HTML ทั้งหมด (โหนด) สามารถแก้ไข สร้าง หรือลบได้

โดยทั่วไปโหนดจะมีแอตทริบิวต์พื้นฐานอย่างน้อยสามประการ: nodeType (ประเภทโหนด), nodeName (ชื่อโหนด) และ nodeValue (ค่าโหนด)

• โหนดองค์ประกอบ nodeType คือ 1
• โหนดแอตทริบิวต์ nodeType คือ 2
• และโหนดข้อความ nodeType คือ 3 (โหนดข้อความประกอบด้วยข้อความ ช่องว่าง ตัวแบ่งบรรทัด ฯลฯ)

我们在实际开发中，节点操作主要操作的是元素节点

5.3 ระดับ

ใช้แผนผัง DOM เพื่อแบ่งโหนด สำหรับความสัมพันธ์แบบลำดับชั้นที่แตกต่างกัน สิ่งที่พบบ่อยที่สุดคือ父子兄层级关系

1. โหนดพาเรนต์

node.parentNode

• คุณสมบัติ parentNode สามารถส่งคืนโหนดพาเรนต์ของโหนดบางโหนดได้ โปรดทราบว่าเป็นโหนดพาเรนต์ล่าสุด
• หากโหนดที่ระบุไม่มีโหนดพาเรนต์ ค่า null จะถูกส่งกลับ

2. โหนด

พาเรนต์ childNodes (มาตรฐาน)

parentNode.childNodes ส่งคืนชุดของโหนดลูกของโหนดที่ระบุ ซึ่งเป็นคอลเลกชันที่อัปเดตทันที
หมายเหตุ: ค่าที่ส่งคืนประกอบด้วยโหนดย่อยทั้งหมด รวมถึงโหนดองค์ประกอบ โหนดข้อความ ฯลฯ
หากคุณต้องการเพียงให้โหนดองค์ประกอบอยู่ข้างใน คุณจะต้องจัดการมันเป็นพิเศษ ดังนั้น โดยทั่วไปเราไม่สนับสนุนการใช้ childNodes

var ul = document.querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. ประเภทโหนด == 1 ) {
 // ul.childNodes[i] เป็นโหนดองค์ประกอบ console.log(ul.childNodes[i]);}}

2. parentNode.children (ไม่ได้มาตรฐาน)

parentNode.children เป็นคุณสมบัติแบบอ่านอย่างเดียวที่ส่งคืนโหนดองค์ประกอบลูกทั้งหมด มันจะส่งคืนโหนดองค์ประกอบลูกเท่านั้น และโหนดอื่นจะไม่ถูกส่งคืน (นี่คือสิ่งที่เรามุ่งเน้น)
แม้ว่าลูกๆ จะไม่ได้มาตรฐาน แต่ก็มีเบราว์เซอร์ต่างๆ รองรับ ดังนั้นเราจึงสามารถใช้

3. parentNode.firstChild

firstChild เพื่อส่งคืนโหนดลูกแรกได้อย่างปลอดภัย หรือหากไม่พบ null หากไม่พบ ในทำนองเดียวกันจะรวมโหนดทั้งหมดไว้ด้วย

4. parentNode.lastChild

LastChild ส่งคืนโหนดลูกสุดท้าย หรือเป็นโมฆะหากไม่พบ ในทำนองเดียวกัน ยังมีโหนดทั้งหมด

5. parentNode.firstElementChild

firstElementChild ส่งคืนโหนดองค์ประกอบลูกแรก หากไม่พบ จะส่งคืน null

6. parentNode.lastElementChild

LastElementChild ส่งคืนโหนดองค์ประกอบย่อยสุดท้าย หรือเป็นค่าว่างหากไม่พบ
注意：这两个方法有兼容性问题，IE9 以上才支持

ในการพัฒนาจริง firstChild และ LastChild มีโหนดอื่นซึ่งไม่สะดวกในการใช้งาน และ firstElementChild และ LastElementChild มีปัญหาความเข้ากันได้ โหนดองค์ประกอบหรือโหนดองค์ประกอบย่อยสุดท้ายล่ะ?
วิธีแก้ไข:

1. หากคุณต้องการโหนดอิลิเมนต์ลูกแรก คุณสามารถใช้ parentNode.chilren[0]
2. หากคุณต้องการโหนดอิลิเมนต์ลูกสุดท้าย คุณสามารถใช้

parentNode.chilren[parentNode.chilren.length - 1]

สรุป

โมเดลอ็อบเจ็กต์เอกสาร (เอกสาร Object Model (เรียกสั้น ๆ ว่า DOM) คืออินเทอร์เฟซการเขียนโปรแกรมมาตรฐานที่แนะนำโดยองค์กร W3C สำหรับการประมวลผลภาษามาร์กอัปที่ขยายได้ (HTML หรือ XML)

W3C ได้กำหนดชุดของอินเทอร์เฟซ DOM ซึ่งเนื้อหา โครงสร้าง และรูปแบบของหน้าเว็บสามารถเปลี่ยนแปลงได้

สำหรับ JavaScript เพื่อเปิดใช้งาน JavaScript เพื่อใช้งาน HTML นั้น JavaScript มีชุดอินเทอร์เฟซการเขียนโปรแกรม DOM ของตัวเอง

สำหรับ HTML นั้น DOM จะสร้าง HTML ในรูปแบบแผนผัง DOM

องค์ประกอบ DOM ที่มีเอกสาร องค์ประกอบ และโหนดเป็นวัตถุ ดังนั้นจึงเรียกว่าโมเดลวัตถุ

เอกสาร ส่วนใหญ่รวมถึงการสร้าง การเพิ่มเติม การลบ การแก้ไข การสืบค้น การดำเนินการแอตทริบิวต์ และการดำเนินการเหตุการณ์