คำนำ
อาลีบาบาผู้ฝึกงานส่วนหน้าเว็บกำลังจะทำการสอบออนไลน์ อันที่จริงฉันต้องการเพิ่มความรู้ให้กับมือใหม่ ดังนั้น Baidu และ Google จึงมีคำถามทดสอบที่เป็นลายลักษณ์อักษรก่อนหน้านี้สำหรับการสรรหาวิทยาเขตของอาลีบาบาและรู้สึกว่าพวกเขาถูกดูหมิ่นและไม่เข้าใจพวกเขาเลย Ah, front-end ของ Ribaba เป็นการทดสอบที่เป็นลายลักษณ์อักษรออนไลน์
เมื่อฉันเห็นคำถามนี้ฉันรู้สึกว่าฉันควรห่อหุ้มวิธีการที่คุณใช้กันทั่วไปเช่น JQuery มีวิธีการบางอย่างเพื่อให้ได้ความเข้ากันได้ของเบราว์เซอร์หรือคลาสเครื่องมือซึ่งเป็นประโยชน์ต่อการพัฒนาในอนาคต
HTML
เพื่อคำอธิบายให้เขียน HTML ก่อน
การคัดลอกรหัสมีดังนี้:
<p> พบฉัน </p>
<div> ยังพบฉัน </div>
เราละเว้น CSS
วิธีการดำเนินการ
1 getElementsByClassName
การคัดลอกรหัสมีดังนี้:
console.log (document.getElementsByClassName ("A"));
console.log (document.getElementsByClassName ("AB"));
ผลลัพธ์ปรากฏขึ้น (Firefox 27.0)
อันที่จริงฉันคิดว่าวิธีนี้ควรจะสามารถแก้ปัญหาข้างต้นได้ แต่หลังจากดูความเข้ากันได้ของมันฉันคิดว่ามันควรจะดีกว่าที่จะหาวิธีอื่น
2 QuerySelectorAll
การคัดลอกรหัสมีดังนี้:
console.log (document.querySelectorall (".a"));
console.log (document.QuerySelectorall (".B, .A"));
มาดูกันว่าผลลัพธ์คืออะไร? อะไรคือความแตกต่างจากข้างต้น?
ผลลัพธ์ของอันที่สองนั้นแตกต่างกัน
ที่จริงแล้วความเข้ากันได้ของวิธีนี้ไม่ค่อยดีนัก
จากปัญหาความเข้ากันได้ข้างต้น (หลังจากทั้งหมดฉันยังคงอธิบายถึงเบราว์เซอร์จีนส่วนใหญ่ IE6/7/8) ฉันอาจทำวิธีที่จะบรรลุเป้าหมายด้วยตัวเอง
3 querynodesbyclass
ฉันคิดว่าฉันควรพูดถึงความคิดของฉันก่อน
(1) รับทั้งหน้าก่อน
(2) วนซ้ำผ่านแต่ละโหนดและรับสตริง ClassName
(3) ใช้งานสตริง className ก่อนแบ่งออกเป็นอาร์เรย์ที่มีช่องว่างจากนั้นใช้วัตถุเพื่อตั้งค่าคีย์เป็นแต่ละองค์ประกอบอาร์เรย์จากนั้นค่าที่สอดคล้องกันจะเป็นจริง
(4) ปัญหาตอนนี้ขึ้นอยู่กับพารามิเตอร์ที่คุณผ่าน (ตัวอย่างเช่นพารามิเตอร์หนึ่งคือ "ตัวเลือก" สองคือ "selector_1 selector_2" และอื่น ๆ ) จากนั้นแปลงเป็นอาร์เรย์และแต่ละองค์ประกอบอาร์เรย์คือ ใช้ตามก่อนหน้านี้ค่าคีย์ของวัตถุที่สอดคล้องกับสตริง ClassName ในโหนดของเราก่อนหน้านี้หากตรงกับมันเป็นความจริงและถ้าไม่ได้มันจะไม่ได้กำหนด
ตอนนี้เราให้รหัสของเรา
การคัดลอกรหัสมีดังนี้:
ฟังก์ชัน StringtoObj (สตริง) {
var arr = string.split ("") .sort ();
var result = {};
สำหรับ (var i = arr.length-1; arr [i]; i-) {
ผลลัพธ์ [arr [i]] = true;
-
ผลการกลับมา;
-
การคัดลอกรหัสมีดังนี้:
ฟังก์ชัน StringtoArray (String) {
var arr = string.split ("") .sort ();
var result = [];
สำหรับ (var i = arr.length-1; arr [i]; i-) {
result.push (arr [i]);
-
ผลการกลับมา;
-
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น queryNodesByClass (className) {
// ความคิด (1)
var all = document.getElementByTagname ("*"), len = all.length, result = [];
var cname = stringtoarray (classname); // ความคิด (4)
สำหรับ (var i = 0; i <len; i ++) {// ถ่ายโอนแนวคิดที่เกี่ยวข้องของแต่ละโหนด (2)
// ที่สอดคล้องกันคือแนวคิด (3) นั่นคือบทบาทของวิธี StringToObj
var dom_cname = stringtoobj (ทั้งหมด [i] .classname), cname_len = cname.length;
สำหรับ (var j = 0; j <cname_len; j ++) {
if (! dom_cname [cname [j]])
หยุดพัก;
-
if (j == cname_len)
-
result.push (ทั้งหมด [i]);
-
ผลตอบแทน;
-