¡declaración! ! , este artículo es una reimpresión del artículo de otra persona, porque resultó que estaba usado y me pareció muy práctico, ¡así que lo recogí para usarlo en el futuro! !
¡Gracias al autor original! ! ! ,
En el desarrollo de aplicaciones web, especialmente programas Web 2.0, a menudo es necesario obtener un elemento en la página y luego actualizar el estilo, contenido, etc. del elemento. Cómo obtener los elementos a actualizar es el primer problema a resolver. Afortunadamente, hay muchas formas de obtener nodos usando JavaScript. Aquí hay un breve resumen (el siguiente método se ha probado en IE7 y Firefox2.0.0.11):
1. Obtener a través del nodo de documento de nivel superior:
(1) document.getElementById (elementId): este método puede obtener con precisión el elemento requerido a través del ID del nodo. Es un método relativamente simple y rápido. Si la página contiene varios nodos con el mismo ID, solo se devolverá el primer nodo.
Hoy en día, existen muchas bibliotecas de JavaScript, como prototipo y Mootools, que proporcionan un método más simple: $ (id), y el parámetro sigue siendo la identificación del nodo. Este método puede considerarse como otra forma de escribir document.getElementById(), pero la función de $() es más potente. Para un uso específico, consulte sus respectivos documentos API.
(2) document.getElementsByName (elementName): este método obtiene el nodo por su nombre. Como puede verse por el nombre, este método no devuelve un elemento de nodo, sino una matriz de nodos con el mismo nombre. Luego, podemos recorrer un determinado atributo del nodo para determinar si es el nodo requerido.
Por ejemplo: en HTML, la casilla de verificación y la radio usan el mismo valor de atributo de nombre para identificar elementos dentro de un grupo. Si queremos obtener el elemento seleccionado ahora, primero obtenemos el elemento mezclado y luego realizamos un bucle para determinar si el valor del atributo verificado del nodo es verdadero.
(3) document.getElementsByTagName(tagName): este método obtiene el nodo a través de su etiqueta. Este método también devuelve una matriz. Por ejemplo: document.getElementsByTagName('A') devolverá todos los nodos de hipervínculo en la página. Antes de obtener el nodo, generalmente se conoce el tipo de nodo, por lo que es relativamente sencillo utilizar este método. Pero la desventaja también es obvia, es decir, la matriz devuelta puede ser muy grande, lo que hará perder mucho tiempo. Entonces, ¿este método es inútil? Por supuesto que no. Este método es diferente de los dos anteriores. No es un método propietario del nodo del documento y también se puede aplicar a otros nodos, que se mencionarán a continuación.
2. Obtener a través del nodo padre:
(1) parentObj.firstChild: este método se puede utilizar si el nodo es el primer nodo hijo de un nodo conocido (parentObj). Este atributo se puede utilizar de forma recursiva, es decir, admite la forma parentObj.firstChild.firstChild.firstChild..., para que se puedan obtener nodos más profundos.
(2) parentObj.lastChild: obviamente, este atributo es para obtener el último nodo hijo del nodo conocido (parentObj). Al igual que firstChild, también se puede utilizar de forma recursiva.
En uso, si combinamos los dos, lograremos resultados más interesantes, a saber: parentObj.firstChild.lastChild.lastChild...
(3) parentObj.childNodes: obtiene la matriz de nodos secundarios de un nodo conocido y luego busca el nodo requerido mediante bucle o indexación.
Nota: Después de las pruebas, se descubrió que en IE7, lo que se obtiene es la matriz de nodos secundarios directos, mientras que en Firefox2.0.0.11, lo que se obtiene son todos los nodos secundarios, incluidos los nodos secundarios del nodo secundario.
(4) parentObj.children: obtiene la matriz de nodos secundarios directos de un nodo conocido.
Nota: Después de la prueba, en IE7, el efecto es el mismo que el de childNodes, pero Firefox2.0.0.11 no lo admite. Por eso utilizo un estilo diferente al de otros métodos. Por tanto no se recomienda su uso.
(5) parentObj.getElementsByTagName (tagName): el método de uso no se describirá en detalle. Devuelve una matriz de nodos secundarios del valor especificado entre todos los nodos secundarios del nodo conocido. Por ejemplo: parentObj.getElementsByTagName('A') devuelve todos los hipervínculos en nodos secundarios conocidos.
3. Obtener de nodos adyacentes:
(1) vecinoNode.previousSibling: obtiene el nodo anterior del nodo conocido (neighbourNode). Este atributo parece usarse de forma recursiva como el firstChild y el lastChild anteriores.
(2) vecinoNode.nextSibling: obtiene el siguiente nodo del nodo conocido (neighbourNode), también admite la recursividad.
4. Obtener a través de nodos secundarios:
(1) childNode.parentNode: obtiene el nodo principal de un nodo conocido.
Los métodos mencionados anteriormente son solo algunos métodos básicos. Si usa bibliotecas de JavaScript como Prototype, también puede obtener otros métodos diferentes, como obtener a través de la clase del nodo, etc. Sin embargo, si puede utilizar de manera flexible los diversos métodos anteriores, creo que debería poder manejar la mayoría de los programas.
Tenga en cuenta que este es un documento reproducido: no es recomendable obtener el Nodo HTML a través de firstChild y lastChild. Porque, según el navegador, firstChild puede devolver el objeto de atributo de parentObj.