15 วิธีจาวาสคริปต์สำหรับการจัดการ DOM สำหรับนักพัฒนาเว็บ
ในฐานะนักพัฒนาเว็บคุณต้องจัดการบ่อยครั้ง DOM, โมเดลวัตถุที่เบราว์เซอร์ใช้ ระบุโครงสร้างตรรกะ ของเว็บเพจและใช้โครงสร้างนี้เป็น แสดงองค์ประกอบ HTML บนหน้าจอ.
HTML กำหนด โครงสร้าง DOM เริ่มต้น. อย่างไรก็ตามในหลายกรณีคุณอาจต้องการจัดการกับ JavaScript โดยทั่วไปเพื่อ เพิ่มฟังก์ชันพิเศษ ไปยังเว็บไซต์.
ในโพสต์นี้คุณจะพบรายการ 15 เมธอด JavaScript พื้นฐาน ที่ ช่วยเหลือการจัดการ DOM. คุณน่าจะใช้วิธีการเหล่านี้บ่อยครั้งในรหัสของคุณและคุณจะชนพวกเขาในบทช่วยสอน JavaScript ของเรา.
1. querySelector ()
querySelector () วิธี ส่งคืนองค์ประกอบแรกที่ตรงกับตัวเลือก CSS อย่างน้อยหนึ่งตัว. หากไม่พบข้อมูลที่ตรงกันจะส่งคืน โมฆะ.
ก่อน querySelector () เปิดตัวนักพัฒนาใช้กันอย่างแพร่หลาย getElementById () วิธีการซึ่ง ดึงองค์ประกอบที่มีการระบุ รหัส ราคา.
แม้ว่า getElementById () ยังคงเป็นวิธีที่มีประโยชน์ แต่ด้วยวิธีการใหม่กว่า querySelector () และ querySelectorAll () วิธีการที่เรามีอิสระที่จะ องค์ประกอบเป้าหมายตามตัวเลือก CSS ใด ๆ, ทำให้เรามีความยืดหยุ่นมากขึ้น.
วากยสัมพันธ์
var ele = document.querySelector (ตัวเลือก);
เอเล- องค์ประกอบแรกที่ตรงกันหรือโมฆะ(ถ้าไม่มีองค์ประกอบใดตรงกับตัวเลือก)ผู้เลือก- ตัวเลือก CSS อย่างน้อยหนึ่งตัวเช่น"#fooId",".fooClassName"," .class1.class2", หรือ".class1, .class2"
ตัวอย่างรหัส
ในตัวอย่างนี้ก่อน วรรคหนึ่ง วรรคสอง วรรคสาม ทดสอบ แตกต่าง องค์ประกอบที่ตรงกันจะถูกส่งกลับเป็น ตัวอย่างด้านล่างใช้ HTML เช่นเดียวกับก่อนหน้านี้ อย่างไรก็ตามในตัวอย่างนี้ย่อหน้าทั้งหมดจะถูกเลือกด้วย วรรคหนึ่ง วรรคสอง วรรคสาม เหตุการณ์ที่เกิดขึ้น อ้างถึงสิ่งที่เกิดขึ้นกับองค์ประกอบ HTML เช่นการคลิกการโฟกัสหรือการโหลดซึ่งเราสามารถโต้ตอบกับ JavaScript ได้ เราสามารถกำหนดฟังก์ชั่น JS ให้กับ ฟัง สำหรับเหตุการณ์เหล่านี้ในองค์ประกอบและทำบางสิ่งบางอย่างเมื่อเหตุการณ์เกิดขึ้น. คุณสามารถทำได้สามวิธี กำหนดฟังก์ชั่นให้กับเหตุการณ์บางอย่าง. ถ้า วิธีการ หยุดการเดือดปุด ๆ ของเหตุการณ์เช่นป้องกันการโทรของผู้ฟังเหตุการณ์ใด ๆ สำหรับประเภทเหตุการณ์เดียวกันในบรรพบุรุษขององค์ประกอบ. ในการใช้คุณสมบัตินี้คุณสามารถใช้ 2 ไวยากรณ์: ผู้ฟังจะถูกเรียกเพียงครั้งแรกที่มีเหตุการณ์เกิดขึ้นจากนั้นจะถูกนำออกจากกิจกรรมโดยอัตโนมัติและจะไม่ถูกเรียกใช้อีกต่อไป. การกระทำเริ่มต้นของเหตุการณ์ไม่สามารถหยุดได้ด้วยเมธอด PreventDefault (). ในตัวอย่างนี้เราเพิ่มฟังเหตุการณ์คลิกที่เรียกว่า มอบหมายให้ ใช้ไวยากรณ์เดียวกับที่กล่าวไว้ข้างต้น ติดตามตัวอย่างรหัสที่เราใช้ที่ คุณสามารถเพิ่มองค์ประกอบนี้ในหน้าเว็บในภายหลังได้ด้วยการใช้ที่แตกต่างกัน วิธีการสำหรับการแทรก DOM, เช่น ด้วยตัวอย่างต่อไปนี้คุณสามารถสร้างองค์ประกอบย่อหน้าใหม่: เด็กที่จะแทรกสามารถเป็นได้ทั้ง องค์ประกอบที่สร้างขึ้นใหม่, หรือ มีอยู่แล้ว. ในกรณีหลังมันจะถูกย้ายจากตำแหน่งก่อนหน้าไปยังตำแหน่งของลูกคนสุดท้าย. ในตัวอย่างนี้เราใส่ ในการสาธิตเชิงโต้ตอบตัวอักษรจาก ตรวจสอบวิธีการ ในตัวอย่างนี้เราลบ ในตัวอย่างนี้องค์ประกอบของเด็ก เมื่อคุณต้องสร้างองค์ประกอบใหม่ที่จำเป็นต้องมี เหมือนกับองค์ประกอบที่มีอยู่แล้ว บนหน้าเว็บคุณสามารถทำได้ง่ายๆ สร้างสำเนาขององค์ประกอบที่มีอยู่แล้ว ใช้ ในตัวอย่างนี้เราสร้างสำเนาสำหรับ ผลที่ตามมา, หากองค์ประกอบลูกอ้างอิงไม่อยู่หรือคุณผ่านอย่างชัดเจน ในตัวอย่างนี้เราสร้างใหม่ การสาธิตเชิงโต้ตอบนี้ทำงานคล้ายกับการสาธิตก่อนหน้าของเราที่เป็นของ มัน สร้าง ทำไมเราไม่เพิ่มองค์ประกอบลงในทรี DOM โดยตรง เพราะการแทรก DOM ทำให้เกิดการเปลี่ยนแปลงเค้าโครง, และมันเป็น กระบวนการเบราว์เซอร์ที่มีราคาแพง เนื่องจากการแทรกองค์ประกอบที่ตามมาหลายครั้งจะทำให้เกิดการเปลี่ยนแปลงเค้าโครงมากขึ้น. ในทางกลับกันการเพิ่มองค์ประกอบให้กับ ในตัวอย่างนี้เราสร้างหลายแถวของตารางและเซลล์ด้วย ดังนั้นห้าแถว - แต่ละแถวมีหนึ่งเซลล์ที่มีตัวเลขตั้งแต่ 1 ถึง 5 เป็นเนื้อหา - จะถูกแทรกภายในตาราง. บางครั้งคุณต้องการ ตรวจสอบค่าคุณสมบัติ CSS ขององค์ประกอบก่อนทำการเปลี่ยนแปลงใด ๆ คุณสามารถใช้ ในตัวอย่างนี้เราได้รับและแจ้งเตือนการคำนวณ ในตัวอย่างนี้เราเพิ่ม ในตัวอย่างนี้เราแจ้งเตือนค่าของ ในตัวอย่างนี้เราลบ querySelector () วิธีการและสีของมันจะเปลี่ยนเป็นสีแดง.
var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red'; การสาธิตเชิงโต้ตอบ
querySelector () วิธีการในการสาธิตเชิงโต้ตอบต่อไปนี้ เพียงพิมพ์ตัวเลือกที่ตรงกับสิ่งที่คุณสามารถหาได้ในกล่องสีฟ้า (เช่น. #สาม) และคลิกปุ่มเลือก โปรดทราบว่าถ้าคุณพิมพ์ .กลุ่ม, ตัวอย่างแรกเท่านั้น จะถูกเลือก.2.
querySelectorAll ()querySelector () ที่ส่งกลับเฉพาะอินสแตนซ์แรกขององค์ประกอบที่ตรงกันทั้งหมด, querySelectorAll () ส่งคืนองค์ประกอบทั้งหมดที่ตรงกับตัวเลือก CSS ที่ระบุ.NodeList วัตถุที่จะเป็นวัตถุว่างเปล่าหากไม่พบองค์ประกอบที่ตรงกัน.วากยสัมพันธ์
var eles = document.querySelectorAll (ตัวเลือก);
eles - NodeList วัตถุที่มีองค์ประกอบที่ตรงกันทั้งหมดเป็นค่าคุณสมบัติ วัตถุนั้นว่างเปล่าหากไม่พบรายการที่ตรงกัน.ผู้เลือก - ตัวเลือก CSS อย่างน้อยหนึ่งตัวเช่น "#fooId", ".fooClassName", " .class1.class2", หรือ ".class1, .class2"ตัวอย่างรหัส
querySelectorAll (), และเป็นสีฟ้า.
var ย่อหน้า = document.querySelectorAll ('p'); สำหรับ (var p ของย่อหน้า) p.style.color = 'blue'; 3.
addEventListener ()foo () เป็นฟังก์ชั่นที่กำหนดเองคุณสามารถลงทะเบียนได้ เป็นผู้ฟังเหตุการณ์คลิก (เรียกว่าเมื่อองค์ประกอบปุ่มถูกคลิก) ในสามวิธี:
var btn = document.querySelector ('ปุ่ม'); btn.onclick = foo; var btn = document.querySelector ('ปุ่ม'); btn.addEventListener ('คลิก', foo); addEventListener () (ทางออกที่สาม) มี ข้อดีบางอย่าง; มันเป็นมาตรฐานล่าสุด - อนุญาตให้กำหนดมากกว่าหนึ่งฟังก์ชั่นเป็นผู้ฟังเหตุการณ์หนึ่งเหตุการณ์ - และมาพร้อมกับชุดตัวเลือกที่มีประโยชน์.วากยสัมพันธ์
ele.addEventListener (evt, listener, [options]);
เอเล - องค์ประกอบ HTML ที่ผู้ฟังเหตุการณ์จะรับฟัง.EVT - เหตุการณ์เป้าหมาย.ผู้ฟัง - โดยทั่วไปแล้วฟังก์ชัน JavaScript.ตัวเลือก - (เป็นทางเลือก) วัตถุที่มีชุดของคุณสมบัติบูลีน (ด้านล่าง).ตัวเลือก จะเกิดอะไรขึ้นเมื่อตั้งค่าเป็น จริง?การจับกุม ele.addEventListener (evt, listener, true)ele.addEventListener (evt, listener, capture: true);ครั้งหนึ่ง อยู่เฉยๆ ตัวอย่างรหัส
foo, ไปที่ แท็ก HTML.
var btn = document.querySelector ('ปุ่ม'); btn.addEventListener ( 'คลิก', foo); ฟังก์ชั่น foo () alert ('hello'); การสาธิตเชิงโต้ตอบ
foo () ฟังก์ชั่นที่กำหนดเองเป็นผู้ฟังเหตุการณ์ในสามเหตุการณ์ต่อไปนี้: อินพุต, คลิก หรือ วางเมาส์ & ทริกเกอร์เหตุการณ์ที่เลือกในฟิลด์อินพุตด้านล่างโดยการโฮเวอร์คลิกหรือพิมพ์.4.
removeEventListener ()removeEventListener () วิธี แยกผู้ฟังเหตุการณ์ เพิ่มก่อนหน้านี้ด้วย addEventListener () วิธี จากเหตุการณ์ที่กำลังฟังอยู่.วากยสัมพันธ์
ele.removeEventListener (EVT, ฟัง, [ตัวเลือก]);
addEventListener () วิธีการ (ยกเว้นสำหรับ ครั้งหนึ่ง ตัวเลือกที่ไม่รวม) ตัวเลือกที่ใช้จะเฉพาะเจาะจงมากเกี่ยวกับการระบุฟังที่จะแยกออก.ตัวอย่างรหัส
addEventListener (), ที่นี่เราลบฟังเหตุการณ์คลิกที่เรียกว่า foo จาก ธาตุ. btn.removeEventListener ( 'คลิก', foo);
5.
createElement ()createElement () วิธี สร้างองค์ประกอบ HTML ใหม่ ใช้ ชื่อของแท็ก HTML ที่จะสร้างเช่น 'p' หรือ 'div'.AppendChild () (ดูภายหลังในโพสต์นี้).วากยสัมพันธ์
document.createElement (tagname);
tagname - ชื่อของแท็ก HTML ที่คุณต้องการสร้าง. ตัวอย่างรหัส
var pEle = document.createElement ('p') 6.
appendChild ()appendChild () วิธี เพิ่มองค์ประกอบเป็นลูกคนสุดท้าย ไปยังองค์ประกอบ HTML ที่เรียกใช้วิธีนี้.วากยสัมพันธ์
ele.appendChild (childEle)
เอเล - องค์ประกอบ HTML ที่ childEle ถูกเพิ่มเป็นลูกคนสุดท้าย.childEle - องค์ประกอบ HTML ที่เพิ่มเป็นลูกคนสุดท้ายของ เอเล.ตัวอย่างรหัส
องค์ประกอบนั้นเป็นลูกของ appendChild () และดังกล่าวข้างต้น createElement () วิธีการ.
var div = document.querySelector ('div'); var strong = document.createElement ('strong'); strong.textContent = 'Hello'; div.appendChild (แข็งแกร่ง); การสาธิตเชิงโต้ตอบ
รุ่น A ประเภทสิทธิ ไปยัง #R เป็นองค์ประกอบลูกของ # พ่อแม่หนึ่ง, # พ่อแม่สอง, และ # แม่สาม ตัวเลือกรหัส.appendChild () วิธีการทำงานโดย พิมพ์ชื่อผู้ปกครองและชื่อผู้เลือกย่อยหนึ่งรายการลงในฟิลด์ป้อนข้อมูลด้านล่าง. คุณสามารถเลือกเด็กที่เป็นของผู้ปกครองคนอื่นได้เช่นกัน.7.
RemoveChild ()RemoveChild () วิธี ลบองค์ประกอบลูกที่ระบุ จากองค์ประกอบ HTML ที่เรียกใช้วิธีนี้.วากยสัมพันธ์
ele.removeChild (childEle)
เอเล - องค์ประกอบหลักของ childEle.childEle - องค์ประกอบย่อยของ เอเล.ตัวอย่างรหัส
องค์ประกอบที่เราเพิ่มเมื่อเป็นเด็กใน appendChild () วิธี. div.removeChild (แข็งแกร่ง);
8.
replaceChild ()replaceChild () วิธี แทนที่องค์ประกอบลูกด้วยอีกองค์ประกอบหนึ่ง เป็นขององค์ประกอบหลักที่เรียกใช้วิธีนี้.วากยสัมพันธ์
ele.replaceChild (newChildEle, oldChileEle)
เอเล - องค์ประกอบหลักที่จะแทนที่ลูก.newChildEle - องค์ประกอบย่อยของ เอเล ที่จะเข้ามาแทนที่ oldChildEle.oldChildEle - องค์ประกอบย่อยของ เอเล, ที่จะถูกแทนที่ด้วย newChildEle.ตัวอย่างรหัส
เป็นของ แท็ก.
var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.replaceChild (em, strong); 9.
cloneNode ()cloneNode () วิธี.วากยสัมพันธ์
var dupeEle = ele.cloneNode ([ลึก])dupeEle - คัดลอกจาก เอเล ธาตุ.เอเล - องค์ประกอบ HTML ที่จะคัดลอก.ลึก - (เป็นทางเลือก) ค่าบูลีน หากตั้งไว้ที่ จริง, dupeEle จะมีองค์ประกอบของเด็กทั้งหมด เอเล มีถ้ามันถูกตั้งค่าเป็น เท็จ มันจะถูกโคลนโดยไม่มีลูก.ตัวอย่างรหัส
องค์ประกอบด้วย cloneNode (), จากนั้นเราเพิ่มลงใน appendChild () วิธี. องค์ประกอบทั้งกับ สวัสดี สตริงเป็นเนื้อหา.
var strong = document.querySelector ('strong'); สำเนา var = strong.cloneNode (จริง); var div = document.querySelector ('div'); div.appendChild (สำเนา); 10.
insertBefore ()insertBefore () วิธี เพิ่มองค์ประกอบลูกที่ระบุไว้ก่อนองค์ประกอบลูกอีก. วิธีการที่ถูกเรียกโดยองค์ประกอบหลัก.โมฆะ แทนที่องค์ประกอบของเด็กที่จะแทรก เป็นลูกคนสุดท้ายของผู้ปกครอง (คล้ายกับ appendChild ()).วากยสัมพันธ์
ele.insertBefore (newEle, refEle);
เอเล - องค์ประกอบหลัก.newEle - องค์ประกอบ HTML ใหม่ที่จะแทรก.refEle - องค์ประกอบย่อยของ เอเล ก่อนที่ newEle จะถูกแทรก.ตัวอย่างรหัส
องค์ประกอบที่มีข้อความอยู่ข้างในและเพิ่มเข้าไป ก่อน องค์ประกอบภายใน
var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.insertBefore (em, strong); การสาธิตเชิงโต้ตอบ
appendChild () วิธี. ที่นี่คุณจะต้องพิมพ์ตัวเลือก id ขององค์ประกอบย่อยสองรายการ (จาก รุ่น A ประเภทสิทธิ ไปยัง #R) ลงในกล่องป้อนข้อมูลและคุณสามารถดูได้ว่า insertBefore () เมธอดย้ายชายด์ที่ระบุแรก ก่อน ที่สอง.11.
createDocumentFragment ()createDocumentFragment () วิธีการอาจไม่เป็นที่รู้จักกันดีเหมือนกับคนอื่น ๆ ในรายการนี้ แต่ก็เป็นวิธีที่สำคัญโดยเฉพาะอย่างยิ่งถ้าคุณต้องการ แทรกองค์ประกอบหลายรายการเป็นกลุ่ม, เช่นการเพิ่มหลายแถวลงในตาราง.DocumentFragment วัตถุ, ซึ่งเป็นหลักคือ โหนด DOM ที่ไม่ได้เป็นส่วนหนึ่งของทรี DOM. เป็นเหมือนบัฟเฟอร์ที่เราสามารถเพิ่มและจัดเก็บองค์ประกอบอื่น ๆ (เช่นหลายแถว) ก่อนที่จะเพิ่มลงในโหนดที่ต้องการในต้นไม้ DOM (เช่นไปยังตาราง).DocumentFragment วัตถุ ไม่ทำให้การเปลี่ยนแปลงเค้าโครงใด ๆ, เพื่อให้คุณสามารถเพิ่มองค์ประกอบได้มากเท่าที่คุณต้องการก่อนที่จะส่งไปยังทรี DOM ทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ในตอนนี้เท่านั้น.วากยสัมพันธ์
document.createDocumentFragment ()
ตัวอย่างรหัส
createElement () วิธีการจากนั้นเพิ่มพวกเขาไปยัง DocumentFragment วัตถุในที่สุดเพิ่มชิ้นส่วนเอกสารนั้นลงใน HTML ใช้
appendChild () วิธี.
var table = document.querySelector ("table"); var df = document.createDocumentFragment (); สำหรับ (var i = 0; i<5; i++) var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr); table.appendChild(df); 12.
getComputedStyle ()ele.style คุณสมบัติที่จะทำเช่นเดียวกัน getComputedStyle () วิธีการที่ได้รับการทำเพียงเพื่อจุดประสงค์นี้มัน ส่งคืนค่าที่คำนวณได้แบบอ่านอย่างเดียว ของคุณสมบัติ CSS ทั้งหมดขององค์ประกอบ HTML ที่ระบุ.วากยสัมพันธ์
var style = getComputedStyle (ele, [pseudoEle])
สไตล์ - CSSStyleDeclaration วัตถุที่ส่งคืนโดยวิธีการ มันเก็บคุณสมบัติ CSS ทั้งหมดและค่าของ เอเล ธาตุ.เอเล - องค์ประกอบ HTML ซึ่งมีการดึงค่าคุณสมบัติ CSS.pseudoEle - (เป็นทางเลือก) สตริงที่แสดงถึงองค์ประกอบปลอม (ตัวอย่างเช่น, ':หลังจาก') หากมีการกล่าวถึงคุณสมบัติ CSS ขององค์ประกอบหลอกที่ระบุที่เกี่ยวข้อง เอเล จะถูกส่งกลับ.ตัวอย่างรหัส
ความกว้าง ค่าของ getComputedStyle () วิธี.
var style = getComputedStyle (document.querySelector ('div')); การแจ้งเตือน (style.width); 13.
setAttribute ()setAttribute () วิธีการอย่างใดอย่างหนึ่ง เพิ่มคุณสมบัติใหม่ ไปยังองค์ประกอบ HTML หรือ อัพเดตค่า ของแอตทริบิวต์ที่มีอยู่แล้ว.วากยสัมพันธ์
ele.setAttribute (ชื่อค่า);
เอเล - องค์ประกอบ HTML ที่มีการเพิ่มแอตทริบิวต์หรือมีการอัปเดตแอตทริบิวต์.ชื่อ - ชื่อของแอตทริบิวต์.ราคา - ค่าของคุณสมบัติ.ตัวอย่างรหัส
contenteditable คุณลักษณะที่จะ setAttribute () ซึ่งจะทำให้เนื้อหาสามารถแก้ไขได้. var div = document.querySelector ('div'); div.setAttribute ( 'contenteditable' ") 14.
getAttribute ()getAttribute () วิธี ส่งคืนค่าของแอตทริบิวต์ที่ระบุ เป็นขององค์ประกอบ HTML ที่แน่นอน.วากยสัมพันธ์
ele.getAttribute (ชื่อ);
เอเล - องค์ประกอบ HTML ซึ่งมีการร้องขอคุณสมบัติ.ชื่อ - ชื่อของแอตทริบิวต์.ตัวอย่างรหัส
contenteditable คุณลักษณะที่เป็นของ getAttribute () วิธี. var div = document.querySelector ('div'); การแจ้งเตือน (div.getAttribute ( 'contenteditable')) 15.
removeAttribute ()removeAttribute () วิธี ลบแอตทริบิวต์ที่กำหนด ขององค์ประกอบ HTML เฉพาะ.วากยสัมพันธ์
ele.removeAttribute (ชื่อ);เอเล - องค์ประกอบ HTML ที่จะลบแอตทริบิวต์.ชื่อ - ชื่อของแอตทริบิวต์.ตัวอย่างรหัส
contenteditable คุณลักษณะจาก var div = document.querySelector ('div'); div.removeAttribute ( 'contenteditable');
