método getAttribute ()
Hasta ahora, hemos introducido dos formas de recuperar nodos de elementos específicos: uno es usar el método GetElementById (), y el otro es usar el método GetElementsByTagName (). Después de encontrar ese elemento, podemos usar el método getAttribute () para consultar los valores de sus diversos atributos.
El método getAttribute () es una función. Tiene solo un parámetro: el nombre del atributo que planea consultar:
Object.getAttribute (atributo)
Sin embargo, el método getAttribute () no se puede llamar a través del objeto de documento, que es diferente de otros métodos que hemos introducido antes. Solo podemos llamarlo a través de un objeto de nodo de elemento.
Por ejemplo, puede combinarlo con el método GetElementsByTagName () para consultar el atributo de título de cada elemento <p> como se muestra a continuación:
var text = document.getElementsBytagName ("P") para (var i = 0; i <text.length; i ++) {alert (text [i] .getAttribute ("title"));}Si inserta el código anterior al final del documento de muestra "Lista de compras" que se dio anteriormente y recarga la página en un navegador web, un cuadro de diálogo Alter con el mensaje de texto "Un recordatorio suave" aparecerá en la pantalla.
Solo hay un elemento <p> con atributo de título en el documento de la lista de compras. Si el documento tiene uno o más elementos <p> sin atributo de título, la llamada GetAttribute ("Título") correspondiente devolverá NULL. NULL es un valor nulo en el lenguaje JavaScript, y su significado es "lo que dijiste no existe". Si desea verificar esto personalmente, inserte el siguiente texto en el párrafo de texto existente en el documento de la lista de compras:
<p> Esto es solo probar </p>
Luego vuelva a cargar la página. Esta vez, verá dos diálogos alter, y el segundo diálogo estará en blanco o solo mostrará la palabra "nula": la situación específica depende de cómo su navegador web mostrará el valor nulo.
Podemos modificar nuestro script para que aparezca un mensaje solo cuando exista la propiedad del título. Agregaremos una instrucción IF para verificar si el valor de retorno del método getAttribute () es nulo. Aprovechando esta oportunidad, también agregamos varias variables para mejorar la legibilidad del guión:
var ts = document.getElementsBytagName ("li"); for (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); if (text! = null) {alerta (text)}}Ahora, si recarga esta página, solo verá un cuadro de diálogo Alter que muestra el mensaje "Un recordatorio suave", como se muestra a continuación.
Incluso podemos reducir este código a uno más corto. Al verificar si ciertos datos son un valor nulo, en realidad estamos verificando si existe. Este tipo de verificación se puede simplificar para usar directamente los datos verificados como condición para la declaración IF. Si (algo) es completamente equivalente a if (algo! = nulo), pero el primero es obviamente más conciso. En este momento, si algo existe, la condición de la declaración IF será verdadera; Si algo no existe, la condición de la declaración IF será falsa.
A este ejemplo, siempre que reemplacemos if (title_text! = Null) con if (title_text), podemos obtener un código más conciso. Además, para aumentar aún más la legibilidad del código, también podemos aprovechar esta oportunidad para escribir declaraciones alter y si las declaraciones en la misma línea, lo que puede acercarlas a las oraciones inglesas en nuestra vida diaria:
var ts = document.getElementsByTagName ("li"); for (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); if (text) alerta (text)}3.4.2 Método setattribute ()
Todos los métodos que le presentamos antes solo se pueden usar para recuperar información. El método setattribute () tiene una diferencia esencial de ellos: nos permite hacer modificaciones al valor del nodo de atributo.
Similar al método getAttribute (), el método setattribute () también es una función que solo se puede llamar a través del objeto de nodo elemento, pero el método setattribute () requiere que nos pasemos dos parámetros:
obect.setAttribute (atributo, valor)
En el siguiente ejemplo, la primera declaración recuperará el elemento cuyo valor de atributo de identificación se compra, y la segunda declaración establecerá el valor del atributo de título de este elemento en una lista de bienes:
var compras = document.getElementById ("compras") Shopping.SetAttribute ("Título", "Una lista de bienes")Podemos usar el método getAttribute () para demostrar que el valor del atributo de título de este elemento ha cambiado:
var compras = document.getElementById ("compras"); alerta (comprar.getAttribute ("title")); Shopping.SetAttribute ("Título", "Una lista de bienes"); alerta (Shopping.getAttribute ("Título"));Las declaraciones anteriores aparecerán dos diálogos de alerta en la pantalla: el primer diálogo alter aparece antes de que se llame el método setattribute (), estará en blanco o se muestra la palabra "nulo"; El segundo aparece después de establecer el valor del atributo de título, mostrará el mensaje "Una lista de bienes".
En el ejemplo anterior, establecemos el atributo de título de un nodo existente, pero este atributo no existía en primer lugar. Esto significa que la llamada setattribute () que emitimos realmente completa dos operaciones: primero cree este atributo y luego establezca su valor. Si usamos el método setattribute () en un atributo existente del nodo de elemento, el valor actual de este atributo se sobrescribirá.
En el documento de muestra "Lista de compras", el elemento <p> ya tiene un atributo de título, y el valor de este atributo es un recordatorio suave. Podemos usar el método setattribute () para cambiar su valor actual:
<script type = "text/javaScript"> var ts = document.getElementsByTagName ("li"); for (var i = 0; i <ts.length; i ++) {var text = ts [i] .getAttribute ("title"); alert (alerta (title] .getTribute ("title")) if (text) {ts [ts [i]. SUCEDECT! ") Alert (ts [i] .getAttribute (" title "))}}El código anterior primero recuperará todos los elementos <p> que ya tienen atributos de título del documento, y luego modificará todos sus valores de atributo de título al nuevo texto de título. Específicamente para el documento "Lista de compras", el valor de la propiedad se sobrescribirá un recordatorio suave.
Aquí hay un detalle muy notable: las modificaciones al documento a través del método setattribute () hará que el documento muestre efectos y/o comportamientos en la ventana del navegador para cambiar en consecuencia, pero cuando vamos el código fuente del documento a través del opción de visión del navegador, aún veremos el valor de los atributos originales, es decir, las modificaciones realizadas por el método Setattrute () no se reflejarán en el código fuente del documento del documento. Este fenómeno de "inconsistente por dentro y fuera" proviene del modo de trabajo de DOM: primero cargue el contenido estático del documento y luego los actualice dinámicamente. Dynamic Refresh no afecta el contenido estático del documento. Esta es exactamente la potencia real y la tentación de DOM: el contenido de página refrescante no requiere que los usuarios finales realicen operaciones de actualización de la página en sus navegadores.