Bij het programmeren in scripttalen is het periodiek nodig om een ​​pauze in te lassen - om de uitvoering van het programma een tijdje te onderbreken en dan verder te werken. In VBS- en PHP-scripts zijn bijvoorbeeld de volgende methoden mogelijk:

VBS: wscript.sleep 1500 (stop gedurende 1,5 seconde)

PHP: slaap(10); (stop gedurende 10 seconden)

Tijdens dergelijke pauzes zal het runtime-systeem (PHP of VBS) doet niets. Een ontwikkelaar die intuïtief iets soortgelijks in Javascript probeert te gebruiken, zal onaangenaam verrast zijn. Een typische fout bij het maken van een pauze in Javascript ziet er als volgt uit:

Functie badtest() ( for (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

Je denkt dat wanneer tijdens de lus de beurt komt aan het trekken van het volgende getal, je setTimeout de Javascript eerlijk zal stoppen met werken, 0,9 seconden wacht, het gewenste getal aan het einde van het invoerveld toevoegt en dan verder werkt. Maar in werkelijkheid is dit niet het geval: setInterval en setTimeout in Javascript vertragen alleen de uitvoering van de actie (of functie) gespecificeerd tussen haakjes. In ons voorbeeld gebeurt het volgende:

ik = 1;

vertraging van het toevoegen van het getal "1" aan het invoerveld met 0,9 seconden;

Onmiddellijk nadat dit probleem is ingesteld, gaat de cyclus verder: i=2;

vertraging van het toevoegen van het getal "2" aan het invoerveld met 0,9 seconden;

Onmiddellijk betekent bijvoorbeeld 1 ms (dat wil zeggen onevenredig klein vergeleken met 900 ms): de lus zal vrijwel onmiddellijk zijn werk doen, waardoor verschillende uitgestelde taken vanaf hetzelfde tijdstip ontstaan. Dit betekent dat alle lopende “tekentaken” vrijwel tegelijkertijd worden voltooid, zonder pauzes tussen het toevoegen van nieuwe nummers. De cyclus begint; alles bevriest gedurende 0,9 s; en shirr - alle getallen worden achter elkaar op een rij geschoten.

Hoe setTimeout in een dergelijk geval correct toe te passen? Het is ingewikkeld. Je zult de functie moeten aanroepen recursief(vanuit de functie dezelfde functie), en zodat dit proces niet eindeloos is, stelt u een stopvoorwaarde in (bijvoorbeeld de grootte van het af te drukken getal):

Functie welltest() ( if (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

En de variabele i zal buiten de functie moeten worden geïnitialiseerd, bijvoorbeeld als volgt:

Nu werkt alles zoals het hoort (we hebben de vertragingstijd teruggebracht van 0,9 s naar 0,4 s). Maar voor dergelijke taken is het logischer om setInterval te gebruiken in plaats van setTimeout (hoewel hiervoor twee functies nodig zijn):

Functie besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) function draw() ( document.getElementById("test3").value += ++i if (i >= 9) clearInterval(venster.timer1) )

Het bijzondere van de Javascript setInterval-methode is dat deze niet “vanzelf” overgaat; deze moet worden gestopt met een speciale clearInterval-methode. En om duidelijk te maken wat er precies moet worden gestopt, wordt aan de taak voor de uitgestelde actie een speciale identificatie toegewezen: een timer: window.timer1 = window.setInterval(...) .

Identifiers kunnen ook worden toegewezen aan taken die zijn gemaakt met de setTimeout-methode. Alle timer-ID's moeten van elkaar verschillen (uniek binnen het huidige browservenster). Vervolgens kunt u in het venster verschillende taken maken die uitgestelde acties gebruiken, en deze taken zullen parallel worden uitgevoerd (een soort van gelijktijdig, als de computer over voldoende bronnen beschikt), wat in principe onmogelijk is in PHP of VBS.

Hier is een voorbeeld van een pagina waarop meerdere Javascript-timers tegelijkertijd draaien: setinterval.htm(Javascript-functies in file setinterval.js). Alle paginatimers (behalve menu) kunnen worden gestopt met de Esc-toets. Alle voorbeeldtimers zijn gebaseerd op een “natuurlijke” (en niet abstracte i++) aftelling: tijd of afstand. Alle “klokken” zijn speciaal gedesynchroniseerd (voor de duidelijkheid). Afstandsafhankelijke timers worden gebruikt in de “indicator” en in het vervolgkeuzemenu (“pull-out”).

Vervolgkeuzemenu

Ons schuifmenu is eigenlijk glijdend (van onder de “kop”): er zijn speciaal gaten tussen de elementen gelaten, zodat je kunt zien hoe het naar buiten schuift. Onverwachts bleek dat we de uitgang niet even soepel konden laten verlopen voor lijsten van verschillende lengtes - waarschijnlijk vanwege de lage prestaties van de computer (AMD Athlon 999 MHz).

Het is overduidelijk dat het voor schoonheid en harmonie noodzakelijk is dat de lijsten met verschillende menu-items tegelijkertijd verschijnen. Dat wil zeggen dat langere lijsten met een hogere snelheid moeten verdwijnen, en kortere met een lagere snelheid. Het lijkt erop dat het als volgt kan worden geïmplementeerd:

We stellen de totale ‘vertrek’-tijd bijvoorbeeld in op 200 ms.

Als de vervolgkeuzelijst een hoogte van 20 px heeft, is het duidelijk dat we deze één pixel per interval van 10 ms naar beneden kunnen verplaatsen - en dan verschijnt binnen 200 ms de hele lijst.

Als de vervolgkeuzelijst 40 px hoog is, moeten we deze, om in dezelfde hoeveelheid tijd te passen, elke 5 ms één pixel naar beneden verplaatsen.

Door deze logica moeten we, als de vervolgkeuzelijst 200 px hoog is, deze elke 1 ms één pixel naar beneden verplaatsen. Maar zo'n snelheid werkt niet op onze computer - de browser heeft simpelweg geen tijd om de nieuwe positie van de lijst in één milliseconde te tekenen. Ja. Javascript slaagt erin te tellen (wat valt er te tellen?), maar de browser (Firefox) heeft geen tijd om weer te geven. Typische situatie voor internet.

Daarom is het mogelijk om de tijd voor het verlaten van het menu min of meer gelijk te maken met behulp van krukken, en het is nog steeds onduidelijk hoe dit zal werken op een snellere computer. Maar we moeten op de langzaamste rekenen, toch? Het algoritme (zonder rekening te houden met de snelheid van de computer) ziet er ongeveer zo uit:

Stel de totale tijd in voor het uitchecken van de lijst: tijd = 224 (ms).

We stellen de minimale tijd in voor één interval in de cyclus: vertraging = 3 (ms).

Stel de minimale stap in voor het verplaatsen van de lijst: offset = 1 (px).

We veranderen dit allemaal afhankelijk van de hoogte van de lijst: 1) verhoog de vertragingstijd (intervaltijd) omgekeerd evenredig met de hoogte en direct evenredig met de totale tijdtijd (op een hoogte van 224 is de coëfficiënt 1); 2) als de hoogte groter is dan 40 px, verhoog dan de minimale stap in verhouding tot de hoogte. De constante "40" werd experimenteel verkregen voor de langzaamste computer. Tests op een Pentium 4 CPU-computer van 2,53 GHz lieten precies hetzelfde getal zien: 40. Anders lopen de timers niet meer in de juiste volgorde en lopen de lijsten uit de pas.

Nu komen de lijsten min of meer naar buiten. Voor min of meer dezelfde tijd. Op de pagina setinterval.htm.

En hier komt Bruce:

Functie slide_do(obj, maxtop, offset) ( if (getTopLeft(obj).top< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }

De functie zelf, die geneste lijsten uit het menu duwt, is, zoals we kunnen zien, heel eenvoudig. Het enige dat overblijft is om het uit te voeren met zoiets als deze regel:

Ts.timer1 = setInterval(function())(slide_do(ts, maxtop, offset)), vertraging)

Voordat u begint, berekent u al deze maxtop en offset, en plaatst u de lijst ook in de mintop-positie. Dit is wat de “voorlopige” slide()-functie van 40 regels doet. En allemaal samen - in een bestand setinterval.js. Ja, en deze onzin werkt helemaal niet zonder het meegeleverde stijlenbestand

Binnen het document dat overeenkomt met de opgegeven selector of groep selectors. Als er geen overeenkomsten worden gevonden, wordt null geretourneerd.

Opmerking: Het matchen wordt gedaan met behulp van diepte-eerste pre-order doorloop van de knooppunten van het document, beginnend met het eerste element in de opmaak van het document en itererend door opeenvolgende knooppunten in volgorde van het aantal onderliggende knooppunten.

Syntaxiselement = document.querySelector(selectors); Parameterkiezers A DOMString met een of meer selectors die bij elkaar passen. Deze tekenreeks moet een geldige CSS-selectortekenreeks zijn; als dit niet het geval is, wordt er een SYNTAX_ERR-uitzondering gegenereerd. Zie DOM-elementen lokaliseren met behulp van selectors voor meer informatie over selectors en hoe u deze kunt beheren.

Opmerking: Tekens die geen deel uitmaken van de standaard CSS-syntaxis moeten worden geëscaped met behulp van een backslash-teken. Omdat JavaScript ook backslash-escaping gebruikt, moet u vooral voorzichtig zijn bij het schrijven van letterlijke tekenreeksen met deze tekens. Zie voor meer informatie.

Retourwaarde Uitzonderingen SYNTAX_ERR De syntaxis van de opgegeven selectors is ongeldig. Gebruiksnotities

Als de opgegeven selector overeenkomt met een ID die meerdere keren onjuist in het document wordt gebruikt, wordt het eerste element met die ID geretourneerd.

Ontsnappen aan speciale karakters

Om te matchen met een ID of selectors die niet de standaard CSS-syntaxis volgen (door bijvoorbeeld een dubbele punt of spatie op ongepaste wijze te gebruiken), moet u het teken laten ontsnappen met een backslash (" \ "). Omdat de backslash ook een escape-teken is in JavaScript, moet u, als u een letterlijke tekenreeks invoert, daaraan ontsnappen tweemaal(een keer voor de JavaScript-tekenreeks en een andere keer voor querySelector()):

console.log("#foo\bar"); // "#fooar" (\b is het backspace-besturingsteken) document.querySelector("#foo\bar"); // Komt met niets overeen console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // Match de eerste div document.querySelector("#foo:bar"); // Komt met niets overeen document.querySelector("#foo\\:bar"); // Match de tweede div

Voorbeelden Het vinden van het eerste element dat overeenkomt met een klasse

In dit voorbeeld wordt het eerste element in het document met de klasse " myclass " geretourneerd:

Var el = document.querySelector(".mijnklasse");

Een complexere selector

Selectors kunnen ook heel krachtig zijn, zoals blijkt uit het volgende voorbeeld. Hier, de eerste element met de naam "login" () gelegen in a waarvan de klasse "user-panel main" () in het document is, wordt geretourneerd:

Var el = document.querySelector("div.user-panel.main input");

Specificaties Specificatie Status Opmerking

DOM De definitie van "document.querySelector()" in die specificatie.	Levensstandaard

Browsercompatibiliteit

De compatibiliteitstabel op deze pagina is gegenereerd op basis van gestructureerde gegevens. Als je wilt bijdragen aan de gegevens, ga dan naar https://github.com/mdn/browser-compat-data en stuur ons een pull-verzoek.

Update compatibiliteitsgegevens op GitHub

Desktop mobiel Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome voor Android Firefox voor Android Opera voor Android Safari op iOS Samsung InternetquerySelector

Chrome Volledige ondersteuning 1	Rand Volledige ondersteuning 12	Firefox Volledige ondersteuning 3.5	IE Volledige ondersteuning 8	Opera Volledige ondersteuning 10	Safari Volledige ondersteuning 3.2	WebView Android Volledige ondersteuning Ja	Chrome Android Volledige ondersteuning Ja	Firefox Android Volledige ondersteuning Ja	Opera Android Volledige ondersteuning 10.1	Safari iOS Volledige ondersteuning 3.2	Samsung InternetAndroid?

Legenda Volledige ondersteuning Volledige ondersteuning Compatibiliteit onbekend Compatibiliteit onbekend

Om het script met elk pagina-element te laten werken, moet dit element eerst worden gevonden. Er zijn verschillende manieren om dit in JavaScript te doen. Het gevonden element wordt meestal toegewezen aan een variabele, en vervolgens krijgt het script via deze variabele toegang tot het element en voert er enkele acties mee uit.

Zoek op ID

Als een element in de paginacode een id-attribuut krijgt, kan het element worden gevonden op id. Dit is de gemakkelijkste manier. Er wordt naar het element gezocht met de methode getElementById() van het globale documentobject.

document.getElementById(id)

Parameters:

id - id van het te vinden element. id is een string, dus het moet tussen aanhalingstekens staan.

Laten we een pagina maken, er een element aan toevoegen en het een id geven, en dit element in het script zoeken:

HTML-code:

JavaScript:

var block = document.getElementById("blok"); console.log(blok);

We hebben het gevonden element aan de blokvariabele toegewezen en de variabele naar de console uitgevoerd. Open uw browserconsole, het element zou daar moeten worden vermeld.

Omdat zoeken op ID de eenvoudigste en handigste methode is, wordt deze vaak gebruikt. Als er in een script met een bepaald element moet worden gewerkt, wordt het id-attribuut in de paginacode op dit element ingesteld, zelfs als dit nog niet eerder is ingesteld. En ze vinden het element op id.

Zoek op klasse

Met de methode getElementsByClassName() kunt u alle elementen vinden die tot een bepaalde klasse behoren.

document.getElementsByClassName(klasse)

Parameters:

klasse - klasse van te vinden elementen

De methode retourneert een pseudo-array met de gevonden elementen. Het wordt een pseudo-array genoemd omdat veel arraymethoden er niet voor werken. Maar de belangrijkste eigenschap blijft: u hebt toegang tot elk element van de array. Zelfs als er maar één element wordt gevonden, bevindt het zich nog steeds in de array.

Laten we elementen aan de pagina toevoegen en ze een klasse geven. We zullen enkele elementen in het blok plaatsen dat we eerder hebben gemaakt. Het andere deel maken we buiten het blok. De betekenis hiervan zal iets later duidelijk worden. Nu ziet de pagina er als volgt uit:

HTML-code:

JavaScript:

Nu worden alleen de elementen gevonden die zich in het blok bevinden.

Zoek op label

De methode getElementsByTagName() vindt alle elementen met een specifieke tag. Het retourneert ook een pseudo-array met de gevonden elementen.

document.getElementsByTagName(tag)

Parameters:

tag - tag van de te vinden elementen

Laten we alle p-tags zoeken die op de pagina staan:

var p = document.getElementsByTagName("p"); console.log(p);

Deze methode kan ook niet op het hele document worden toegepast, maar op een specifiek element. Zoek alle p-tags in het blok.

Zoek op selector

Er zijn querySelector() en querySelectorAll() methoden die elementen vinden die overeenkomen met een specifieke selector. Dat wil zeggen dat er elementen zullen worden gevonden waarop de stijl zou worden toegepast als deze op een dergelijke selector zou worden gespecificeerd. Tegelijkertijd is de aanwezigheid van een dergelijke selector in het pagina-opmaakprofiel helemaal niet nodig. Deze methoden hebben niets met CSS te maken. De methode querySelectorAll() vindt alle elementen die overeenkomen met de selector. En de methode querySelector() vindt één element, het eerste in de paginacode. Deze methoden kunnen alle eerder besproken methoden voor het zoeken naar elementen vervangen, omdat er een selector op id, een selector op tag en vele andere is.

document.querySelector(selector)

document.querySelectorAll(selector)

Selectors zijn precies hetzelfde geschreven als in CSS, vergeet alleen niet om aanhalingstekens te plaatsen.

Laten we een lijst aan de pagina toevoegen en deze vinden met behulp van de selector. We zijn op zoek naar slechts één element en we weten zeker dat dit het eerste zal zijn, omdat er maar één op de pagina staat. Daarom is het in dit geval handiger om de methode querySelector() te gebruiken. Maar wanneer u deze methode gebruikt, moet u er rekening mee houden dat dezelfde elementen in de toekomst aan de pagina kunnen worden toegevoegd. Dit geldt echter voor de meeste methoden.

HTML-code:

Deze methoden kunnen ook zoeken naar elementen niet in het hele document, maar binnen een specifiek element.

In het voorbeeld hebben we alleen tagkiezers gebruikt. Probeer pagina-elementen te vinden met andere selectors.

Aangrenzende elementen

U kunt buren zoeken voor het gevonden element. Elk element is een object en aangrenzende elementen zijn toegankelijk via de eigenschappen van dat object. De eigenschap previousElementSibling bevat het vorige element, en de eigenschap nextElementSibling bevat het volgende element.

element.previousElementSibling

element.nextElementSibling

Laten we het element vinden dat volgt op het blok:

Onderliggende elementen

De kindereigenschap bevat een scala aan kinderen.

element.kinderen

Laten we de onderliggende elementen van het blok zoeken.