Extraído do Guia JavaScript autoritário (a maneira definitiva do jQuery para encontrar elementos baseados no seletor de estilo é primeiro usar o getElementsByTagName (*) para obter todos os elementos DOM e depois filtrar todos os elementos DOM de acordo com o seletor de estilo)
Hoje eu tentei a velocidade de vários métodos de seleção de elementos. O método nativo é cerca de 8 vezes mais rápido que o jQuery. IE8 é o mais lento, IE9 é cerca de 3 vezes mais rápido que o IE8, o Chrome tem o melhor desempenho, seguido pelo Firefox)
Métodos para selecionar elementos do documento:
1. Selecione elemento por id (getElementById)
1) Método de uso: document.getElementById ("DOMID")
Onde o DOMID é o valor do atributo de identificação do elemento a ser selecionado
2) Compatibilidade: IE navegadores com versões inferiores ao IE8 não distinguem o caso do número de identificação do elemento e retornará elementos que correspondem ao atributo de nome.
2. Selecione elementos por nome (getElementsByName)
1) Método de uso: document.getElementsByName ("DOMNAME")
onde domname é o nome do atributo de nome do elemento a ser selecionado
2) Descrição: a. O valor de retorno é uma coleção NodeList (diferente da matriz)
b. Ao contrário do atributo ID, o atributo de nome é válido apenas em alguns elementos DOM (formulário de formulário, elemento de formulário, iframe, IMG). Isso ocorre porque o atributo de nome é criado para facilitar o envio dos dados do formulário.
c. Ao definir atributos de nome para formulário, IMG, iframe, applet, incorporação, elementos de objeto, atributos nomeados após o valor do atributo de nome será criado automaticamente no objeto Document. Portanto, o objeto DOM correspondente pode ser referenciado através do documento.domName
3) Compatibilidade: Elementos que correspondem aos valores do atributo de ID no IE também retornarão juntos
3. Selecione elementos por nome da tag (getElementsByTagName)
1) Método de uso: Element.getElementsByTagName ("Tagname")
Onde, elemento é um elemento DOM válido (incluindo documento)
Tagname é o nome da tag do elemento DOM
2) Descrição: a. O valor de retorno é uma coleção NodeList (diferente da matriz)
b. Este método pode selecionar apenas elementos descendentes do elemento que chama o método.
c. Tagname é insensível ao caso
d. Quando a tagname é *, significa que todos os elementos são selecionados (responsável por b. Regra)
e. O HTMLDocument define algumas propriedades de atalho para acessar o nó de tag. Por exemplo: as imagens, formulários e links atributos do documento apontam para a coleção de elementos <mg>, <morm> e <a>
4. Selecione elementos através da classe CSS (getElementsByclassName)
1) Método de uso: Element.getElementsByClassName ("ClassNames")
Onde, elemento é um elemento DOM válido (incluindo documento)
ClassNames é uma combinação de nomes de classe CSS (vários nomes de classe são separados por espaços, que podem ser separados por vários espaços).
Por exemplo, element.getElementsByClassName ("Classe2 Class1") selecionará elementos nos elementos descendentes dos elementos que possuem estilos de classe1 e classe2 aplicados (os nomes de estilo não distinguem entre a ordem)
2) Descrição: a. O valor de retorno é uma coleção NodeList (diferente da matriz)
b. Este método pode selecionar apenas elementos descendentes do elemento que chama o método.
3) Compatibilidade: IE8 e abaixo dos navegadores não implementam o método getElementsByClassName
5. Selecione elementos através do seletor CSS
1) Método de uso: Document.QuerySelectorall ("Seletor")
Onde, o seletor é um seletor de CSS legal
2) Descrição: a. O valor de retorno é uma coleção NodeList (diferente da matriz)
3) Compatibilidade: IE8 e abaixo dos navegadores suportam apenas a sintaxe do seletor padrão CSS2
O método simples de selecionar elementos DOM no JS é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.