Obtener Elemento por ID en jQuery
En JavaScript, podemos usar el método document.getElementById() para obtener el elemento por ID. En jQuery, podemos usar $('#contents') para obtener el elemento por ID.
Este tutorial demuestra cómo obtener elementos por ID utilizando ambos métodos.
Obtener elemento por ID en JavaScript
El document.getElementById() es el método más popular utilizado para obtener elementos por ID. Este método se usa principalmente en el diseño web para cambiar el valor de un elemento u obtener ese elemento.
La sintaxis de este método es:
document.getElementById('id')
Probemos un ejemplo para obtener el elemento por ID usando este método:
<!DOCTYPE html>
<html>
<head>
<title>
Select element by ID in javascript
</title>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
<h1 style="color:blue;" id="delftstack">
DELFTSTACK
</h1>
<script>
setTimeout(function() {
document.getElementById('delftstack').style.color = "green"
}, 3000);
</script>
</body>
</html>
El código anterior obtiene el ID del elemento h1 y cambia su color en un tiempo de espera. Ver salida:
Obtener elemento por ID en jQuery
jQuery tiene un método más fácil para seleccionar un elemento por ID. jQuery tiene un selector de ID que puede seleccionar el elemento con una ID única.
La sintaxis de este método es:
$("#idname");
Probemos el ejemplo en jQuery, que cambiará el fondo del elemento al obtenerlo a través de la ID:
<!DOCTYPE html>
<html>
<head>
<title>
Select element by ID in JQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
<h1 style="color:blue;" id="delftstack">
DELFTSTACK
</h1>
<script>
setTimeout(function () {
$('#delftstack').css("background-color", "yellow");;
}, 3000);
</script>
</body>
</html>
Vea el resultado de este código:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook