getElementByid الشائع ، getElementsByName ، getElementsByTagname. لكن الأجانب لم يكونوا راضين عن واجهات برمجة التطبيقات هذه ، لذلك قاموا بإنشاء getElementsByClassName ، وبعد ذلك ظهر محدد jQuery شيئًا فشيئًا ، ولم يتم ذكر سوى اختيار JS الأصلي هنا.
1.getElementByid
هذا هو المحدد الأكثر استخدامًا ، ويتم وضعه بواسطة ID:
مثال:
var test = document.getElementById ("test"). القيمة ؛ // احصل على قيمة العنصر مع اختبار المعرف في المستند وتعيين القيمة لتغيير وجه الاختبار
2.getElementsByName
مثال:
var test = document.getElementByName ("Test") ؛ // احصل على عقدة العنصر الذي يتم اختبار اسمه في المستند وتعيينه إلى متغير الاختبار.
3.GetElementsByTagname
مثال:
var test = document.getelementsbytagname ("اختبار") ، 7 ، 8 غير متوفر
4.GetElementsByClassName
لا يمكن العثور على هذا المحدد في API JS. ابحث عنه باستخدام تعبيرات منتظمة يتم إرجاع العناصر المطابقة في صفيف. هناك العديد من المبرمجين على الإنترنت الذين ينفذون هذا المحدد ، وما يلي مثالان:
(1) تم تنفيذ حل GetElementsByClassName النهائي ، الذي تأليفه روبرت نيمان ، في عام 2005. يمكن ملاحظة أن العديد من الأشياء من الأجانب قد ذهبت منذ فترة طويلة.
نسخة الكود كما يلي:
// جميع المعلمات مطلوبة.
// IE6 هو 4610 ~ 6109 مللي ثانية ، FF3.5 هو 46 ~ 48 مللي ثانية ، أوبرا 10 هو 31 ~ 32 ميلي ثانية ، والكروم هو 23 ~ 26 مللي ثانية ،
// Safari4 هو 19 ~ 20 مللي ثانية
وظيفة getElementsByClassName (oelm ، strtagname ، strclassname) {
var arrelements = (strtagname == "*" && oelm.all)؟
OELM.GetElementsByTagname (strtagname) ؛
var arrreturnelements = new array () ؛
strclassName = strclassName.replace (//-/g ، "//-") ؛
var oregexp = new regexp ("(^| // s)" + strclassName + "(// s | $)") ؛
var oelement ؛
لـ (var i = 0 ؛ i <arrelements.length ؛ i ++) {
oelement = arrelements [i] ؛
if (oregexp.test (oelement.classname)) {
arreturnelements.push (oelement) ؛
}
}
العودة (arreturnelements)
}
(2) المقدمة من داستن دياز (مؤلف كتاب "أنماط تصميم JavaScript" ، ولكن التوافق ليس جيدًا كما سبق ولا يدعم IE5.
نسخة الكود كما يلي:
// المعلمات الأخيرة موثوقة.
//ff3.5 هو 42 ~ 48ms ، Opera10 هو 31ms ، Chrome هو 22 ~ 25ms ، Safari4 هو 18 ~ 19ms
var getElementsByClass = function (SearchClass ، Node ، Tag) {
var classelements = new Array () ؛
إذا (العقدة == فارغة)
العقدة = وثيقة ؛
إذا (علامة == فارغة)
علامة = '*' ؛
var els = node.getElementSbyTagName (tag) ؛
var elslen = els.length ؛
var pattern = new regexp ("(^| // s)"+searchClass+"(// s | $)") ؛
لـ (i = 0 ، j = 0 ؛ i <elslen ؛ i ++) {
if (pattern.test (els [i] .classname)) {
classelements [j] = els [i] ؛
J ++ ؛
}
}
إرجاع الفصل.
}
------------------------------------------------- ------------------------------------------------- ---------------------------- ----------------------- ------------------------------------------------- ------------------------------------------------- ------ -------------------------------------------- ------------------------------------------------- ----------------------------------
ملاحظة: يمكن أن يمثل هذا عقدة العنصر الحالي.
------------------------------------------------- ------------------------------------------------- ---------------------------- ----------------------- ------------------------------------------------- ------------------------------------------------- ------ -------------------------------------------- ------------------------------------------------- ----------------------------------
فيما يلي بعض الطرق الشائعة الاستخدام لاستخدام نقاط المعرفة مثل الأحداث:
نسخة الكود كما يلي:
// إرسال نموذج مع اختبار الهوية
document.getElementById ("test"). إرسال () ؛
// قم بتعيين الحدود بمعرف كعنصر اختبار على 2 بكسل ، صلبة ، حمراء
document.getElementById ("test"). style.border = "2px Solid Red" ؛
// حرك أو انقل العنصر مع اختبار المعرف لتغيير لون خلفيته
اختبار الوظيفة () {
document.getElementById ("test"). onMouseover = function () {document.getElementById ("test2"). style.backgroundColor = "Red"} ؛
document.getElementById ("test"). onMouseout = function () {document.getElementById ("test2"). style.backgroundColor = "Blue"} ؛
}
// عدد العناصر في المستند المنبثق مع اختبار الاسم
اختبار الوظيفة ()
{
var test = document.getElementSbyName ("test") ؛
تنبيه (test.length) ؛
}