Is dit:
var contents = document.getElementById('contents');
Hetzelfde als dit:
var contents = $('#contents');
Aangezien jQuery is geladen?
Antwoord 1, autoriteit 100%
Niet precies!!
document.getElementById('contents'); //returns a HTML DOM Object
var contents = $('#contents'); //returns a jQuery Object
Als u in jQuery hetzelfde resultaat wilt krijgen als document.getElementById, kunt u toegang krijgen tot het jQuery-object en het eerste element in het object ophalen (onthoud dat JavaScript-objecten op dezelfde manier werken als associatieve arrays).
p>
var contents = $('#contents')[0]; //returns a HTML DOM Object
Antwoord 2, autoriteit 14%
Nee.
Als u document.getElementById('id')aanroept, wordt een onbewerkt DOM-object geretourneerd.
Als u $('#id')aanroept, wordt een jQuery-object geretourneerd dat het DOM-object omhult en jQuery-methoden biedt.
Je kunt dus alleen jQuery-methoden zoals css()of animate()aanroepen tijdens de $()-aanroep.
Je kunt ook $(document.getElementById('id'))schrijven, wat een jQuery-object zal retourneren en gelijk is aan $('#id').
Je kunt het onderliggende DOM-object van een jQuery-object halen door $('#id')[0]te schrijven.
Antwoord 3, autoriteit 3%
Sluit, maar niet hetzelfde. Ze krijgen hetzelfde element, maar de jQuery-versie is verpakt in een jQuery-object.
Het equivalent zou dit zijn
var contents = $('#contents').get(0);
of dit
var contents = $('#contents')[0];
Deze halen het element uit het jQuery-object.
Antwoord 4, autoriteit 3%
Een opmerking over het verschil in snelheid. Voeg het volgende fragment toe aan een onclick-oproep:
function myfunc()
{
var timer = new Date();
for(var i = 0; i < 10000; i++)
{
//document.getElementById('myID');
$('#myID')[0];
}
console.log('timer: ' + (new Date() - timer));
}
Je kunt de ene reactie afwisselen en vervolgens de andere uitspreken. In mijn tests,
document.getElementbyId gemiddeld ongeveer 35ms(fluctuerend van
25mstot52msop ongeveer15 runs)
Aan de andere kant, de
jQuery was gemiddeld ongeveer 200ms(variërend van
181mstot222msop ongeveer15 runs).Uit deze eenvoudige test kun je zien dat de jQuery ongeveer 6 keerzo lang duurde.
Natuurlijk zijn dat meer dan 10000iteraties, dus in een eenvoudigere situatie zou ik waarschijnlijk jQuery gebruiken voor gebruiksgemak en alle andere coole dingen zoals .animateen .fadeTo. Maar ja, technisch gezien is getElementByIdeen stuk sneller.
5
Nee, eigenlijk zou hetzelfde resultaat zijn:
$('#contents')[0]
JQuery weet niet hoeveel resultaten van de query worden geretourneerd. Wat je terugkrijgt is een speciaal jQuery-object dat een verzameling van alle controles is die overeenkomen met de query.
Een deel van wat JQuery zo handig maakt, is dat de meeste methoden op dit object opgeroepen dat eruitzien als ze bedoeld zijn voor één controle, zijn eigenlijk in een lus opgeroepen op alle leden die hij Collection
heeft opgeroepen
Wanneer u de syntaxis [0] gebruikt, neemt u het eerste element uit de innerlijke collectie. Op dit punt krijgt u een DOM-object
6
Als iemand anders dit tegenkomt… Hier is nog een verschil:
Als de id tekens bevat die niet worden ondersteund door de HTML-standaard (zie SO-vraag hier) dan vindt jQuery het mogelijk niet, zelfs als getElementById dat wel doet.
Dit is mij overkomen met een id met “/”-tekens (ex: id=”a/b/c”), met Chrome:
var contents = document.getElementById('a/b/c');
kon mijn element vinden, maar:
var contents = $('#a/b/c');
niet gedaan.
Trouwens, de eenvoudige oplossing was om die id naar het naamveld te verplaatsen. JQuery had geen problemen om het element te vinden met:
var contents = $('.myclass[name='a/b/c']);
Antwoord 7
Zoals de meeste mensen hebben gezegd, is het belangrijkste verschil het feit dat het is ingepakt in een jQuery-object met de jQuery-aanroep versus het onbewerkte DOM-object met gebruik van gewoon JavaScript. Het jQuery-object kan er natuurlijk andere jQuery-functies mee doen, maar als u alleen eenvoudige DOM-manipulatie wilt uitvoeren, zoals basisstijlen of elementaire gebeurtenisafhandeling, is de rechte JavaScript-methode altijd een beetje sneller dan jQuery, omdat u dat niet doet. t hoeft te laden in een externe bibliotheek met code die is gebouwd op JavaScript. Het scheelt een extra stap.
Antwoord 8
Een ander verschil: getElementByIdretourneert de eersteovereenkomst, terwijl $('#...')een verzameling overeenkomsten retourneert – ja, dezelfde ID kan worden herhaald in een HTML-document.
Verder wordt getElementIdaangeroepen vanuit het document, terwijl $('#...')kan worden aangeroepen vanuit een selector. Dus, in de onderstaande code, zal document.getElementById('content')de hele body retourneren, maar $('form #content')[0]zal terugkeren binnenin het formulier.
<body id="content">
<h1>Header!</h1>
<form>
<div id="content"> My Form </div>
</form>
</body>
Het lijkt misschien vreemd om dubbele ID’s te gebruiken, maar als je iets als WordPress gebruikt, kan een sjabloon of plug-in dezelfde ID gebruiken als in de inhoud. De selectiviteit van jQuery kan je daarbij helpen.
Antwoord 9
var contents = document.getElementById('contents');
var contents = $('#contents');
De codefragmenten zijn niet hetzelfde. de eerste retourneert een Elementobject (bron ).
De tweede, jQuery-equivalent, retourneert een jQuery-object dat een verzameling van nul of één DOM-element bevat. (jQuery-documentatie). Intern gebruikt jQuery document.getElementById()voor efficiëntie.
In beide gevallen, als er meer dan één element wordt gevonden, wordt alleen het eerste element geretourneerd.
Bij het controleren van het github-project voor jQuery vond ik de volgende regelfragmenten die document.getElementById-codes lijken te gebruiken (https://github.com/jquery/jquery/blob/master/src/core/init.jsregel 68 en later)
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] );
10
JQuery is gebouwd over JavaScript. Dit betekent dat het toch gewoon Javascript is.
document.getelementByID ()
Het document.GeelementByID () -methode retourneert het element dat het ID-kenmerk heeft met de opgegeven waarde en retourneert null als er geen elementen met de opgegeven ID bestaat. Een ID moet uniek zijn binnen een pagina.
jQuery $ ()
JQuery () of $ () met een ID-selector, aangezien het argument een jQuery-object zal retourneren dat een verzameling van ofwel nul of één DOM-element bevat. Elke waarde moet slechts één keer in een document worden gebruikt. Als er meer dan één element dezelfde ID is toegewezen, zullen vragen die die ID gebruiken alleen het eerste gematchte element in de DOM te selecteren.
11
Alle bovenstaande antwoorden zijn correct. Als je het in actie wilt zien, vergeet dan niet dat je console in een browser hebt, waar je het daadwerkelijke resultaat kristalhelder kunt zien:
Ik heb een HTML:
<div id="contents"></div>
Ga naar de console (cntrl+shift+c)en gebruik deze opdrachten om uw resultaat duidelijk
te zien
document.getElementById('contents')
>>> div#contents
$('#contents')
>>> [div#contents,
context: document,
selector: "#contents",
jquery: "1.10.1",
constructor: function,
init: function …]
Zoals we kunnen zien, hebben we in het eerste geval de tag zelf gekregen (dat is strikt genomen een HTMLDivElement-object). In het laatste hebben we eigenlijk geen gewoon object, maar een array van objecten. En zoals vermeld door andere antwoorden hierboven, kunt u de volgende opdracht gebruiken:
$('#contents')[0]
>>> div#contents
Antwoord 12
Alle antwoorden zijn tegenwoordig oud, vanaf 2019 kunt u rechtstreeks toegang krijgen tot id-sleutelbestanden in javascript, probeer het gewoon
<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>
Online demo!
– https://codepen.io/frank-dspeed/pen/mdywbre