Cómo acceder a atributos de elementos con JavaScript

Escrito por allen bethea Google | Traducido por daniel cardona
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo acceder a atributos de elementos con JavaScript
Los métodos DOM de JavaScript pueden cambiar el estilo de una página Web. (Stockbyte/Retrofile/Getty Images)

El Document Object Model (DOM o modelo de objeto de documento) proporciona a los diseñadores web acceso a la estructura oculta de una página Web. Los métodos JavaScript getElementById, getElementsByTagName, getElementsByClassName, getElementsByTagName, createElement y createAttribute pueden inspeccionar, modificar y añadir etiquetas HTML y la información de estilo. La propiedad "innerHTML" de la función getElementById permite que se inserte contenido en los elementos HTML tales como encabezados, párrafos, enlaces y listas ordenadas. Los elementos HTML deben estar etiquetados con un identificador o nombre o JavaScript no podrá acceder a ellos.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia la aplicación de texto sin formato que está disponible en tu computadora.

  2. 2

    Escribe el siguiente código en el editor de texto.

    <html> <head>

    <style type="text/css"> p { font-weight:normal; color:red; font-style:normal; font-size:2em; border:1px dotted black; background-color:yellow; width:50%; } </style>

    <script language="javascript"> function changeStyle(){ document.getElementById("test").fontweight = "bold"; document.getElementById("test").style.color="white"; document.getElementById("test").style.fontStyle="italic"; document.getElementById("test").style.fontSize="4em"; document.getElementById("test").style.backgroundColor="black"; document.getElementById("test").style.textAlign="center"; document.getElementById("test").innerHTML="¡JavaScript y DOM funcionan!"; document.getElementById("container").style.backgroundColor="yellow"; } </script> </head>

    <body id="container"> <p id="test" onClick="javascript:changeStyle()" >Haz clic aquí para cambiar el estilo de la página</p> </body> </html>

  3. 3

    Haz clic en el menú "Archivo". Selecciona la opción "Guardar". Guarda con el nombre de archivo "test.html".

  4. 4

    Inicia el navegador Web que está disponible en tu computadora. Haz clic en el menú "Archivo" y selecciona "Abrir archivo".

  5. 5

    Busca el archivo "test.html" que acabas de crear, selecciónalo con el ratón, a continuación, haz clic en "Abrir".

  6. 6

    Haz clic en el texto con el fondo amarillo para cambiar la apariencia de la página.

Consejos y advertencias

  • Ambas funciones de JavaScript que llaman "getElementById ()" y "getElementsByName ()" pueden acceder y manipular los elementos HTML DOM. El método "getElementById ()" puede llegar a los elementos HTML directamente, mientras que "getElementsByName ()" se suma a la complejidad del programa, permitiendo únicamente el acceso indirecto a través de una matriz que contiene todos los elementos de las etiquetas. Por otra parte, a pesar de que todas las etiquetas HTML se pueden marcar con una identificación, no todas pueden ser etiquetadas con un nombre.
  • Los navegadores más antiguos no ejecutan correctamente las funciones de JavaScript DOM. Siempre prueba el código en distintos navegadores y versiones anteriores del mismo navegador con el fin de asegurar que el código funcione como se esperaba.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles