En este artículo veremos cuál es el documento rápido.getElementByID(‘txtName’) o $(“#txtName”). Veamos primero qué son estos y qué hacen.
Método document.getElementByID(‘txtName): Este método se utiliza para obtener el elemento que tiene el atributo ID con el valor especificado.
Sintaxis:
document.getElementById( elementID )
Parámetro: El ID del elemento que desea obtener.
Valor de retorno: devuelve nulo si no se encuentra ningún elemento con una identificación específica.
Este método se usa básicamente si queremos manipular un elemento en particular o si desea información sobre un elemento en particular. Una identificación debe ser única dentro de una página; de lo contrario, si dos elementos tienen la misma identificación, este método devolverá el primer elemento.
Ejemplo: En este ejemplo, cambiaremos el texto del elemento cuya identificación coincide.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p id="first">My id is first. <br>
Click on the button <br>
to change my text.
</p>
<button onclick="FirstFunction()">Click Here</button>
<script>
FirstFunction = ()=>{
document.getElementById("first")
.innerHTML = "Hey! i am changed."
}
</script>
</body>
</html>
Producción:
$(‘#txtName) Método: Este selector de id del elemento jQuery select con el id especificado. Todo, como una identificación, debe ser único, todos se aplican aquí también.
Sintaxis:
$("#id")
Parámetro: Pase la identificación del elemento que desea obtener.
Básicamente, seleccionamos un elemento usando este método y luego realizamos varias operaciones en el elemento seleccionado, como obtener texto interno, cambiar CSS, etc.
Ejemplo: En este ejemplo, cambiaremos el CSS del elemento seleccionado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p id="first">
Click on button to <br>
Change my look.
</p>
<button onclick="FirstFunction()">Click Here</button>
<script>
FirstFunction = ()=>{
$("#first").css({
"border": "2px solid red",
"background-color": "pink",
"width":"10%",
"padding": "10px"
})
}
</script>
</body>
</html>
Producción:
¿Cuál es el método más rápido entre document.getElementByID(‘txtName’) y $(‘#txtName’): Esta es realmente una buena pregunta. Para responder a esto, recordemos ¿qué es jQuery ?
JQuery es una biblioteca de javascript diseñada para simplificar el código. Entonces, básicamente, jQuery está escrito en javascript. Document.getElementByID(‘txtName’) se usa para seleccionar un elemento cuyo id es txtName y está escrito en javascript nativo . Mientras que $(‘#txtName’) también se usa para seleccionar un elemento cuyo id es txtName. Esta es una función presente en la biblioteca jQuery. Si observa la implementación de esta función, internamente realiza una llamada a document.getElementByID(). La respuesta simple es document.getElementByID(‘txtName’) es más rápido que $(‘#txtName’)porque jQuery está escrito sobre javascript. Significa que internamente jQuery está usando solo códigos javascript nativos. Y javascript nativo siempre será rápido.
Diferencia entre document.getElementByID(‘txtName’) y $(‘#txtName’).
| documento.getElementByID(‘txtName’) | $(‘#txtNombre’) |
|---|---|
| Se utiliza para seleccionar un elemento con una identificación especificada. | También se usa para seleccionar un elemento con una identificación específica. |
| Este método está escrito en javascript nativo. | Este método pertenece a jQuery. Y jQuery está escrito en javascript. |
| Los métodos nativos siempre son rápidos. |
Los métodos escritos en jquery son más lentos en comparación con los nativos. métodos porque internamente llaman métodos nativos. |