สรุปวิธีการใช้งานตัวเลือก JS ดั้งเดิมทั่วไป

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-15 14:00:03

Common GetElementById, GetElementsByName, GetElementsByTagname แต่ชาวต่างชาติไม่พอใจกับ API เหล่านี้ดังนั้นพวกเขาจึงสร้าง getElementsByClassName และต่อมาตัวเลือก jQuery ปรากฏตัวทีละน้อยและมีเพียงการเลือก JS ดั้งเดิมเท่านั้นที่กล่าวถึงที่นี่

1. getElementById

นี่คือตัวเลือกที่ใช้กันมากที่สุดและอยู่ในตำแหน่งโดย ID:

ตัวอย่าง:

var test = document.getElementById ("ทดสอบ") ค่า; // รับค่าขององค์ประกอบด้วยการทดสอบ ID ในเอกสารและกำหนดค่าให้กับการเปลี่ยนแปลงการทดสอบใบหน้า

2. getElementsByName

ตัวอย่าง:

var test = document.getElementByName ("ทดสอบ"); // รับโหนดขององค์ประกอบที่มีชื่อทดสอบในเอกสารและกำหนดให้กับตัวแปรทดสอบในเวลานี้ตัวแปรทดสอบเป็นอาร์เรย์อาร์เรย์

3. GetElementsByTagname

ตัวอย่าง:

VAR TEST = Document.getElementsByTagname ("ทดสอบ"); // รับโหนดขององค์ประกอบในเอกสารที่มีการทดสอบคลาสและกำหนดให้ทดสอบในเวลานี้ตัวแปรทดสอบคืออาร์เรย์ , 7, 8 ไม่พร้อมใช้งาน

4. getElementsByClassName

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

(1) โซลูชัน GetElementsByclassName ที่ดีที่สุดซึ่งเขียนโดย Robert Nyman ถูกนำมาใช้ในปี 2548 จะเห็นได้ว่าหลายสิ่งหลายอย่างจากชาวต่างชาติได้ไปนานแล้ว

การคัดลอกรหัสมีดังนี้:

// พารามิเตอร์ทั้งสามนั้นเป็นสิ่งจำเป็นทั้งหมด

// IE6 คือ 4610 ~ 6109 มิลลิวินาที, FF3.5 คือ 46 ~ 48 มิลลิวินาที, โอเปร่า 10 คือ 31 ~ 32 มิลลิวินาที, โครเมี่ยมคือ 23 ~ 26 มิลลิวินาที

// Safari4 คือ 19 ~ 20 มิลลิวินาที

ฟังก์ชั่น getElementsByClassName (OELM, strTagname, strClassName) {

var arlements = (strtagname == "*" && oelm.all)?

oelm.getElementByTagname (strtagname);

var arrreturnElements = new Array ();

strClassName = strClassName.replace (//-/g, "//-");

var orregexp = new regexp ("(^| // s)" + strclassName + "(// s | $)");

var oelement;

สำหรับ (var i = 0; i <arrelements.length; i ++) {

OELEMENT = arrElements [i];

if (oregexp.test (oelement.classname)) {

arrreturnElements.push (oelement);

return (arrreturnElements)

(2) จัดทำโดยดัสตินดิแอซ (ผู้แต่ง "รูปแบบการออกแบบ JavaScript" แต่ความเข้ากันได้ไม่ดีเท่าข้างต้นและไม่รองรับ IE5

การคัดลอกรหัสมีดังนี้:

// พารามิเตอร์สองตัวสุดท้ายมีความน่าเชื่อถือ

//ff3.5 คือ 42 ~ 48ms, opera10 คือ 31ms, chrome คือ 22 ~ 25ms, Safari4 คือ 18 ~ 19ms

var getElementsByclass = function (searchclass, โหนด, แท็ก) {

var classElements = new Array ();

if (node == null)

Node = Document;

if (tag == null)

tag = '*';

var els = node.getElementsByTagname (TAG);

var elslen = els.length;

รูปแบบ var = ใหม่ regexp ("(^| // s)"+searchclass+"(// s | $)");

สำหรับ (i = 0, j = 0; i <elslen; i ++) {

if (pattern.test (els [i] .classname)) {

ClassElements [J] = Els [i];

J ++;

ส่งคืนคลาสการเลือกตั้ง;

------------------------------------------------------ ------------------------------------------------------ ------------------------ ---------------------------------------------------------------------------------------------------------------- ------------------------------------------------------ ------------------------------------------------------ ------ ---------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------ --------------------------------

หมายเหตุ: สิ่งนี้สามารถแสดงโหนดขององค์ประกอบปัจจุบัน

นี่คือวิธีการที่ใช้กันทั่วไปสำหรับการใช้จุดความรู้เช่นเหตุการณ์:

การคัดลอกรหัสมีดังนี้:

// ส่งแบบฟอร์มด้วยการทดสอบ ID

document.getElementById ("ทดสอบ") ส่ง ();

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

document.getElementById ("ทดสอบ"). style.border = "2px Solid Red";

// ย้ายหรือย้ายองค์ประกอบด้วยการทดสอบ ID เพื่อเปลี่ยนสีพื้นหลัง

ฟังก์ชั่นทดสอบ () {

document.getElementById ("ทดสอบ"). onMouseOver = function () {document.getElementById ("test2"). style.backgroundColor = "red"};

document.getElementById ("ทดสอบ"). onMouseOut = function () {document.getElementById ("test2"). style.backgroundColor = "Blue"};

// จำนวนองค์ประกอบในเอกสารป๊อปอัพพร้อมการทดสอบชื่อ

การทดสอบฟังก์ชั่น ()

var test = document.getElementsByName ("ทดสอบ");

การแจ้งเตือน (test.length);