സ്ക്രിപ്റ്റിംഗ് ഭാഷകളിലെ പ്രോഗ്രാമിംഗിൽ, ഇടയ്ക്കിടെ ഒരു താൽക്കാലികമായി നിർത്തേണ്ടത് ആവശ്യമാണ് - പ്രോഗ്രാമിൻ്റെ നിർവ്വഹണം കുറച്ച് സമയത്തേക്ക് താൽക്കാലികമായി നിർത്തുക, തുടർന്ന് ജോലി തുടരുക. ഉദാഹരണത്തിന്, VBS, PHP സ്ക്രിപ്റ്റുകളിൽ ഇനിപ്പറയുന്ന രീതികൾ സാധ്യമാണ്:

VBS: wscript.sleep 1500 (1.5 സെക്കൻഡ് നിർത്തുക)

PHP: ഉറക്കം (10); (10 സെക്കൻഡ് നിർത്തുക)

അത്തരം ഇടവേളകളിൽ, റൺടൈം സിസ്റ്റം (PHP അല്ലെങ്കിൽ VBS) ഒന്നും ചെയ്യാതെ. Javascript-ൽ സമാനമായ എന്തെങ്കിലും അവബോധപൂർവ്വം ഉപയോഗിക്കാൻ ശ്രമിക്കുന്ന ഒരു ഡവലപ്പർ അരോചകമായി ആശ്ചര്യപ്പെടും. Javascript-ൽ ഒരു താൽക്കാലികമായി നിർത്താൻ ശ്രമിക്കുമ്പോൾ ഒരു സാധാരണ പിശക് ഇതുപോലെ കാണപ്പെടുന്നു:

ഫംഗ്‌ഷൻ ബാഡ്‌ടെസ്റ്റ്() ( (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

ലൂപ്പിൻ്റെ സമയത്ത്, അടുത്ത നമ്പർ വരയ്ക്കുന്നതിനുള്ള ഊഴം വരുമ്പോൾ, നിങ്ങളുടെ setTimeout സത്യസന്ധമായി ജാവാസ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുന്നത് നിർത്തും, 0.9 സെക്കൻഡ് കാത്തിരിക്കുക, ഇൻപുട്ട് ഫീൽഡിൻ്റെ അവസാനം ആവശ്യമുള്ള നമ്പർ ചേർക്കുകയും തുടർന്ന് ജോലി തുടരുകയും ചെയ്യും. എന്നാൽ വാസ്തവത്തിൽ ഇത് ശരിയല്ല: ജാവാസ്ക്രിപ്റ്റിലെ setInterval, setTimeout എന്നിവ പരാൻതീസിസിൽ വ്യക്തമാക്കിയ പ്രവർത്തനത്തിൻ്റെ (അല്ലെങ്കിൽ ഫംഗ്ഷൻ) നിർവ്വഹണം വൈകിപ്പിക്കുന്നു. ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ഇനിപ്പറയുന്നവ സംഭവിക്കും:

i = 1;

ഇൻപുട്ട് ഫീൽഡിലേക്ക് "1" നമ്പർ ചേർക്കുന്നത് 0.9 സെക്കൻഡ് വൈകിപ്പിക്കുക;

ഈ പ്രശ്നം സജ്ജീകരിച്ചതിന് ശേഷം, സൈക്കിൾ തുടരുന്നു: i=2;

ഇൻപുട്ട് ഫീൽഡിലേക്ക് "2" നമ്പർ ചേർക്കുന്നത് 0.9 സെക്കൻഡ് വൈകിപ്പിക്കുക;

ഉടനടി അർത്ഥമാക്കുന്നത്, ഉദാഹരണത്തിന്, 1 എംഎസ് (അതായത്, 900 എംഎസുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അനുപാതമില്ലാതെ ചെറുതാണ്): ലൂപ്പ് അതിൻ്റെ ജോലി ഏതാണ്ട് തൽക്ഷണം ചെയ്യും, ഒരേ സമയം നിരവധി മാറ്റിവച്ച ജോലികൾ സൃഷ്ടിക്കും. ഇതിനർത്ഥം, തീർപ്പുകൽപ്പിക്കാത്ത എല്ലാ "ഡ്രോയിംഗ്" ജോലികളും ഏതാണ്ട് ഒരേ സമയം, പുതിയ സംഖ്യകൾ ചേർക്കുന്നതിന് ഇടയിൽ താൽക്കാലികമായി നിർത്താതെ പൂർത്തിയാകുമെന്നാണ്. ചക്രം ആരംഭിക്കുന്നു; എല്ലാം 0.9 സെക്കൻഡിനുള്ളിൽ മരവിക്കുന്നു; ഒപ്പം shirr - എല്ലാ നമ്പറുകളും ഒന്നിനുപുറകെ ഒന്നായി ഒരു വരിയിൽ ചിത്രീകരിച്ചിരിക്കുന്നു.

അത്തരമൊരു സാഹചര്യത്തിൽ setTimeout എങ്ങനെ ശരിയായി പ്രയോഗിക്കാം? ഇത് സങ്കീർണ്ണമാണ്. നിങ്ങൾ ഫംഗ്‌ഷനെ വിളിക്കേണ്ടതുണ്ട് ആവർത്തനപരമായി(ഫംഗ്‌ഷനിൽ നിന്ന് ഒരേ ഫംഗ്‌ഷൻ), ഈ പ്രക്രിയ അനന്തമാകാതിരിക്കാൻ, ഒരു സ്റ്റോപ്പിംഗ് അവസ്ഥ സജ്ജമാക്കുക (ഉദാഹരണത്തിന്, അച്ചടിക്കേണ്ട സംഖ്യയുടെ വലുപ്പം):

ഫംഗ്ഷൻ വെൽടെസ്റ്റ്() ( എങ്കിൽ (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

കൂടാതെ വേരിയബിൾ i ഫംഗ്‌ഷന് പുറത്ത് ആരംഭിക്കേണ്ടതുണ്ട് - ഉദാഹരണത്തിന്, ഇതുപോലെ:

ഇപ്പോൾ എല്ലാം ശരിയായി പ്രവർത്തിക്കുന്നു (ഞങ്ങൾ കാലതാമസ സമയം 0.9 സെക്കൻഡിൽ നിന്ന് 0.4 സെക്കൻഡായി കുറച്ചു). എന്നാൽ അത്തരം ജോലികൾക്കായി, setTimeout-നേക്കാൾ setInterval ഉപയോഗിക്കുന്നത് കൂടുതൽ യുക്തിസഹമാണ് (ഇതിന് രണ്ട് ഫംഗ്ഷനുകൾ ആവശ്യമാണെങ്കിലും):

ഫംഗ്ഷൻ besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) ഫംഗ്ഷൻ ഡ്രോ() (document.getElementById("test3").value += ++i if (i >= 9) clearInterval(window.timer1) )

Javascirpt setInterval രീതിയുടെ പ്രത്യേകത അത് "സ്വയം" കടന്നുപോകുന്നില്ല എന്നതാണ്; ഇത് ഒരു പ്രത്യേക ക്ലിയർഇൻ്റർവൽ രീതി ഉപയോഗിച്ച് നിർത്തണം. എന്താണ് നിർത്തേണ്ടതെന്ന് വ്യക്തമാക്കുന്നതിന്, മാറ്റിവച്ച പ്രവർത്തനത്തിനുള്ള ടാസ്‌ക്കിന് ഒരു പ്രത്യേക ഐഡൻ്റിഫയർ നൽകിയിട്ടുണ്ട് - ഒരു ടൈമർ: window.timer1 = window.setInterval(...) .

setTimeout രീതി ഉപയോഗിച്ച് സൃഷ്‌ടിച്ച ടാസ്‌ക്കുകൾക്കും ഐഡൻ്റിഫയറുകൾ നൽകാം. എല്ലാ ടൈമർ ഐഡികളും പരസ്പരം വ്യത്യസ്‌തമായിരിക്കണം (നിലവിലെ ബ്രൗസർ വിൻഡോയിൽ തനത്). തുടർന്ന് നിങ്ങൾക്ക് വിൻഡോയിൽ മാറ്റിവച്ച പ്രവർത്തനങ്ങൾ ഉപയോഗിക്കുന്ന നിരവധി വ്യത്യസ്ത ടാസ്ക്കുകൾ സൃഷ്ടിക്കാൻ കഴിയും, കൂടാതെ ഈ ടാസ്ക്കുകൾ സമാന്തരമായി നടപ്പിലാക്കും (ഒരേസമയം, കമ്പ്യൂട്ടറിന് മതിയായ ഉറവിടങ്ങൾ ഉണ്ടെങ്കിൽ), ഇത് അടിസ്ഥാനപരമായി PHP അല്ലെങ്കിൽ VBS-ൽ അസാധ്യമാണ്.

ഒരേസമയം നിരവധി Javascript ടൈമറുകൾ പ്രവർത്തിക്കുന്ന ഒരു പേജിൻ്റെ ഉദാഹരണം ഇതാ: setinterval.htm(Javascript ഫംഗ്‌ഷനുകൾ ഫയലിൽ setinterval.js). Esc കീ ഉപയോഗിച്ച് എല്ലാ പേജ് ടൈമറുകളും (മെനു ഒഴികെ) നിർത്താം. എല്ലാ ഉദാഹരണ ടൈമറുകളും ഒരു "സ്വാഭാവിക" (അമൂർത്തമായ i++ അല്ല) കൗണ്ട്ഡൗൺ അടിസ്ഥാനമാക്കിയുള്ളതാണ് - സമയം അല്ലെങ്കിൽ ദൂരം. എല്ലാ "ഘടികാരങ്ങളും" പ്രത്യേകമായി സമന്വയിപ്പിച്ചിരിക്കുന്നു (വ്യക്തതയ്ക്കായി). "സൂചിക"യിലും ഡ്രോപ്പ്-ഡൌൺ ("പുൾ-ഔട്ട്") മെനുവിലും ദൂരത്തെ ആശ്രയിക്കുന്ന ടൈമറുകൾ ഉപയോഗിക്കുന്നു.

ഡ്രോപ്പ് ഡൗൺ മെനു

ഞങ്ങളുടെ സ്ലൈഡിംഗ് മെനു യഥാർത്ഥത്തിൽ സ്ലൈഡുചെയ്യുന്നു ("തലക്കെട്ടിന്" കീഴിൽ നിന്ന്): ഘടകങ്ങൾക്കിടയിൽ വിടവുകൾ പ്രത്യേകം അവശേഷിക്കുന്നു, അതുവഴി അത് എങ്ങനെ സ്ലൈഡുചെയ്യുന്നുവെന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും. അപ്രതീക്ഷിതമായി, വ്യത്യസ്‌ത ദൈർഘ്യമുള്ള ലിസ്‌റ്റുകൾക്ക് എക്‌സിറ്റ് തുല്യമായി സുഗമമാക്കാൻ ഞങ്ങൾക്ക് കഴിഞ്ഞില്ല - ഒരുപക്ഷേ കമ്പ്യൂട്ടറിൻ്റെ കുറഞ്ഞ പ്രകടനം (AMD Athlon 999 MHz) കാരണം.

സൗന്ദര്യത്തിനും ഐക്യത്തിനും വ്യത്യസ്ത മെനു ഇനങ്ങളുടെ ലിസ്റ്റുകൾ ഒരേ സമയം ദൃശ്യമാകേണ്ടത് ആവശ്യമാണെന്ന് വ്യക്തമാണ്. അതായത്, ദൈർഘ്യമേറിയ ലിസ്റ്റുകൾ ഉയർന്ന വേഗതയിലും ചെറിയവ കുറഞ്ഞ വേഗതയിലും ഉപേക്ഷിക്കണം. ഇത് ഇതുപോലെ നടപ്പിലാക്കാൻ കഴിയുമെന്ന് തോന്നുന്നു:

ഞങ്ങൾ മൊത്തം "പുറപ്പെടൽ" സമയം സജ്ജമാക്കി, ഉദാഹരണത്തിന്, 200 ms.

ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റിന് 20 px ഉയരമുണ്ടെങ്കിൽ, 10 ms ഇടവേളയിൽ ഒരു പിക്സൽ താഴേക്ക് നീക്കാൻ കഴിയുമെന്നത് വ്യക്തമാണ് - തുടർന്ന് 200 ms-ൽ മുഴുവൻ ലിസ്റ്റും പുറത്തുവരും.

ഡ്രോപ്പ്‌ഡൗൺ 40px ഉയർന്നതാണെങ്കിൽ, അതേ സമയം ഉൾക്കൊള്ളാൻ ഓരോ 5 മി.സിയിലും ഒരു പിക്സൽ താഴേക്ക് നീക്കേണ്ടതുണ്ട്.

ഈ ലോജിക് അനുസരിച്ച്, ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് 200px ഉയർന്നതാണെങ്കിൽ, ഓരോ 1ms ഇടയിലും ഒരു പിക്സൽ താഴേക്ക് നീക്കണം. എന്നാൽ അത്തരം വേഗത ഞങ്ങളുടെ കമ്പ്യൂട്ടറിൽ പ്രവർത്തിക്കില്ല - ഒരു മില്ലിസെക്കൻഡിൽ ലിസ്റ്റിൻ്റെ പുതിയ സ്ഥാനം വരയ്ക്കാൻ ബ്രൗസറിന് സമയമില്ല. അതെ. Javascript കണക്കാക്കാൻ നിയന്ത്രിക്കുന്നു (എന്താണ് കണക്കാക്കേണ്ടത്?), എന്നാൽ ബ്രൗസറിന് (ഫയർഫോക്സ്) പ്രദർശിപ്പിക്കാൻ സമയമില്ല. വെബിനുള്ള സാധാരണ സാഹചര്യം.

അതിനാൽ, ഊന്നുവടികളുടെ സഹായത്തോടെ മാത്രം മെനുവിൽ നിന്ന് പുറത്തുപോകുന്ന സമയം കൂടുതലോ കുറവോ തുല്യമാക്കാൻ കഴിയും, വേഗതയേറിയ കമ്പ്യൂട്ടറിൽ ഇത് എങ്ങനെ പ്രവർത്തിക്കുമെന്ന് ഇപ്പോഴും വ്യക്തമല്ല. എന്നാൽ ഏറ്റവും മന്ദഗതിയിലുള്ള ഒന്നിനെ നാം കണക്കാക്കണം, അല്ലേ? അൽഗോരിതം (കമ്പ്യൂട്ടറിൻ്റെ വേഗത കണക്കിലെടുക്കാതെ) ഇതുപോലൊന്ന് മാറുന്നു:

ലിസ്റ്റ് പരിശോധിക്കുന്നതിനുള്ള മൊത്തം സമയം സജ്ജമാക്കുക: സമയം = 224 (മി.സെ.).

സൈക്കിളിൽ ഒരു ഇടവേളയ്ക്കുള്ള ഏറ്റവും കുറഞ്ഞ സമയം ഞങ്ങൾ സജ്ജമാക്കി: കാലതാമസം = 3 (മി.എസ്).

ലിസ്റ്റ് നീക്കുന്നതിനുള്ള ഏറ്റവും കുറഞ്ഞ ഘട്ടം സജ്ജമാക്കുക: ഓഫ്സെറ്റ് = 1 (px).

ലിസ്റ്റിൻ്റെ ഉയരം അനുസരിച്ച് ഞങ്ങൾ ഇതെല്ലാം മാറ്റുന്നു: 1) കാലതാമസം (ഇടവേള) സമയം ഉയരത്തിന് വിപരീത അനുപാതത്തിലും മൊത്തം സമയ സമയത്തിന് നേരിട്ട് ആനുപാതികമായും വർദ്ധിപ്പിക്കുക (224 ഉയരത്തിൽ ഗുണകം 1 ആണ്); 2) ഉയരം 40 px-ൽ കൂടുതലാണെങ്കിൽ, ഉയരത്തിന് ആനുപാതികമായി ഏറ്റവും കുറഞ്ഞ ഘട്ടം വർദ്ധിപ്പിക്കുക. വേഗത കുറഞ്ഞ കമ്പ്യൂട്ടറിനായി സ്ഥിരമായ "40" പരീക്ഷണാത്മകമായി ലഭിച്ചു. പെൻ്റിയം 4 സിപിയു 2.53GHz കമ്പ്യൂട്ടറിലെ പരിശോധനകൾ അതേ നമ്പർ വെളിപ്പെടുത്തി - 40. അല്ലെങ്കിൽ, ടൈമറുകൾ ക്രമം തെറ്റി, ലിസ്റ്റുകൾ ക്രമം തെറ്റി.

ഇപ്പോൾ ലിസ്റ്റുകൾ ഏറെക്കുറെ പുറത്തുവരുന്നുണ്ട്. കൂടുതലോ കുറവോ സമാനമായ സമയത്തേക്ക്. പേജിൽ setinterval.htm.

ഇതാ ബ്രൂസ് വരുന്നു:

ഫംഗ്‌ഷൻ സ്ലൈഡ്_ഡോ(obj, മാക്‌സ്‌ടോപ്പ്, ഓഫ്‌സെറ്റ്) ( എങ്കിൽ (getTopLeft(obj).top< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }

മെനുവിൽ നിന്ന് നെസ്റ്റഡ് ലിസ്റ്റുകൾ പുറത്തേക്ക് തള്ളുന്ന പ്രവർത്തനം തന്നെ, നമുക്ക് കാണാൻ കഴിയുന്നത് പോലെ, വളരെ ലളിതമാണ്. ഇതുപോലൊരു വരി ഉപയോഗിച്ച് ഇത് പ്രവർത്തിപ്പിക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത്:

Ts.timer1 = setInterval(function())(slide_do(ts, maxtop, offset)), കാലതാമസം)

ശരി, ആരംഭിക്കുന്നതിന് മുമ്പ്, ഈ മാക്‌സ്‌ടോപ്പും ഓഫ്‌സെറ്റും കണക്കാക്കുക, കൂടാതെ ലിസ്റ്റ് മിൻടോപ്പ് സ്ഥാനത്ത് സ്ഥാപിക്കുക. 40 വരികളുടെ "പ്രാഥമിക" സ്ലൈഡ് () ഫംഗ്ഷൻ ചെയ്യുന്നത് ഇതാണ്. എല്ലാം ഒരുമിച്ച് - ഒരു ഫയലിൽ setinterval.js. അതെ, ഉൾപ്പെടുത്തിയ സ്റ്റൈൽ ഫയൽ ഇല്ലാതെ ഈ ക്രാപ്പ് പ്രവർത്തിക്കില്ല

നിർദ്ദിഷ്ട സെലക്ടറുമായി അല്ലെങ്കിൽ സെലക്ടർമാരുടെ ഗ്രൂപ്പുമായി പൊരുത്തപ്പെടുന്ന പ്രമാണത്തിനുള്ളിൽ. പൊരുത്തങ്ങളൊന്നും കണ്ടെത്തിയില്ലെങ്കിൽ, null തിരികെ നൽകും.

കുറിപ്പ്: ഡോക്യുമെൻ്റിൻ്റെ മാർക്ക്അപ്പിലെ ആദ്യ ഘടകത്തിൽ നിന്ന് ആരംഭിച്ച് ചൈൽഡ് നോഡുകളുടെ എണ്ണത്തിൻ്റെ ക്രമപ്രകാരം തുടർച്ചയായ നോഡുകളിലൂടെ ആവർത്തിക്കുന്ന ഡോക്യുമെൻ്റിൻ്റെ നോഡുകളുടെ ഡെപ്ത്-ഫസ്റ്റ് പ്രീ-ഓർഡർ ട്രാവേസൽ ഉപയോഗിച്ചാണ് പൊരുത്തപ്പെടുത്തൽ നടത്തുന്നത്.

വാക്യഘടന ഘടകം = document.querySelector(selectors); പാരാമീറ്ററുകൾ സെലക്ടർമാർ എ DOMStringപൊരുത്തപ്പെടുത്തുന്നതിന് ഒന്നോ അതിലധികമോ സെലക്ടറുകൾ അടങ്ങിയിരിക്കുന്നു. ഈ സ്ട്രിംഗ് സാധുവായ ഒരു CSS സെലക്ടർ സ്ട്രിംഗ് ആയിരിക്കണം; ഇല്ലെങ്കിൽ, ഒരു SYNTAX_ERR ഒഴിവാക്കൽ എറിയുന്നു. കാണുക സെലക്ടറുകൾ ഉപയോഗിച്ച് DOM ഘടകങ്ങൾ കണ്ടെത്തുന്നുസെലക്ടർമാരെ കുറിച്ചും അവരെ എങ്ങനെ മാനേജ് ചെയ്യാം എന്നതിനെ കുറിച്ചും കൂടുതൽ അറിയാൻ.

ശ്രദ്ധിക്കുക: സാധാരണ CSS വാക്യഘടനയുടെ ഭാഗമല്ലാത്ത പ്രതീകങ്ങൾ ഒരു ബാക്ക്സ്ലാഷ് പ്രതീകം ഉപയോഗിച്ച് ഒഴിവാക്കണം. JavaScript ബാക്ക്സ്ലാഷ് എസ്കേപ്പിംഗും ഉപയോഗിക്കുന്നതിനാൽ, ഈ പ്രതീകങ്ങൾ ഉപയോഗിച്ച് സ്ട്രിംഗ് ലിറ്ററലുകൾ എഴുതുമ്പോൾ പ്രത്യേകം ശ്രദ്ധിക്കുക. കൂടുതൽ വിവരങ്ങൾക്ക് കാണുക.

റിട്ടേൺ മൂല്യം ഒഴിവാക്കലുകൾ SYNTAX_ERR നിർദ്ദിഷ്ട സെലക്ടറുകളുടെ വാക്യഘടന അസാധുവാണ്. ഉപയോഗ കുറിപ്പുകൾ

ഡോക്യുമെൻ്റിൽ ഒന്നിലധികം തവണ തെറ്റായി ഉപയോഗിക്കുന്ന ഒരു ഐഡിയുമായി നിർദ്ദിഷ്ട സെലക്ടർ പൊരുത്തപ്പെടുന്നുവെങ്കിൽ, ആ ഐഡിയുള്ള ആദ്യ ഘടകം തിരികെ നൽകും.

പ്രത്യേക കഥാപാത്രങ്ങളിൽ നിന്ന് രക്ഷപ്പെടുന്നു

സ്റ്റാൻഡേർഡ് CSS വാക്യഘടന പാലിക്കാത്ത ഒരു ഐഡിയുമായോ സെലക്ടറുമായോ പൊരുത്തപ്പെടുന്നതിന് (ഉദാഹരണത്തിന്, ഒരു കോളനോ സ്‌പെയ്‌സോ അനുചിതമായി ഉപയോഗിക്കുന്നതിലൂടെ), നിങ്ങൾ ഒരു ബാക്ക്‌സ്ലാഷ് (" \ ") ഉപയോഗിച്ച് പ്രതീകത്തിൽ നിന്ന് രക്ഷപ്പെടണം. JavaScript-ൽ ബാക്ക്‌സ്ലാഷ് ഒരു രക്ഷപ്പെടൽ പ്രതീകം കൂടിയായതിനാൽ, നിങ്ങൾ ഒരു അക്ഷരീയ സ്ട്രിംഗിൽ പ്രവേശിക്കുകയാണെങ്കിൽ, നിങ്ങൾ അതിൽ നിന്ന് രക്ഷപ്പെടണം. രണ്ടുതവണ(ഒരു തവണ JavaScript സ്‌ട്രിങ്ങിനായി, മറ്റൊരു തവണ querySelector()):

console.log("#foo\bar"); // "#fooar" (\b എന്നത് ബാക്ക്‌സ്‌പേസ് നിയന്ത്രണ പ്രതീകമാണ്) document.querySelector("#foo\bar"); // console.log("#foo\\bar") ഒന്നും പൊരുത്തപ്പെടുന്നില്ല; // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // ആദ്യത്തെ div document.querySelector ("#foo:bar") പൊരുത്തപ്പെടുത്തുക; // ഡോക്യുമെൻ്റുമായി പൊരുത്തപ്പെടുന്നില്ല.querySelector("#foo\\:bar"); // രണ്ടാമത്തെ ഡിവിയുമായി പൊരുത്തപ്പെടുത്തുക

ഒരു ക്ലാസുമായി പൊരുത്തപ്പെടുന്ന ആദ്യ ഘടകം കണ്ടെത്തുന്നതിനുള്ള ഉദാഹരണങ്ങൾ

ഈ ഉദാഹരണത്തിൽ, " myclass " എന്ന ക്ലാസുള്ള പ്രമാണത്തിലെ ആദ്യ ഘടകം തിരികെ നൽകുന്നു:

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

കൂടുതൽ സങ്കീർണ്ണമായ സെലക്ടർ

ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ സെലക്ടർമാരും ശരിക്കും ശക്തരായിരിക്കും. ഇവിടെ, ആദ്യത്തേത് "ലോഗിൻ" () എന്ന പേരുള്ള ഘടകം a ഉള്ളിൽ സ്ഥിതിചെയ്യുന്നു ഡോക്യുമെൻ്റിലെ "ഉപയോക്തൃ-പാനൽ മെയിൻ" () എന്ന ക്ലാസ് തിരികെ നൽകുന്നു:

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

സ്പെസിഫിക്കേഷനുകൾ സ്പെസിഫിക്കേഷൻ സ്റ്റാറ്റസ് അഭിപ്രായം

DOM ആ സ്പെസിഫിക്കേഷനിൽ "document.querySelector()" എന്നതിൻ്റെ നിർവചനം.	ജീവിത നിലവാരം

ബ്രൗസർ അനുയോജ്യത

ഘടനാപരമായ ഡാറ്റയിൽ നിന്നാണ് ഈ പേജിലെ അനുയോജ്യതാ പട്ടിക സൃഷ്ടിച്ചിരിക്കുന്നത്. നിങ്ങൾ ഡാറ്റയിലേക്ക് സംഭാവന ചെയ്യാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ദയവായി https://github.com/mdn/browser-compat-data പരിശോധിച്ച് ഞങ്ങൾക്ക് ഒരു പുൾ അഭ്യർത്ഥന അയയ്ക്കുക.

GitHub-ലെ അനുയോജ്യത ഡാറ്റ അപ്‌ഡേറ്റ് ചെയ്യുക

ഡെസ്ക്ടോപ്പ് മൊബൈൽക്രോം എഡ്ജ് ഫയർഫോക്സ് ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ ഓപ്പറ സഫാരി ആൻഡ്രോയിഡ് വെബ്‌വ്യൂ ആൻഡ്രോയിഡിനുള്ള ക്രോം ഫയർഫോക്സിനുള്ള ആൻഡ്രോയിഡ് ഓപ്പറ ആൻഡ്രോയിഡ് സഫാരി ഐഒഎസ് സാംസങ് ഇൻ്റർനെറ്റിൽquerySelector

Chrome പൂർണ്ണ പിന്തുണ 1	എഡ്ജ് പൂർണ്ണ പിന്തുണ 12	ഫയർഫോക്സ് പൂർണ്ണ പിന്തുണ 3.5	IE പൂർണ്ണ പിന്തുണ 8	ഓപ്പറ പൂർണ്ണ പിന്തുണ 10	സഫാരി പൂർണ്ണ പിന്തുണ 3.2	WebView ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ അതെ	Chrome Android പൂർണ്ണ പിന്തുണ അതെ	Firefox ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ അതെ	ഓപ്പറ ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ 10.1	Safari iOS പൂർണ്ണ പിന്തുണ 3.2	സാംസങ് ഇൻ്റർനെറ്റ് ആൻഡ്രോയിഡ്?

ലെജൻഡ് പൂർണ്ണ പിന്തുണ പൂർണ്ണ പിന്തുണ അനുയോജ്യത അജ്ഞാതം അനുയോജ്യത അജ്ഞാതമാണ്

സ്ക്രിപ്റ്റ് ഏതെങ്കിലും പേജ് ഘടകവുമായി പ്രവർത്തിക്കുന്നതിന്, ഈ ഘടകം ആദ്യം കണ്ടെത്തേണ്ടതുണ്ട്. ജാവാസ്ക്രിപ്റ്റിൽ ഇത് ചെയ്യുന്നതിന് നിരവധി മാർഗങ്ങളുണ്ട്. കണ്ടെത്തിയ ഘടകം സാധാരണയായി ഒരു വേരിയബിളിലേക്ക് നിയോഗിക്കപ്പെടുന്നു, തുടർന്ന്, ഈ വേരിയബിളിലൂടെ, സ്ക്രിപ്റ്റ് മൂലകത്തിലേക്ക് പ്രവേശിക്കുകയും അത് ഉപയോഗിച്ച് ചില പ്രവർത്തനങ്ങൾ നടത്തുകയും ചെയ്യുന്നു.

ഐഡി പ്രകാരം തിരയുക

പേജ് കോഡിൽ ഒരു ഘടകത്തിന് ഒരു ഐഡി ആട്രിബ്യൂട്ട് നൽകിയിട്ടുണ്ടെങ്കിൽ, ആ ഘടകം ഐഡി ഉപയോഗിച്ച് കണ്ടെത്താനാകും. ഇതാണ് ഏറ്റവും എളുപ്പമുള്ള വഴി. ആഗോള ഡോക്യുമെൻ്റ് ഒബ്‌ജക്റ്റിൻ്റെ getElementById() രീതി ഉപയോഗിച്ചാണ് ഘടകം തിരയുന്നത്.

document.getElementById(id)

ഓപ്ഷനുകൾ:

ഐഡി - കണ്ടെത്തേണ്ട മൂലകത്തിൻ്റെ ഐഡി. ഐഡി ഒരു സ്ട്രിംഗ് ആണ്, അതിനാൽ അത് ഉദ്ധരണികളിലായിരിക്കണം.

നമുക്ക് ഒരു പേജ് സൃഷ്‌ടിക്കാം, അതിൽ ഒരു ഘടകം ചേർക്കുകയും അതിന് ഒരു ഐഡി നൽകുകയും ചെയ്യാം, കൂടാതെ സ്ക്രിപ്റ്റിൽ ഈ ഘടകം കണ്ടെത്താം:

HTML കോഡ്:

JavaScript:

var ബ്ലോക്ക് = document.getElementById("ബ്ലോക്ക്"); console.log(ബ്ലോക്ക്);

ഞങ്ങൾ കണ്ടെത്തിയ ഘടകം ബ്ലോക്ക് വേരിയബിളിലേക്ക് നൽകി, വേരിയബിൾ കൺസോളിലേക്ക് ഔട്ട്പുട്ട് ചെയ്യുന്നു. നിങ്ങളുടെ ബ്രൗസർ കൺസോൾ തുറക്കുക, ഘടകം അവിടെ ലിസ്റ്റ് ചെയ്തിരിക്കണം.

ഐഡി ഉപയോഗിച്ച് തിരയുന്നത് ഏറ്റവും ലളിതവും സൗകര്യപ്രദവുമായ രീതിയായതിനാൽ, ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. ഒരു സ്‌ക്രിപ്റ്റിൽ ചില ഘടകവുമായി പ്രവർത്തിക്കേണ്ടതുണ്ടെങ്കിൽ, മുമ്പ് സജ്ജീകരിച്ചിട്ടില്ലെങ്കിലും, പേജ് കോഡിലെ ഈ ഘടകത്തിലേക്ക് ഐഡി ആട്രിബ്യൂട്ട് സജ്ജീകരിച്ചിരിക്കുന്നു. ഐഡി ഉപയോഗിച്ച് അവർ മൂലകം കണ്ടെത്തുന്നു.

ക്ലാസ് പ്രകാരം തിരയുക

getElementsByClassName() രീതി ഒരു പ്രത്യേക ക്ലാസിൽ പെട്ട എല്ലാ ഘടകങ്ങളും കണ്ടെത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു.

document.getElementsByClassName(ക്ലാസ്)

ഓപ്ഷനുകൾ:

ക്ലാസ് - കണ്ടെത്തേണ്ട ഘടകങ്ങളുടെ ക്ലാസ്

കണ്ടെത്തിയ മൂലകങ്ങൾ അടങ്ങുന്ന ഒരു വ്യാജ-അറേ ഈ രീതി നൽകുന്നു. പല അറേ രീതികളും ഇതിന് പ്രവർത്തിക്കാത്തതിനാൽ ഇതിനെ ഒരു വ്യാജ-അറേ എന്ന് വിളിക്കുന്നു. എന്നാൽ പ്രധാന പ്രോപ്പർട്ടി അവശേഷിക്കുന്നു - നിങ്ങൾക്ക് അറേയുടെ ഏത് ഘടകവും ആക്സസ് ചെയ്യാൻ കഴിയും. ഒരു ഘടകം മാത്രം കണ്ടെത്തിയാൽ പോലും, അത് അറേയിൽ തന്നെയുണ്ട്.

നമുക്ക് പേജിലേക്ക് ഘടകങ്ങൾ ചേർക്കുകയും അവർക്ക് ഒരു ക്ലാസ് നൽകുകയും ചെയ്യാം. ഞങ്ങൾ നേരത്തെ സൃഷ്ടിച്ച ബ്ലോക്കിനുള്ളിൽ ചില ഘടകങ്ങൾ സ്ഥാപിക്കും. ബ്ലോക്കിന് പുറത്ത് ഞങ്ങൾ മറ്റൊരു ഭാഗം സൃഷ്ടിക്കും. ഇതിൻ്റെ അർത്ഥം കുറച്ച് കഴിഞ്ഞ് വ്യക്തമാകും. ഇപ്പോൾ പേജ് ഇതുപോലെ കാണപ്പെടും:

HTML കോഡ്:

JavaScript:

ഇപ്പോൾ ബ്ലോക്കിൽ സ്ഥിതി ചെയ്യുന്ന ഘടകങ്ങൾ മാത്രമേ കണ്ടെത്തിയിട്ടുള്ളൂ.

ടാഗ് ഉപയോഗിച്ച് തിരയുക

getElementsByTagName() രീതി ഒരു പ്രത്യേക ടാഗ് ഉള്ള എല്ലാ ഘടകങ്ങളും കണ്ടെത്തുന്നു. കണ്ടെത്തിയ മൂലകങ്ങളുള്ള ഒരു വ്യാജ-അറേയും ഇത് നൽകുന്നു.

document.getElementsByTagName(ടാഗ്)

ഓപ്ഷനുകൾ:

ടാഗ് - കണ്ടെത്തേണ്ട മൂലകങ്ങളുടെ ടാഗ്

പേജിലുള്ള എല്ലാ p ടാഗുകളും നമുക്ക് കണ്ടെത്താം:

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

ഈ രീതി മുഴുവൻ പ്രമാണത്തിലല്ല, ഒരു പ്രത്യേക ഘടകത്തിലേക്കാണ് പ്രയോഗിക്കാൻ കഴിയുക. ബ്ലോക്കിലെ എല്ലാ പി ടാഗുകളും കണ്ടെത്തുക.

സെലക്ടർ പ്രകാരം തിരയുക

ഒരു നിർദ്ദിഷ്ട സെലക്ടറുമായി പൊരുത്തപ്പെടുന്ന ഘടകങ്ങൾ കണ്ടെത്തുന്ന querySelector() ഉം querySelectorAll() രീതികളും ഉണ്ട്. അതായത്, അത്തരത്തിലുള്ള ഒരു സെലക്‌ടറിന് അത് വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ ശൈലി പ്രയോഗിക്കുന്ന ഘടകങ്ങൾ കണ്ടെത്തും. അതേ സമയം, പേജ് ശൈലിയിൽ അത്തരമൊരു സെലക്ടറുടെ സാന്നിധ്യം ആവശ്യമില്ല. ഈ രീതികൾക്ക് CSS-മായി യാതൊരു ബന്ധവുമില്ല. querySelectorAll() രീതി സെലക്ടറുമായി പൊരുത്തപ്പെടുന്ന എല്ലാ ഘടകങ്ങളും കണ്ടെത്തുന്നു. കൂടാതെ querySelector() രീതി ഒരു ഘടകം കണ്ടെത്തുന്നു, അത് പേജ് കോഡിലെ ആദ്യത്തേതാണ്. ഈ രീതികൾക്ക് മുമ്പ് ചർച്ച ചെയ്ത ഘടകങ്ങൾക്കായി തിരയുന്നതിനുള്ള എല്ലാ രീതികളും മാറ്റിസ്ഥാപിക്കാൻ കഴിയും, കാരണം ഐഡി പ്രകാരം ഒരു സെലക്ടർ, ടാഗ് പ്രകാരം ഒരു സെലക്ടർ എന്നിവയും മറ്റ് പലതും ഉണ്ട്.

document.querySelector(സെലക്ടർ)

document.querySelectorAll(സെലക്ടർ)

സെലക്‌ടറുകൾ സിഎസ്എസിലെ പോലെ തന്നെ എഴുതിയിരിക്കുന്നു, ഉദ്ധരണികൾ ഇടാൻ മറക്കരുത്.

നമുക്ക് പേജിലേക്ക് ഒരു ലിസ്റ്റ് ചേർക്കുകയും സെലക്ടർ ഉപയോഗിച്ച് അത് കണ്ടെത്തുകയും ചെയ്യാം. ഞങ്ങൾ ഒരു ഘടകം മാത്രമാണ് തിരയുന്നത്, അത് ആദ്യത്തേതായിരിക്കുമെന്ന് ഞങ്ങൾക്ക് ഉറപ്പായും അറിയാം, കാരണം പേജിൽ ഒരെണ്ണം മാത്രമേയുള്ളൂ. അതിനാൽ, ഈ സാഹചര്യത്തിൽ querySelector () രീതി ഉപയോഗിക്കുന്നത് കൂടുതൽ സൗകര്യപ്രദമാണ്. എന്നാൽ ഈ രീതി ഉപയോഗിക്കുമ്പോൾ, അതേ ഘടകങ്ങൾ ഭാവിയിൽ പേജിലേക്ക് ചേർക്കാൻ കഴിയുമെന്ന് നിങ്ങൾ കണക്കിലെടുക്കേണ്ടതുണ്ട്. എന്നിരുന്നാലും, ഇത് മിക്ക രീതികൾക്കും ബാധകമാണ്.

HTML കോഡ്:

ഈ രീതികൾക്ക് മുഴുവൻ ഡോക്യുമെൻ്റിലും അല്ല, ഒരു പ്രത്യേക ഘടകത്തിനുള്ളിൽ ഘടകങ്ങൾക്കായി തിരയാനും കഴിയും.

ഉദാഹരണത്തിൽ, ഞങ്ങൾ ടാഗ് സെലക്ടറുകൾ മാത്രമാണ് ഉപയോഗിച്ചത്. മറ്റ് സെലക്ടറുകൾ ഉപയോഗിച്ച് പേജ് ഘടകങ്ങൾ കണ്ടെത്താൻ ശ്രമിക്കുക.

അടുത്തുള്ള ഘടകങ്ങൾ

കണ്ടെത്തിയ മൂലകത്തിന് നിങ്ങൾക്ക് അയൽക്കാരെ കണ്ടെത്താം. ഓരോ മൂലകവും ഒരു വസ്തുവാണ്, അയൽ ഘടകങ്ങൾ ആ വസ്തുവിൻ്റെ ഗുണങ്ങളിലൂടെ ആക്സസ് ചെയ്യാൻ കഴിയും. മുമ്പത്തെ എലമെൻ്റ്‌സിബ്ലിംഗ് പ്രോപ്പർട്ടിയിൽ മുമ്പത്തെ ഘടകവും nextElementSibling പ്രോപ്പർട്ടിയിൽ അടുത്ത ഘടകവും അടങ്ങിയിരിക്കുന്നു.

എലമെൻ്റ്.മുമ്പത്തെ എലമെൻ്റ്സിബ്ലിംഗ്

എലമെൻ്റ്.നെക്സ്റ്റ് എലെമെൻ്റ്സിബ്ലിംഗ്

ബ്ലോക്കിന് താഴെയുള്ള ഘടകം കണ്ടെത്താം:

ശിശു ഘടകങ്ങൾ

കുട്ടികളുടെ സ്വത്തിൽ കുട്ടികളുടെ ഒരു നിര അടങ്ങിയിരിക്കുന്നു.

ഘടകം.കുട്ടികൾ

ബ്ലോക്കിൻ്റെ ചൈൽഡ് ഘടകങ്ങൾ കണ്ടെത്താം.