มาตรฐาน DOM จะโอนคำขอค้นหาขององค์ประกอบ เมธอดเดียวกัน getElementById, getElementsByTagName และ getElementsByName

วิธีการและลูกเล่นที่มีประสิทธิภาพมากขึ้นในการโปรโมตไลบรารีจาวาสคริปต์

ค้นหาโดย id

แซมมี่ คู่มือการใช้งานรู้องค์ประกอบใน DOM - tse yogo โดย id สำหรับวิกิที่จะถูกสร้างขึ้น document.getElementById(id)

ตัวอย่างเช่น โค้ดถัดไปคือการเปลี่ยนสีของข้อความเป็น div สีดำ "e with id="dataKeeper" :

Document.getElementById("dataKeeper").style.color = "สีน้ำเงิน"

ค้นหาแท็ก

ขั้นตอนต่อไปคือการลบองค์ประกอบทั้งหมดที่มีแท็กเพลงและรายการความต้องการตรงกลาง สำหรับสิ่งนั้น document.getElementsByTagName(tag) คุณเปลี่ยนอาร์เรย์ขององค์ประกอบเพื่อสร้างแท็กดังกล่าว

ตัวอย่างเช่น คุณสามารถใช้องค์ประกอบอื่น (การนับในอาร์เรย์เริ่มต้นจากศูนย์) ด้วยแท็ก li:

Document.getElementsByTagName("LI")

สามารถเรียก getElementsByTagName ได้ไม่เฉพาะสำหรับเอกสารเท่านั้น แต่ยังเรียกสำหรับองค์ประกอบใดๆ ก็ได้ ซึ่งอาจเป็นแท็ก (ไม่ใช่ข้อความ)

เมื่อจะพบ tsimu tі ob'єkti, yakі znahodyatsya pіd tsim องค์ประกอบ

ตัวอย่างเช่น การโทรครั้งต่อไปจะใช้รายการองค์ประกอบ LI ที่ปรากฏตรงกลางแท็ก div แรก:

Document.getElementsByTagName("DIV")).getElementsByTagName("LI") เอกสาร

เอาของดีมาฝากจ้า

Viklik elem.getElementsByTagName("*") หมุนรายการลูกปัจจุบันของโหนดองค์ประกอบ ตามลำดับทางอ้อมของพวกเขา.

ตัวอย่างเช่น ใน DOM นี้:

รหัสเช่นนี้:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") สำหรับ (var i=0; i

ลำดับ Vivede: ol1, li1, li2

ค้นหาชื่อ: getElementsByName

document.getElementsByName(name) วิธีการเปลี่ยนองค์ประกอบทั้งหมดที่มีชื่อเดียวกัน (ชื่อแอตทริบิวต์) เป็นองค์ประกอบที่กำหนด

Vіn pratsyuєเฉพาะกับองค์ประกอบเหล่านี้ซึ่งส่งผ่านแอตทริบิวต์ชื่อไปยังข้อกำหนดอย่างชัดเจน: ไม่ใช่รูปแบบ , อินพุต , a , เลือก , textarea และอื่น ๆ ทั่วไป

วิธีการ document.getElementsByName ไม่สามารถใช้ได้กับองค์ประกอบอื่นๆ ของประเภท div, p และสิ่งที่คล้ายคลึงกัน

ทางอื่น

สำรวจวิธีอื่นๆ ในการค้นหา DOM: XPath, cssQuery เป็นต้น ตามกฎแล้ว ไลบรารี JavaScript จะถูกนำไปใช้เพื่อขยายความสามารถของเบราว์เซอร์มาตรฐาน

นอกจากนี้ยังมีเมธอด getElementsByClassName เพื่อค้นหาองค์ประกอบตามคลาส แต่ใช้งานไม่ได้ใน IE ดังนั้นจึงดูไม่เหมือนสิ่งใดในรูปแบบที่บริสุทธิ์ที่สุด

มักจะให้อภัย pov'azana z vіdsutnistyu ตัวอักษร สชื่อของเมธอด getElementById เหมือนกับตัวอักษร є ในวิธีอื่นๆ: getElement สโดยชื่อ.

กฎข้อนี้ง่าย: องค์ประกอบเดียว - องค์ประกอบ จำนวนมาก - Element ส. วิธีการใช้งาน *องค์ประกอบ ส* หมุนรายการโหนด

เมื่อไม่กี่วันก่อน หลังจากรับงานทดสอบจากบริษัทแห่งหนึ่งสำหรับตำแหน่งว่างของ Front-end dev แน่นอนว่างานนี้เกิดจากหลายจุด แต่ในขณะเดียวกันก็มีโอกาสน้อยที่จะพูดถึงหนึ่งในนั้น - การจัดเรื่องตลกด้านข้าง ทูบโต เล่นตลกซ้ำซากสำหรับข้อความที่ป้อนในฟิลด์ (คล้ายกับ Ctrl + F ในเบราว์เซอร์) ลักษณะเฉพาะของงานคือการเลือกว่าเฟรมเวิร์ก JS หรือไลบรารีถูกบล็อกหรือไม่ ทั้งหมดเขียนใน JavaScript ดั้งเดิม.

ค้นหาโซลูชันพร้อม

ยัคโช โคมุส ซิกาโว, โค้ด บราโว.

สคริปต์ zapratsyuvav ทันที ฉันคิดว่าอาหารนั้นเป็นวิริซีน แต่อย่างที่ปรากฏ ไม่ใช่ในรูปของผู้เขียนบท อาหารใหม่มีน้อยมาก สคริปต์vіvค้นหาแท็กทั้งหมด ... และตามที่คุณร้องเพลงเดาแล้วเมื่อคุณถามว่ามีสัญลักษณ์บางอย่างที่จะเดาแท็กหรือคุณลักษณะของแท็กหรือไม่ ด้าน HTML ทั้งหมดเสีย

เหตุใดสคริปต์จึงทำงานไม่ถูกต้อง

... ความรู้ zbig ...
จากนั้นเราจะแทนที่แท็กปัจจุบัน ร่างกายสำหรับการถอนเงินใหม่ เลย์เอาต์ได้รับการอัปเดต เปลี่ยนสไตล์ และผลลัพธ์จะแสดงบนหน้าจอ

คุณได้ร้องเพลงเข้าใจแล้วว่าปัญหาคืออะไร แต่ฉันจะอธิบายรายงานนี้ต่อไป เปิดเผยว่ามีการป้อนคำในฟิลด์ "ดิวิ". จะเข้าใจเข้าใจได้อย่างไร ร่างกายєแท็กอื่นที่ไม่ระบุชื่อรวมถึง div. ชอบพวกเราทุกคน "ดิวิ"สไตล์ zastosovuєmo, ได้รับการแต่งตั้งให้สูงกว่า, tse จะเป็นบล็อก แต่ชิ้นส่วนของการออกแบบถูกทำลายอย่างไม่สมเหตุสมผล ดังนั้น หลังจากเขียนซ็อกเก็ตใหม่ เราจะนำหน้าเว็บที่เสียหายกลับคืนมา มองแบบนี้.

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

เรายังเขียนสคริปต์ตั้งแต่เริ่มต้น

Ninіเราtsіkavitแบบฟอร์มіz poshukom ล้อมด้วยเส้นสีแดง

มาทำลายสิ่งต่าง ๆ กันเถอะ ฉันทำอย่างนี้ (จนถึง HTML ล้วนๆ) สร้างแท็กสามแท็ก

ร่าเริง- สำหรับการป้อนข้อความ;
อื่น- สำหรับการเล่าเรื่องตลก (ใช้วิสัยทัศน์);
ที่สาม- สำหรับมุขตลก (เห็นผลที่คุณรู้)

ขั้นแรก มาทำให้ถูกต้อง: มาเขียนฟังก์ชัน wiki เมื่อกดปุ่ม ถามหาปุ่มนั้นกัน ลองดูแบบนี้:

ให้ช่องที่มีข้อความ id="text-to-find" (id นั้นจะถูกย้ายไปยังองค์ประกอบ js).

ปุ่มสำหรับการปรับขนาดมีคุณสมบัติดังต่อไปนี้: type="button" onclick="javascript: FindOnPage("text-to-find", false); คืนค่าเท็จ"

- ประเภท: ปุ่ม
- เมื่อกดแล้ว ฟังก์ชัน FindOnPage("text-to-find", false); มันส่งผ่าน id ของฟิลด์พร้อมข้อความ เท็จ

ปุ่มขอแอตทริบิวต์ต่อไปนี้: type="button" onclick="javascript: FindOnPage("text-to-find", true); คืนค่าเท็จ"

- ประเภท : ส่ง
- เมื่อกดแล้ว ฟังก์ชัน FindOnPage("text-to-find", true); มันส่งผ่าน id ของฟิลด์พร้อมข้อความ จริง

คุณ ร้องเพลง กล่าวถึงคุณลักษณะอีก 1 ประการ: ถูกผิด . Yogo จะได้รับชัยชนะในการนัดหมายราวกับว่าปุ่มถูกกดด้วยตัวเอง (พูดสะกิดหรือกดเล็กน้อย) ถ้านูนบนสกสุวรรณยาก็ส่งต่อ เท็จ. ถ้านูนเรื่องตลกก็ส่งต่อ จริง.

มาเริ่มเขียนโค้ดกันก่อน กลับมาที่มันและมาคุยกันก่อน เพราะเราจะทำทุกอย่างได้ ทูบโต อันที่จริงเราจะเขียนแผน d_y นอกจากนี้ เราต้องการให้ค้นหาด้านข้างเมื่อป้อนข้อความในช่อง แต่ไม่สามารถป้อนแท็กและแอตทริบิวต์ได้ ทูบโต วัตถุข้อความน้อยลง จำนวนการเข้าถึง - vpevneniy єวิธีที่รวย แต่ในเวลาเดียวกัน vikoristovuvatimemo vyslovlyuvannya ปกติ

Otzhe ตอนนี้ viraz shukatime เป็นประจำมากขึ้นเฉพาะข้อความถัดไป พิมพ์: ">...ข้อความ...<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.

/>(.*?)ดังนั้นเราจึงรู้ว่าเราต้องการโค้ดบางส่วน เช่น เราจะแยกวิเคราะห์และ shukati zbіgi ด้วยข้อความ ซึ่งเป็น koristuvach จากนั้นเราจะเพิ่มสไตล์ให้กับวัตถุที่เรารู้จักแล้วแทนที่โค้ด html ด้วยอันใหม่

มาเริ่มกันเลย. ฉันกำลังจะเปลี่ยน ดังนั้นเราต้องการมัน

อินพุต Var, ค้นหา, pr, ผลลัพธ์, result_arr, locale_HTML, result_store; // อินพุต - ยอมรับข้อความซึ่งเป็นข้อความสั้น // ค้นหา - robimo สั่งนิพจน์ทั่วไป //pr - เราทำการสตรีม //result - การเลือกข้อความจาก pr (เพื่อเปิดใช้งานแท็กและแอตทริบิวต์) //result_arr - อะนาล็อกของ pr แต่มีสไตล์สำหรับการจับคู่ //locale_HTML - ดั้งเดิม ซึ่งจะไม่เปลี่ยนแปลง ผู้พิชิตการไร้รูปแบบ
ฉันมีความสำคัญทันที locale_HTMLความหมายเป็นอิสระจากสิ่งนั้น ฉันสงสัยว่ามันคืออะไร จำเป็นต้องรักษาต้นฉบับของเพจไว้พร้อมๆ กัน และทำให้มีความเป็นไปได้ในการรีเซ็ตสไตล์

อินพุต Var, ค้นหา, pr, ผลลัพธ์, result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // เปลี่ยนทั้งตัว (ภายนอก)
โอเค เรามาสร้างฟังก์ชันกัน วิธีเรียกจาก โดม. ฉันนึกภาพออกว่าตรงกลางเรามีสองหน้าที่ ผิวของปุ่ม spratsovu ที่กดจนค้าง อาเจมีหรือชูกาเยโม หรือทำให้โยโกเป็นโมฆะ І ถูกควบคุมโดยคุณลักษณะนี้ ถูกผิดคุณจำได้อย่างไร นอกจากนี้ คุณต้องระวังด้วยว่าเมื่อคุณถามอีกครั้ง รูปแบบความผิดเพิ่มเติมจะถูกรีเซ็ตเป็นศูนย์ ในอันดับนี้ เราใช้สิ่งต่อไปนี้:

อินพุต Var, ค้นหา, pr, ผลลัพธ์, result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // เปลี่ยนฟังก์ชันทั้งตัว (Potkovkovy) FindOnPage(ชื่อ, สถานะ) ( if(status) ( FindOnPageBack(); FindOnPageGo(); ) //เราเห็นแล้ว)
ตกลง ส่วนหนึ่งของตรรกะถูกนำมาใช้ ระยะทางจะกระจุย จำเป็นต้องแปลงคำ otrimane เป็นสัญลักษณ์จำนวนหนึ่ง Adzhe navіscho shukati 1 ตัวอักษร/สัญลักษณ์ Zagalom ฉัน vyrіshiv tsyu mozhlivіst obmezhit 3+ สัญลักษณ์

Otzhe ค่าpriymaєmoเช่นvvіv koristuvach และรกร้างจาก yogo dozhini, vykonuєmoทั้งหน้าที่หลักของการค้นหาหรือหน้าที่ของการมองไปข้างหน้าของศูนย์นั้น ลองดูแบบนี้:

<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>ถ้า ! สถานะ) ( FindOnPageBack(); ) // รับมุมมอง )
ฉันจะอธิบายรหัสทันที สิ่งเดียวที่ไม่ชัดเจนคือแกนของแถวนี้:

ฟังก์ชัน FindOnPageBack() ( document.body.innerHTML = locale_HTML; )

ทุกอย่างง่ายที่นี่: วิธีการ innerHTMLเปลี่ยน htmlรหัสวัตถุ ในกรณีนี้ เราเพียงแค่แทนที่ปัจจุบัน ร่างกายที่เดิมซึ่งเราเก็บไว้เป็นชั่วโมงของการกักขังของทุกด้าน

อินพุต Var, ค้นหา, pr, ผลลัพธ์, result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // เปลี่ยนฟังก์ชันทั้งหมด (นอก) FindOnPage (ชื่อ, สถานะ) ( input = document.getElementById(name).value;<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( ฟังก์ชัน FindOnPageGo() ( ค้นหา = "/"+input+"/g"; // กำลังทำงานเพื่อโหลดเพจเรสปกติ pr = document.body.innerHTML; // แทนที่ผลลัพธ์ของร่างกายทั้งหมด = pr.match(/ >(.*?)นอกจากนี้ ในขั้นตอนนี้ เราสามารถเปลี่ยนค่าหลักได้แล้ว ตอนนี้จำเป็นต้องกำหนดรหัสสไตล์ให้กับหลาที่จำเป็นด้วยการมองเห็นของขี้เถ้า ทูบโต การตรวจสอบซ้ำของข้อความที่เลือกให้เป็นไวรัสปกติ (โดยพื้นฐานแล้ว การสั่นด้วยข้อความไวรัสปกติจะถูกแยกวิเคราะห์อีกครั้งด้วยไวรัสปกติ) สำหรับสิ่งนี้ ข้อความที่ป้อนต้องใช้ viraz ปกติ (การแพร่กระจาย) จากนั้นจึงใช้วิธี vikonat เพื่อถ่ายโอนไปยังชั้นเชิงภาพ ที่นี่เราจะช่วยให้วิธีการ eval().

นอกจากนี้เรายังแทนที่ข้อความและนำผลลัพธ์ที่มีรูปแบบที่ต้องการความแม่นยำมากขึ้น htmlแทนการถอน โรบิโม่.

อินพุต Var, ค้นหา, pr, ผลลัพธ์, result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // เปลี่ยนฟังก์ชันทั้งหมด (นอก) FindOnPage (ชื่อ, สถานะ) ( input = document.getElementById(name).value;<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( ฟังก์ชัน FindOnPageGo() ( ค้นหา = "/"+input+"/g"; // กำลังทำงานเพื่อโหลดเพจเรสปกติ pr = document.body.innerHTML; // แทนที่ผลลัพธ์ของร่างกายทั้งหมด = pr.match(/ >(.*?)"+อินพุต+""); // เราต้องการองค์ประกอบ ตั้งค่าสไตล์และบันทึกลงในอาร์เรย์ใหม่) สำหรับ (var i = 0; i โดยพื้นฐานแล้วทุกอย่างพร้อมแล้วและสคริปต์ก็ใช้งานได้แล้ว รายละเอียด Ale dodamo sche kіlkaสำหรับการวาดภาพ

1) เราลองใช้ข้อความเพื่อแนะนำ koristuvach วางรหัสนี้:

อินพุต = numer.replace(/^\s+/g,""); อินพุต = numer.replace(/(1,)/g," ");
แถวถัดไป:

อินพุต = document.getElementById(name).value; // ค่าที่จำเป็นสำหรับฟิลด์ใน html
2) เราจำเป็นต้องตรวจสอบzbіgiอีกครั้ง (หากไม่พบzbіgіv - ลองดูสิ) รหัสนี้ถูกแทรกลงในฟังก์ชัน FindOnPageGo() หลังจากการเปลี่ยนแปลง

ตอนนี้ทุกอย่าง แน่นอน คุณสามารถเพิ่มการเลื่อนไปที่ผลลัพธ์แรกที่พบ ค้นหาอาแจ็กซ์แบบสด และคุณสามารถปรับปรุงได้ไม่มีกำหนด Narazі tse dosit การค้นหาดั้งเดิมบนเว็บไซต์ Metoyu statti สามารถช่วยมือใหม่ได้ราวกับว่าพวกเขามีโภชนาการแบบเดียวกันเหมือนของฉัน อาเจไม่รู้วิธีแก้ปัญหาง่ายๆ แบบสำเร็จรูป

PS: สำหรับงานที่ถูกต้อง จำเป็นต้องล้างการถ่ายโอนข้อความในเอกสาร html ในที่เงียบ โดยที่ข้อความต้นฉบับอยู่ระหว่างแท็ก

ตัวอย่างเช่น รอง

อื่น ๆ

อื่น ๆ

ดังนั้นราวกับว่าเขียนในลักษณะเดียวกัน แต่ด้วยเรื่องตลกที่มีชีวิตแบ่งปันวันหยุดสุดสัปดาห์คุณจะถูกเรียกว่าดอกกุหลาบ

เรเดียม ฟังคำวิจารณ์เชิงสร้างสรรค์ ความคิด บางทีคำแนะนำ

เป็นเวลาหลายวันหลังจากเพิ่มรหัสเล็กน้อยโดยทำการค้นหาที่อยู่ด้านข้าง อาหารจึงเป็นที่รู้จัก รหัส HTMLโดยไม่ต้องเปลี่ยน JSคุณสามารถประหลาดใจ

ดำเนินการค้นหาแท็กจากคลาส "place_for_live_search" ดังนั้น เพื่อให้อัลกอริทึมมีหมัดสำหรับเนื้อหาที่จำเป็น เราจึงเพิ่มคลาสและคลาสก็พร้อม

นอกจากข้อเท็จจริงที่ว่าเว็บไซต์สามารถเลือกองค์ประกอบตาม ID ของพวกเขาแล้ว เรายังสามารถเลือกองค์ประกอบตามแอตทริบิวต์ของคลาสได้อีกด้วย

zavdannya นั้นกว้างกว่า ถ้าฉันเขียนสคริปต์ของตัวเอง ฉันจะต้องใช้ตัวเลือกนี้บ่อยขึ้น

สมมุติว่าเราสร้างโค้ดด้านข้างได้

งานนั้นง่าย คุณต้องเลือกองค์ประกอบจาก class class = "elem" และทำงานด้วยเพื่อช่วย Javascript

ลองพิจารณาตัวเลือกสองสามข้อว่าคุณจะคิดอย่างไร

ตัวเลือกที่ 1: เร่งความเร็วเมธอด Javascript getElementsByClassName

หากคุณไม่ต้องการแฮ็คไลบรารีแอดออนแบบเก่า คุณสามารถไปที่องค์ประกอบโดยใช้เมธอด getElementsByClassName("im'ya_class")

ตัวอย่างเช่น คุณสามารถเพิ่มแถวถัดไปของรหัสไปยังแถวถัดไปของรหัสได้

ในผลลัพธ์ เนื่องจากทุกอย่างทำงานอย่างถูกต้อง เราจะต้องรวมเข้ากับหน้าต่าง ซึ่งข้อความจะปรากฏขึ้น ซึ่งอยู่ตรงกลางของบล็อก div

โปรดทราบว่าผลลัพธ์ของการเรียกเมธอด getElementsByClassName จะเป็นอาร์เรย์ขององค์ประกอบ เนื่องจาก องค์ประกอบจากคลาสเดียวกันด้านข้างสามารถเป็นกิลก้าได้

จำเป็นต้องระบุในส่วนท้ายของการสร้าง document.getElementsByClassName("elem") วิธีแสดงองค์ประกอบ null ในอาร์เรย์ () แผนภูมิ Javascript เริ่มต้นจากศูนย์ ไม่ใช่จากจุดเดียว

แต่ปัญหาของเมธอด getElementsByClassName คือวิธีนี้ไม่รองรับเบราว์เซอร์รุ่นเก่า

deyakіเจ้าเล่ห์คุณจะไปไหนมาไหน แต่รหัส tse zayvy ตัวอย่างเช่น คุณสามารถเร่งความเร็วด้วย virazes ปกติ:

ถ้า(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\b"+cl+"\\b"); var elem = this.getElementsByTagName( " *") สำหรับ (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

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

ตัวเลือกที่ 2 สำหรับความช่วยเหลือของไลบรารี Jquery

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

ที่นี่ elem เป็นชื่อของคลาสที่กำหนดให้กับองค์ประกอบ

จำเป็นที่ต้องจำไว้ว่าจะต้องเปิดไลบรารี Jquery เพื่อให้ใช้งานได้ ออกที่จุดจำหน่าย วิธีหนึ่งที่คุณสามารถทำได้คือเพิ่มโค้ดแถวถัดไป:

เพื่อให้ห้องสมุดสามารถขยายได้ สามารถเชื่อมต่ออินเทอร์เน็ตได้

เรามาดูกันว่ามันทำงานอย่างไรกับก้น