Resumo dos métodos de uso de seletor de JS original comum

GetElements Common, getElementsByName, GetELementsByTagName. Mas os estrangeiros não ficaram satisfeitos com essas APIs, então criaram getselementsbyclassName e, mais tarde, um seletor de jQuery apareceu pouco a pouco, e apenas a seleção original do JS é mencionada aqui.

1.GetElementById

Este é o seletor mais usado e está posicionado por ID:

exemplo:

var teste = document.getElementById ("teste").

2.GetElementsByName

exemplo:

var teste = document.getElementByName ("teste"); // Obtenha o nó do elemento cujo nome é teste no documento e atribua -o à variável de teste.

3.GetElementsByTagName

exemplo:

var teste = document.getElementsByTagName ("teste"); // Obtenha o nó do elemento no documento com o teste de classe e atribua -o para testar. , 7, 8 não disponível

4.GetElementsByClassName

Este seletor não pode ser encontrado na API JS. Encontre usando expressões regulares Os elementos correspondentes são retornados em uma matriz. Existem muitos programadores na Internet que implementam esse seletor, e os seguintes são dois exemplos:

(1) A Ultimate GetlementsByClassName Solution, de autoria de Robert Nyman, foi implementada em 2005. Pode -se ver que muitas coisas de estrangeiros foram muito longe há muito tempo.

A cópia do código é a seguinte:

// Os três parâmetros são necessários.

// ie6 é 4610 ~ 6109 milissegundos, ff3.5 é 46 ~ 48 milissegundos, opera10 é 31 ~ 32 milissegundos, o cromo é 23 ~ 26 milissegundos,

// Safari4 é 19 ~ 20 milissegundos

function getElementsbyclassName (Oelm, strtagname, strclassName) {

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

oelm.getElementsByTagName (strTagName);

var ArrReturNelements = new Array ();

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

var oregexp = novo regexp ("(^| // s)" + strclassName + "(// s | $)");

var oElement;

for (var i = 0; i <arrerements.length; i ++) {

OELEMENT = ARRELEMENTOS [I];

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

arreRreturNelements.push (oElement);

}

}

Retornar (ArretrurNelements)

}

(2) Fornecido por Dustin Diaz (autor de "JavaScript Design Patterns", mas a compatibilidade não é tão boa quanto o acima e não suporta o IE5.

A cópia do código é a seguinte:

// Os dois últimos parâmetros são confiáveis.

//Ff3.5 é 42 ~ 48ms, opera10 é 31ms, o Chrome é 22 ~ 25ms, o safari4 é 18 ~ 19ms

var getElementsByClass = function (SearchClass, nó, tag) {

var classElements = new Array ();

if (nó == nulo)

nó = documento;

if (tag == null)

tag = '*';

var els = node.getElementsByTagName (tag);

var elslen = els.Length;

var padrão = novo regexp ("(^| // s)"+searchclass+"(// s | $)");

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

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

ClassElements [j] = els [i];

j ++;

}

}

retorno astlements;

}

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

Nota: Isso pode representar o nó do elemento atual.

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

Aqui estão alguns métodos comumente usados ​​para usar pontos de conhecimento, como eventos:

A cópia do código é a seguinte:

// Envie um formulário com teste de identificação

document.getElementById ("test"). submmit ();

// Defina a borda com ID como elemento de teste para 2 pixels, sólido, vermelho

document.getElementById ("test"). style.border = "2px vermelho sólido";

// mova ou mova o elemento com teste de identificação para alterar sua cor de fundo

function test () {

document.getElementById ("test"). onMouseOver = function () {document.getElementById ("test2"). style.backgroundColor = "Red"};

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

}

// O número de elementos no documento pop-up com teste de nome

teste de função ()

{

var teste = document.getElementsByName ("test");

alerta (test.length);

}