JavaScript es un lenguaje de secuencias de comandos de alto nivel, interpretado, tipado dinámicamente y del lado del cliente. HTML se utiliza para crear páginas web estáticas. JavaScript permite páginas web interactivas cuando se usa junto con HTML y CSS. Document Object Manipulation (DOM) es una interfaz de programación para documentos HTML y XML. DOM actúa como una interfaz entre JavaScript y HTML combinado con CSS. El DOM representa el documento como Nodes y objetos, es decir, el navegador convierte cada etiqueta HTML en un objeto JavaScript que podemos manipular. DOM es una representación orientada a objetos de la página web, que se puede modificar con un lenguaje de secuencias de comandos como JavaScript. Para manipular objetos dentro del documento, debemos seleccionarlo y luego manipularlo.
La selección de un elemento se puede realizar de cinco formas:
- Método document.querySelector(): Devuelve el primer elemento que coincide con la consulta.
- Método document.querySelectorAll(): Devuelve todos los elementos que coinciden con la consulta.
- Método document.getElementById(): Devuelve el único elemento que coincide con el id.
- Método document.getElementsByClassName(): Devuelve todos los elementos que coinciden con la clase.
- Método document.getElementsByTagName(): Devuelve una lista de los elementos que coinciden con el nombre de la etiqueta.
DOM permite la manipulación de atributos. Los atributos controlan el comportamiento de la etiqueta HTML o proporcionan información adicional sobre la etiqueta. JavaScript proporciona varios métodos para manipular un atributo de elemento HTML.
Los siguientes métodos se utilizan para manipular los atributos:
- Método getAttribute(): Devuelve el valor actual de un atributo en el elemento y devuelve nulo si el atributo especificado no existe en el elemento.
- Método setAttribute(): actualiza el valor de un atributo ya existente en el elemento especificado; de lo contrario, se agrega un nuevo atributo con el nombre y el valor especificados.
- Método removeAttribute(): Se utiliza para eliminar un atributo del elemento especificado.
El siguiente código demuestra la manipulación de atributos donde el atributo href de la etiqueta <a> cambia al hacer clic en el botón. Se llama a una función al hacer clic en el botón que actualiza el valor del atributo. La función myFunction() es una función de JavaScript y hace que el código HTML sea más interactivo al realizar modificaciones en el tiempo de ejecución.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
How to change the href attribute
dynamically using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Change the href attribute value<br>
dynamically using JavaScript
</h3>
<a href="https://www.google.com">
Go to Google
</a>
<br><br>
<button onclick="myFunction()">
Click Here!
</button>
<script type="text/javascript">
function myFunction() {
var link = document.querySelector("a");
link.getAttribute("href");
link.setAttribute("href",
"https://www.geeksforgeeks.org");
link.textContent = "Go to GeeksforGeeks";
}
</script>
</body>
</html>
Producción:
Explicación: el enlace abre https://www.google.com antes de hacer clic en el botón. cuando se hace clic en el botón, se llama a la función myFunction() que selecciona el atributo href de la etiqueta <a> y actualiza su valor a https://www.geeksforgeeks.org, ya que solo hay una etiqueta <a> en el HTML documento y nuestro objetivo es cambiar el valor de su atributo, usamos querySelector() y el atributo se actualiza usando el método setAttribute().
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
How to change the href attribute
dynamically using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Change the href attribute value<br>
dynamically using JavaScript
</h3>
<a href="https://www.google.com" id="myLink">
Go to Google
</a>
<br><br>
<button onclick="myFunction()">
Click Here!
</button>
<script type="text/javascript">
function myFunction() {
document.getElementById('myLink').href
="https://www.geeksforgeeks.org";
document.getElementById("myLink")
.textContent = "Go to GeeksforGeeks";
}
</script>
</body>
</html>
Producción:
Explicación: el enlace abre https://www.google.com antes de hacer clic en el botón. Cuando se hace clic en el botón, se llama a la función myFunction(), que selecciona el atributo href de la etiqueta <a> y actualiza su valor a https://www.geeksforgeeks.org. En este enfoque, el método getElementById() se usa para seleccionar el elemento cuya URL de destino se va a cambiar.
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA