Extraído de la Guía autorizada de JavaScript (la forma definitiva de jQuery para encontrar elementos basados en el selector de estilo es primero usar GetElementsBytagName (*) para obtener todos los elementos DOM, y luego filtrar todos los elementos DOM según el selector de estilo)
Hoy probé la velocidad de varios métodos de selección de elementos. El método nativo es aproximadamente 8 veces más rápido que jQuery. IE8 es el más lento, IE9 es aproximadamente 3 veces más rápido que IE8, Chrome realiza lo mejor, seguido de Firefox)
Métodos para seleccionar elementos de documento:
1. Seleccione Elemento por ID (GetElementById)
1) Método de uso: document.getElementById ("domid")
donde domid es el valor de atributo de identificación del elemento a seleccionar
2) Compatibilidad: es decir, los navegadores con versiones inferiores a IE8 no distinguen el caso del número de identificación del elemento y devolverán elementos que coincidan con el atributo de nombre.
2. Seleccione elementos por nombre (GetElementsByName)
1) Método de uso: document.getElementsByName ("Domname")
donde domname es el valor de atributo de nombre del elemento a seleccionar
2) Descripción: a. El valor de retorno es una colección nodelista (diferente de la matriz)
b. A diferencia del atributo de identificación, el atributo de nombre solo es válido en algunos elementos DOM (formulario, elemento de formulario, iframe, img). Esto se debe a que el atributo de nombre se crea para facilitar la presentación de datos de formulario.
do. Al establecer los atributos de nombre para formular, IMG, iframe, applet, incrustar, elementos de objeto, atributos que llevan el nombre del valor del atributo de nombre se creará automáticamente en el objeto de documento. Por lo tanto, el objeto DOM correspondiente se puede hacer referencia a través de documento. Domname
3) Compatibilidad: los elementos que coinciden con los valores de atributo de identificación en IE también volverán juntos
3. Seleccione elementos por nombre de la etiqueta (GetElementsByTagName)
1) Método de uso: Element.getElementsBytagName ("TagName")
Dónde, el elemento es un elemento DOM válido (incluido el documento)
TagName es el nombre de la etiqueta del elemento DOM
2) Descripción: a. El valor de retorno es una colección nodelista (diferente de la matriz)
b. Este método solo puede seleccionar elementos descendientes del elemento que llama al método.
do. TagName no es insensible
d. Cuando TagName es *, significa que todos los elementos están seleccionados (responsables de la regla)
mi. HtmlDocument define algunas propiedades de acceso directo para acceder al nodo de etiqueta. Por ejemplo: las imágenes, los formularios y los atributos de vinculación del documento apuntan a la colección de elementos <img>, <form> y <a> de la etiqueta, mientras que document.body y document.head siempre apuntan al cuerpo y las etiquetas de la cabeza (cuando la etiqueta de cabeza declarada no se muestra, el navegador también creará el atributo de documentos.
4. Seleccione elementos a través de la clase CSS (GetElementsByClassName)
1) Método de uso: Element.getElementsByClassName ("ClassNames")
Dónde, el elemento es un elemento DOM válido (incluido el documento)
ClassNames es una combinación de nombres de clase CSS (múltiples nombres de clases están separados por espacios, que pueden separarse por múltiples espacios).
Por ejemplo, Element.getElementsByClassName ("Class2 Class1") seleccionará elementos en los elementos descendientes de elementos que tienen estilos de clase1 y clase2 aplicados (los nombres de estilo no distinguen entre el orden)
2) Descripción: a. El valor de retorno es una colección nodelista (diferente de la matriz)
b. Este método solo puede seleccionar elementos descendientes del elemento que llama al método.
3) Compatibilidad: los navegadores IE8 y debajo no implementan el método GetElementsByClassName
5. Seleccione elementos a través del selector CSS
1) Método de uso: document.QuerySelectorAll ("Selector")
Dónde, el selector es un selector legal de CSS
2) Descripción: a. El valor de retorno es una colección nodelista (diferente de la matriz)
3) Compatibilidad: IE8 y debajo de los navegadores solo admiten la sintaxis del selector estándar CSS2
El método simple para seleccionar elementos DOM en JS es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.