مقدمة
Alibaba ، سيقوم المتدربون في الواجهة الأمامية على الويب بإجراء الامتحان عبر الإنترنت. في الواقع ، أود إضافة بعض المعرفة إلى الصاعد. لذلك كان لدى Baidu و Google أسئلة الاختبار المكتوبة في الواجهة الأمامية السابقة لتوظيف الحرم الجامعي في Alibaba ، وشعروا أنهم كانوا يحتقران حقًا ولم يتمكنوا من فهمها على الإطلاق. آه ، إن الواجهة الأمامية لريبابا هي اختبار كتابي عبر الإنترنت.
عندما رأيت هذا السؤال ، شعرت أنه يجب علي بالفعل أن أغلف بعض أساليبك الشائعة ، تمامًا مثل 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) تكرار من خلال كل عقدة واحصل على سلسلة classn
(3) قم بتشغيل سلسلة اسم classname ، وقسمها أولاً إلى صفيف مع مسافات ، ثم استخدم كائنًا لتعيين مفتاحه على كل عنصر صفيف ، ثم تكون القيمة المقابلة صحيحة
(4) تعتمد المشكلة الآن على المعلمات التي مررت بها (على سبيل المثال ، معلمة واحدة هي "محدد" ، واثنان هما "Celector_1 Selector_2" ، وهكذا) ، ثم تحويلها إلى صفيف ، وكل عنصر صفيف هو تستخدم كما سابقًا ، القيمة الرئيسية للكائن المقابل لسلسلة اسم الفئة في عقدةنا من قبل ، إذا كانت متطابقة ، فهذا صحيح ، وإذا لم يكن كذلك ، فهو غير محدد.
الآن نقدم رمزنا
نسخة الكود كما يلي:
وظيفة stringToObj (سلسلة) {
var arr = string.split ("") .sort () ؛
var result = {} ؛
لـ (var i = arr.length-1 ؛ arr [i] ؛ i-) {
النتيجة [arr [i]] = true ؛
}
نتيجة العودة
}
نسخة الكود كما يلي:
وظيفة stringToArray (سلسلة) {
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.getElementSbyTagName ("*") ، len = all.length ، result = [] ؛
var cname = stringToArray (className) ؛ // express (4)
لـ (var i = 0 ؛ i <len ؛ i ++) {// نقل الأفكار المقابلة لكل عقدة (2)
// المقابلة هي الفكرة (3) ، أي دور طريقة StringToObj
var dom_cname = stringToObj (all [i] .className) ، cname_len = cname.length ؛
لـ (var j = 0 ؛ j <cname_len ؛ j ++) {
if (! dom_cname [cname [j]])
استراحة؛
}
إذا (j == cname_len)
{
result.push (جميع [i]) ؛
}}
نتيجة العودة
}