Los elementos del Modelo de objetos del documento (DOM) son algo así como un elemento DIV, HTML, BODY en la página HTML. Se usa un jQuery Selector para seleccionar uno o más elementos HTML usando jQuery. Principalmente usamos Selectores para acceder a los elementos DOM. Si son solo un elemento único en particular en la página HTML, podemos acceder a él por su etiqueta como $(“etiqueta”) , pero cuando tenemos más de uno de su tipo, accederemos a ellos con la ID que cuando $(“ #id”) entra en juego.
Pero si queremos usar los elementos DOM sin procesar, podemos convertirlos en objetos javascript de esa manera, podemos usarlos para los métodos presentes en javascript pero no en jquery.
Sintaxis
$(“selector”).get(0)
o
$(“selector”)[0]
Los siguientes ejemplos ilustran el enfoque.
Ejemplo 1: Este ejemplo usará el $(“selector”).get(0):
Javascript
<!DOCTYPE html>
<html>
<head>
<title>The jQuery DOM elements Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
// Access with tag
$("p").css("color", "red");
$("button").click(function() {
// Access with id
$("#d1").css("color", "purple");
$("#d2").css("color", "green");
$("#d3").css("color", "black");
// Converting into javascript object.
$("#d4").get(0).reset();
});
});
</script>
</head>
<body style="text-align:center;">
<div>
<h4 id="d1">Hello</h4>
<h1 id="d2">GeeksforGeeks</h1>
<h3 id="d3">
A Computer Science Portal for Geeks
</h3>
<form id="d4">
Enter name:
<input type="text" />
</form>
<br>
<button>Button</button>
<br>
<p>
Clicking button will Resets the
textbox and changes the background
colors of the above texts.
</p>
</div>
</body>
</html>
Salida: Como el método reset() no está disponible en jquery, hemos convertido el elemento jquery en un objeto javascript o en elementos DOM sin formato.
Ejemplo 2: Este ejemplo ilustrará el uso del selector $(“selector”)[0] .
Javascript
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
// Access with tag
$("h1").css("color", "green");
$("button").click(function() {
// d1 gets replaced with d4.
$("#d1")[0].outerHTML =
"<h3 id='d4'>A Computer Science Portal for Geeks</h3>";
$("#d4").css("color", "black");
});
});
</script>
</head>
<body>
<center>
<div>
<h1 id="d1">Hello Welcome to GeeksforGeeks</h1>
<button>Button</button>
<br>
<h4>
The above button changes the
content of the above text.
</h4>
</div>
</center>
</body>
</html>
Producción:
Nota: Como externalHTML es el HTML de un elemento, incluido el elemento en sí, no está disponible en jquery. Hemos convertido el elemento jquery en un objeto javascript o en elementos DOM sin procesar para acceder a HTML externo y reemplazarlo con otro encabezado.