Ringkasan Metode Penggunaan Pemilih JS Asli

Common GetElementById, GetElementsbyName, GetElementsByTagname. Tetapi orang asing tidak puas dengan API ini, sehingga mereka menciptakan GetElementsByClassName, dan kemudian pemilih jQuery muncul sedikit demi sedikit, dan hanya seleksi JS asli yang disebutkan di sini.

1.getElementById

Ini adalah pemilih yang paling umum digunakan, dan diposisikan oleh ID:

contoh:

var test = document.geteLementById ("test"). value; // Dapatkan nilai elemen dengan tes ID dalam dokumen dan tetapkan nilai ke perubahan wajah tes

2.getElementsbyname

contoh:

var test = document.getElementByName ("test"); // Dapatkan simpul elemen yang namanya di dokumen dan tetapkan ke variabel tes.

3.GetElementsByTagname

contoh:

var test = document.getElementsbyTagname ("test"); // Dapatkan simpul elemen dalam dokumen dengan tes kelas dan tetapkan untuk menguji. , 7, 8 tidak tersedia

4.GetElementsByClassName

Pemilih ini tidak dapat ditemukan di JS API. menemukannya menggunakan ekspresi reguler elemen pencocokan dikembalikan dalam array. Ada banyak programmer di internet yang mengimplementasikan pemilih ini, dan berikut ini adalah dua contoh:

(1) Solusi Penyisiran UltimateByClassName, yang ditulis oleh Robert Nyman, diimplementasikan pada tahun 2005. Dapat dilihat bahwa banyak hal dari orang asing telah melangkah sangat lama.

Salinan kode adalah sebagai berikut:

// Tiga parameter diperlukan.

// IE6 adalah 4610 ~ 6109 milidetik, ff3.5 adalah 46 ~ 48 milidetik, opera10 adalah 31 ~ 32 milidetik, chrome adalah 23 ~ 26 milidetik,

// safari4 adalah 19 ~ 20 milidetik

Function GetElementsByClassName (OELM, Strtagname, StrClassName) {

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

oelm.geteLementsbyTagname (strtagname);

var arrreturneLements = array baru ();

strclassName = strclassname.replace (//-/g, "//-");

var oregexp = regexp baru ("(^| // s)" + strcasname + "(// s | $)");

var oelement;

untuk (var i = 0; i <arrelements.length; i ++) {

oelement = arrelements [i];

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

arrreturnelements.push (oelement);

}

}

kembali (arrreturnelements)

}

(2) Disediakan oleh Dustin Diaz (penulis "JavaScript Design Patterns", tetapi kompatibilitasnya tidak sebagus hal di atas dan tidak mendukung IE5.

Salinan kode adalah sebagai berikut:

// Dua parameter terakhir dapat diandalkan.

//Ff3.5 adalah 42 ~ 48ms, opera10 adalah 31ms, chrome 22 ~ 25ms, safari4 adalah 18 ~ 19ms

var getElementsbyclass = function (SearchClass, node, tag) {

var classeLements = array baru ();

if (node ​​== null)

node = dokumen;

if (tag == null)

tag = '*';

var els = node.geteLementsByTagname (tag);

var elslen = els.length;

var pola = regexp baru ("(^| // s)"+pencarianclass+"(// s | $)");

untuk (i = 0, j = 0; i <elslen; i ++) {

if (pola.test (els [i] .className)) {

ClassElements [j] = els [i];

j ++;

}

}

mengembalikan ClassElements;

}

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

Catatan: Ini dapat mewakili simpul elemen saat ini.

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

Berikut adalah beberapa metode yang umum digunakan untuk menggunakan titik pengetahuan seperti peristiwa:

Salinan kode adalah sebagai berikut:

// Kirim formulir dengan tes ID

document.geteLementById ("test"). Submit ();

// Atur perbatasan dengan ID sebagai elemen uji ke 2 piksel, solid, merah

document.geteLementById ("test"). style.border = "2px solid red";

// Pindahkan atau pindahkan elemen dengan tes ID untuk mengubah warna latar belakangnya

function test () {

document.getElementById ("test"). onmouseover = function () {document.geteLementById ("test2"). style.backgroundColor = "red"};

document.geteLementById ("test"). onmouseout = function () {document.geteLementById ("test2"). style.backgroundColor = "blue"};

}

// Jumlah elemen dalam dokumen pop-up dengan uji nama

tes fungsi ()

{

var test = document.geteLementsByName ("test");

peringatan (test.length);

}