Бір-екі күн бұрын мен компаниядан Front-end әзірлеуші ​​​​вакансиясына тест тапсырмасын алдым. Әрине, тапсырма бірнеше тармақтан тұрды. Бірақ қазір біз олардың тек біреуі туралы - бетте іздеуді ұйымдастыру туралы айтатын боламыз. Анау. өріске енгізілген мәтін бойынша банальды іздеу (браузердегі Ctrl + F сияқты). Тапсырманың ерекшелігі кез келген JS фреймворктерін немесе кітапханаларын пайдалануға тыйым салынғанында болды. Барлығы жергілікті JavaScript тілінде жазылған.

«Кілтті тапсыру» шешімін табу

Егер біреу қызықтырса, мен кодты алдым.

Сценарий бірден жұмыс істеді. Мен мәселе шешілді деп ойладым, бірақ белгілі болғандай, сценарий авторын ренжітпейді, онда үлкен олқылық бар. Сценарий тегтің бүкіл мазмұнын іздеді... және сіз болжағандай, тегке немесе оның атрибуттарына ұқсайтын таңбалардың кез келген комбинациясын іздеу бүкіл HTML бетін бұзды.

Неліктен сценарий дұрыс жұмыс істемеді?

...сәйкестік табылды...
Содан кейін біз ағымдағы тегті ауыстырамыз денеалынған жаңасына. Белгілеу жаңартылды, стильдер өзгертілді және барлық табылған нәтижелер экранда сары түспен бөлектеледі.

Сіз мәселенің не екенін түсінген шығарсыз, бірақ мен бәрібір егжей-тегжейлі түсіндіремін. Іздеу өрісіне сөзді енгізуді елестетіп көріңіз "div". Көріп отырғаныңыздай, ішінде денеКөптеген басқа тегтер бар, соның ішінде див. Ал егер бәріміз "div"жоғарыда көрсетілген стильдерді қолданыңыз, содан кейін ол енді блок болмайды, бірақ құрылым бұзылғандықтан не екені белгісіз. Нәтижесінде, түзетуді қайта жазғаннан кейін біз толығымен бұзылған веб-парақты аламыз. Мынадай көрінеді.

Көріп отырғаныңыздай, бет толығымен бұзылған. Қысқасы, сценарий жұмыс істемейтін болып шықты, мен өзімді нөлден жазуды шештім, бұл мақала осыған арналған.

Сондықтан біз сценарийді нөлден жазамыз

Енді бізді іздеуі бар пішін қызықтырады. Мен оны қызыл сызықпен айналдырдым.

Кішкене түсінейік. Мен оны келесідей іске асырдым (әзірге таза HTML). Үш тегтері бар пішін.

Бірінші- мәтінді енгізу;
Екінші- іздеуден бас тарту үшін (таңдауды алып тастау);
Үшінші- іздеу үшін (табылған нәтижелерді бөлектеңіз).

Біз жасайтын бірінші нәрсе: іздеу түймесі мен бас тарту түймелері басылғанда функция шақыруларын жазамыз. Ол келесідей болады:

Біз мәтіні бар өрісті береміз id = "табылатын мәтін" (осы идентификатор арқылы біз js элементіне сілтеме жасаймыз).

Бас тарту түймешігіне келесі атрибуттарды береміз: type="button" onclick="javascript: FindOnPage("табу үшін мәтін",жалған); false қайтару;"

- Түрі: түйме
- Басқан кезде FindOnPage("мәтіннен табу",жалған); функциясы шақырылады. және мәтіні бар өрістің идентификаторын береді, жалған

Іздеу түймесіне келесі атрибуттарды береміз: type="button" onclick="javascript: FindOnPage("табу үшін мәтін",шындық); false қайтару;"

- Түрі: жіберу (батырма емес, себебі бұл жерде өріске енгізілгеннен кейін Enter пернесін пайдалануға болады, бірақ түймені де пайдалануға болады)
- Басқан кезде FindOnPage("мәтіннен табу",true); функциясы шақырылады. және мәтіні бар өрістің идентификаторын береді, шын

Сіз тағы 1 атрибутты байқаған шығарсыз: шын/жалған . Біз оны қай түйме басылғанын анықтау үшін пайдаланамыз (іздеуден бас тарту немесе іздеуді бастау). «Бас тарту» түймесін бассақ, аударамыз жалған. Іздеу түймесін бассақ, біз өтеміз шын.

Код жазуды бастамас бұрын, шегініс жасап, алдымен заттардың қалай жұмыс істеуі керектігін талқылайық. Анау. Негізінде іс-әрекет жоспарын жазыңыз. Сонымен, өріске мәтін енгізу кезінде бетті іздеу керек, бірақ тегтер мен атрибуттарға әсер ете алмайды. Анау. тек мәтіндік объектілер. Бұған қалай жетуге болады - көптеген жолдар бар екеніне сенімдімін. Бірақ енді біз тұрақты өрнектерді қолданамыз.

Сонымен, келесі тұрақты өрнектек мәтін жолын іздейді. нысаны: «>... мәтін...<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.

/>(.*?)Сонымен, біз талдайтын және пайдаланушы енгізген мәтінмен сәйкестіктерді іздейтін кодтың қажетті бөліктерін табамыз. Содан кейін табылған нысандарға стильдерді қосамыз, содан кейін html кодын жаңасымен ауыстырамыз.

Бастайық. Біріншіден, бізге қажет айнымалылар.

Var input, search,pr,result,result_arr, locale_HTML, result_store; //енгізу – пайдаланушы енгізген мәтінді қабылдаймыз //іздеу – жолдан тұрақты өрнек жасаймыз //pr – оған ағымдағыны сақтаймыз //нәтиже - pr-дан мәтінді алу (яғни тегтер мен атрибуттарды кесу) //result_arr - pr-ге ұқсас, бірақ бөлектеу үшін стильдермен //locale_HTML - түпнұсқа біз өзгертпейміз, біз стильдерді қалпына келтіру үшін қолданамыз
Ал біз бірден анықтаймыз тіл_HTMLбіз бір нәрсені іздейміз бе, жоқ па дегенді білдіреді. Бұл бастапқы бетті дереу сақтау және стильдерді қалпына келтіру үшін қажет.

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені айнымалыға сақтаңыз (көз)
Жарайды, енді бізден шақырылатын функцияны жасау уақыты келді DOM. Бірден есептеп көрейік, бізде 2 функция болуы керек, олардың әрқайсысы басылған түймеге байланысты жұмыс істейді. Ақыр соңында, біз іздеу жүргіземіз немесе оны қалпына келтіреміз. Және ол атрибут арқылы басқарылады шын/жалған, есіңізде болса. Сондай-ақ, сіз қайта іздеу кезінде ескі стильдерді қалпына келтіру керек екенін түсінуіңіз керек. Осылайша біз келесіні аламыз:

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені (Бастапқы) FindOnPage(аты, күй) ( if(status) ( FindOnPageBack(); FindOnPageGo(); ) айнымалы функциясына сақтаңыз // өткенді тазалап, табылған if(!status) ( FindOnPageBack) мәнін бөлектеңіз. (); ) //Таңдауды жою)
Жарайды, логиканың бір бөлігі орындалды, әрі қарай жылжыңыз. Алынған сөзді таңбалар санына тексеру қажет. Өйткені, бізге 1 әріп/таңбаны не үшін іздеу керек. Жалпы, мен бұл мүмкіндікті 3+ таңбамен шектеуді шештім.

Сонымен, алдымен пайдаланушы енгізген мәнді аламыз және оның ұзындығына байланысты біз негізгі іздеу функциясын немесе ескертуді және нөлді көрсету функциясын орындаймыз. Ол келесідей болады:

<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( //іздеу жасау ) функциясы FindOnPageBack() ( document.body.innerHTML = locale_HTML; ) //мәнерлерді нөлге орнатыңыз if(status) ( FindOnPageBack(); FindOnPageGo(); ) //өткенді өшіріңіз және табылған if( !status) ( FindOnPageBack(); ) //Таңдауды жою ) белгілеңіз.
Маған кодтың осы бөлігін түсіндіруге рұқсат етіңіз. Түсінікті бола алмайтын жалғыз нәрсе - бұл жол:

FindOnPageBack() функциясы ( document.body.innerHTML = locale_HTML; )

Мұнда бәрі қарапайым: әдіс innerHTMLқайтарады htmlобъект коды. Бұл жағдайда біз жай ғана токты ауыстырамыз денебүкіл бетті жүктеген кезде сақтаған түпнұсқаға.

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені (Көз) FindOnPage(аты, күй) айнымалы функциясына сақтау ( кіріс = document.getElementById(name).value; // html if(input.length) өрісінен мәнді алу<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( FindOnPageGo() функциясы ( іздеу = "/"+input+"/g"; //жолдан тұрақты өрнек жасау pr = document.body.innerHTML; //барлық денені айнымалы нәтижеге сақтау = pr .матч(/ >(.*?)Сонымен, осы кезеңде бізде негізгі айнымалылар мен мәндер бар. Енді біз таңдалған фонмен код стильдерінің қажетті бөлімдерін беруіміз керек. Анау. таңдалған мәтінді тұрақты өрнек үшін тексеру (шын мәнінде, біз тұрақты өрнек арқылы таңдалған мәтінді қайтадан тұрақты өрнекпен талдаймыз). Ол үшін енгізілген мәтіннен тұрақты өрнек құрастыру керек (орындалды), содан кейін тактика ретінде өткен әдісті орындау керек. Мұнда әдіс бізге көмектеседі бағалау().

Жалпы, мәтінді ауыстырып, нәтижені стильдермен алғаннан кейін бізге ағым қажет htmlалынғанымен ауыстырыңыз. Біз жасаймыз.

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені (Көз) FindOnPage(аты, күй) айнымалы функциясына сақтау ( кіріс = document.getElementById(name).value; // html if(input.length) өрісінен мәнді алу<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( FindOnPageGo() функциясы ( іздеу = "/"+input+"/g"; //жолдан тұрақты өрнек жасау pr = document.body.innerHTML; //барлық денені айнымалы нәтижеге сақтау = pr .матч(/ >(.*?)"+енгізу+""); // қажетті элементтерді табыңыз, стильді орнатыңыз және жаңа массивке сақтаңыз ) for(var i=0; i Іс жүзінде бәрі дайын, сценарий қазірдің өзінде жұмыс істеп тұр. Бірақ сұлулық үшін тағы бірнеше мәліметтерді қосайық.

1) Пайдаланушы енгізетін мәтіннен бос орындарды кесіңіз. Мына кодты қойыңыз:

Енгізу = numer.replace(/^\s+/g,""); кіріс = numer.replace(/(1,)/g," ");
Осы жолдан кейін:

Енгізу = document.getElementById(name).value; // html ішіндегі өрістен мән алу
2) Сәйкестіктерді тексерейік (егер сәйкестік табылмаса, бұл туралы бізге хабарлаңыз). Бұл кодты FindOnPageGo() функциясының ішіне айнымалылардан кейін енгіземіз.

Міне бітті. Әрине, сіз бірінші табылған нәтижеге, тікелей ajax іздеуіне айналдыруды қоса аласыз және жалпы оны шексіз жақсартуға болады. Қазір бұл сайттағы қарапайым іздеу. Мақаланың мақсаты мен сияқты сұрақ туындаса, жаңадан келгендерге көмектесу болды. Өйткені, мен қарапайым дайын шешім таппадым.

P.S.: дұрыс жұмыс істеу үшін тегтер арасында қарапайым мәтін бар жерлерде html құжатындағы мәтінді ораманы алып тастау керек.

Мысалы, орнына

Бля бла бла

Бля бла бла

Сондай-ақ, егер біреу ұқсас нәрсені жазған болса, бірақ тірі іздеу арқылы дереккөзді бөлісіңіз, талдау қызықты болады.

Мен сындарлы сын, пікірлер, мүмкін ұсыныстар тыңдауға қуанышты болар едім.

Келесі күні мен кішкене код қостым, бетте тікелей іздеу жасадым. Сондықтан сұрақ жойылады. код HTMLөзгермеді. JSСіз көре аласыз.

Іздеу "place_for_live_search" сыныбы бар тегтер арқылы жүргізіледі. Сонымен, алгоритм қажетті мазмұнды талдау үшін сыныпты қосыңыз және сіз аяқтадыңыз.

DOM стандарты элементті табудың бірнеше құралдарын ұсынады. Бұл getElementById , getElementsByTagName және getElementsByName әдістері.

Неғұрлым қуатты іздеу әдістерін JavaScript кітапханалары ұсынады.

Идентификатор бойынша іздеу

DOM ішіндегі элементті табудың ең қолайлы жолы - оны id арқылы алу. Бұл document.getElementById(id) шақыру арқылы жасалады.

Мысалы, келесі код "e c id="dataKeeper" div ішіндегі мәтін түсін көкке өзгертеді:

Document.getElementById("dataKeeper").style.color = "көк"

Тег бойынша іздеу

Келесі әдіс - белгілі бір тегпен барлық элементтерді алу және олардың арасынан қажеттісін іздеу. Ол үшін document.getElementsByTagName(тег) пайдаланылады. Ол сол тегі бар элементтер массивін қайтарады.

Мысалы, екінші элементті (массивтегі нөмірлеу нөлден басталады) li тегімен алуға болады:

Document.getElementsByTagName("LI")

Бір қызығы, getElementsByTagName тек құжатта ғана емес, жалпы тегі бар кез келген элементте (мәтін емес) шақырылуы мүмкін.

Бұл жағдайда осы элементтің астындағы нысандар ғана табылады.

Мысалы, келесі қоңырау бірінші div тегінде орналасқан LI элементтерінің тізімін алады:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Барлық балаларды алыңыз

elem.getElementsByTagName("*") шақыру элемент түйінінің барлық еншілестерінің тізімін береді олар қандай ретпен.

Мысалы, осы DOM-да:

Мынадай код:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i)

Келесі ретті шығарады: ol1, li1, li2 .

Аты бойынша іздеу: getElementsByName

document.getElementsByName(name) әдісі аты (аты атрибуты) берілгенге тең барлық элементтерді қайтарады.

Ол тек спецификациясы атау төлсипатын нақты беретін элементтерде ғана жұмыс істейді: form , input , a , select , textarea және басқа да сирек кездесетін элементтер.

document.getElementsByName әдісі div, p, т.б. сияқты басқа элементтерде жұмыс істемейді.

басқа әдістер

DOM іздеудің басқа жолдары бар: XPath, cssQuery және т.б. Әдетте, олар браузерлердің стандартты мүмкіндіктерін кеңейту үшін JavaScript кітапханалары арқылы жүзеге асырылады.

Сондай-ақ элементтерді сынып бойынша табудың getElementsByClassName әдісі бар, бірақ ол IE-де мүлде жұмыс істемейді, сондықтан оны таза түрде ешкім пайдаланбайды.

Жалпы қате әріптің болмауына байланысты с getElementById әдісінің атауында, ал басқа әдістерде бұл әріп бар: getElement с ByName.

Мұндағы ереже қарапайым: бір элемент - Элемент , көп - Элемент с. Барлық *Элемент әдістері с* түйіндер тізімін қайтарады.

Соңғы жаңарту: 1.11.2015

JavaScript тіліндегі DOM құрылымымен жұмыс істеу үшін құжат нысаны жаһандық терезе нысанында анықталған. Құжат нысаны бет элементтерін өңдеудің бірқатар қасиеттері мен әдістерін қамтамасыз етеді.

Элементтерді іздеу

Беттегі элементтерді іздеу үшін келесі әдістер қолданылады:

getElementById(value) : id төлсипаты мәнге тең элементті таңдайды

getElementsByTagName(value) : тегі мәнге тең барлық элементтерді таңдайды

getElementsByClassName(value) : сынып мәні бар барлық элементтерді таңдайды

querySelector(мән): CSS селекторының мәніне сәйкес келетін бірінші элементті таңдайды

querySelectorAll(value) : CSS селекторының мәніне сәйкес келетін барлық элементтерді таңдайды

Мысалы, идентификатор бойынша элементті табайық:

document.getElementById("header") шақыру арқылы id="header" элементі бар элементті табамыз. Ал innerText қасиетін пайдаланып, табылған элементтің мәтінін алуға болады.

Белгілі бір тег бойынша іздеу:

document.getElementsByTagName("p") шақыру арқылы біз барлық абзац элементтерін табамыз. Бұл шақыру табылған элементтер массивін қайтарады. Сондықтан массивтің жеке элементтерін алу үшін олар арқылы циклде өту қажет.

Егер бізге тек бірінші элементті алу қажет болса, онда біз табылған объектілер жиынтығының бірінші элементіне қол жеткізе аламыз:

VarpElement = document.getElementsByTagName("p"); document.write("Абзац мәтіні: " + pElement.innerText);

Элементті сынып бойынша алу:

CSS селекторы арқылы таңдаңыз:

document.querySelector(".annotation p") өрнегі selector.annotation p сәйкес келетін элементті табады. Егер бетте селекторға сәйкес келетін бірнеше элементтер болса, онда әдіс олардың біріншісін таңдайды. Нәтижесінде браузер мынаны көрсетеді:

Мақалаға аннотация Бірінші абзац Екінші абзац Таңдаушы мәтін: Мақалаға аннотация

Селектордағы барлық элементтерді алу үшін, табылған элементтердің массивін қайтаратын document.querySelectorAll әдісін бірдей пайдалануға болады:

Браузер шығысы:

Мақалаға түсініктеме Бірінші абзац Екінші абзац Таңдаушы мәтін 0: Бірінші абзац Таңдаушы мәтін 1: Екінші абзац

Бір-екі күн бұрын мен компаниядан Front-end әзірлеуші ​​​​вакансиясына тест тапсырмасын алдым. Әрине, тапсырма бірнеше тармақтан тұрды. Бірақ қазір біз олардың тек біреуі туралы - бетте іздеуді ұйымдастыру туралы айтатын боламыз. Анау. өріске енгізілген мәтін бойынша банальды іздеу (браузердегі Ctrl + F сияқты). Тапсырманың ерекшелігі кез келген JS фреймворктерін немесе кітапханаларын пайдалануға тыйым салынғанында болды. Барлығы жергілікті JavaScript тілінде жазылған.

«Кілтті тапсыру» шешімін табу

Егер біреу қызықтырса, мен кодты алдым.

Сценарий бірден жұмыс істеді. Мен мәселе шешілді деп ойладым, бірақ белгілі болғандай, сценарий авторын ренжітпейді, онда үлкен олқылық бар. Сценарий тегтің бүкіл мазмұнын іздеді... және сіз болжағандай, тегке немесе оның атрибуттарына ұқсайтын таңбалардың кез келген комбинациясын іздеу бүкіл HTML бетін бұзды.

Неліктен сценарий дұрыс жұмыс істемеді?

...сәйкестік табылды...
Содан кейін біз ағымдағы тегті ауыстырамыз денеалынған жаңасына. Белгілеу жаңартылды, стильдер өзгертілді және барлық табылған нәтижелер экранда сары түспен бөлектеледі.

Сіз мәселенің не екенін түсінген шығарсыз, бірақ мен бәрібір егжей-тегжейлі түсіндіремін. Іздеу өрісіне сөзді енгізуді елестетіп көріңіз "div". Көріп отырғаныңыздай, ішінде денеКөптеген басқа тегтер бар, соның ішінде див. Ал егер бәріміз "div"жоғарыда көрсетілген стильдерді қолданыңыз, содан кейін ол енді блок болмайды, бірақ құрылым бұзылғандықтан не екені белгісіз. Нәтижесінде, түзетуді қайта жазғаннан кейін біз толығымен бұзылған веб-парақты аламыз. Мынадай көрінеді.

Көріп отырғаныңыздай, бет толығымен бұзылған. Қысқасы, сценарий жұмыс істемейтін болып шықты, мен өзімді нөлден жазуды шештім, бұл мақала осыған арналған.

Сондықтан біз сценарийді нөлден жазамыз

Енді бізді іздеуі бар пішін қызықтырады. Мен оны қызыл сызықпен айналдырдым.

Кішкене түсінейік. Мен оны келесідей іске асырдым (әзірге таза HTML). Үш тегтері бар пішін.

Бірінші- мәтінді енгізу;
Екінші- іздеуден бас тарту үшін (таңдауды алып тастау);
Үшінші- іздеу үшін (табылған нәтижелерді бөлектеңіз).

Біз жасайтын бірінші нәрсе: іздеу түймесі мен бас тарту түймелері басылғанда функция шақыруларын жазамыз. Ол келесідей болады:

Біз мәтіні бар өрісті береміз id = "табылатын мәтін" (осы идентификатор арқылы біз js элементіне сілтеме жасаймыз).

Бас тарту түймешігіне келесі атрибуттарды береміз: type="button" onclick="javascript: FindOnPage("табу үшін мәтін",жалған); false қайтару;"

- Түрі: түйме
- Басқан кезде FindOnPage("мәтіннен табу",жалған); функциясы шақырылады. және мәтіні бар өрістің идентификаторын береді, жалған

Іздеу түймесіне келесі атрибуттарды береміз: type="button" onclick="javascript: FindOnPage("табу үшін мәтін",шындық); false қайтару;"

- Түрі: жіберу (батырма емес, себебі бұл жерде өріске енгізілгеннен кейін Enter пернесін пайдалануға болады, бірақ түймені де пайдалануға болады)
- Басқан кезде FindOnPage("мәтіннен табу",true); функциясы шақырылады. және мәтіні бар өрістің идентификаторын береді, шын

Сіз тағы 1 атрибутты байқаған шығарсыз: шын/жалған . Біз оны қай түйме басылғанын анықтау үшін пайдаланамыз (іздеуден бас тарту немесе іздеуді бастау). «Бас тарту» түймесін бассақ, аударамыз жалған. Іздеу түймесін бассақ, біз өтеміз шын.

Код жазуды бастамас бұрын, шегініс жасап, алдымен заттардың қалай жұмыс істеуі керектігін талқылайық. Анау. Негізінде іс-әрекет жоспарын жазыңыз. Сонымен, өріске мәтін енгізу кезінде бетті іздеу керек, бірақ тегтер мен атрибуттарға әсер ете алмайды. Анау. тек мәтіндік объектілер. Бұған қалай жетуге болады - көптеген жолдар бар екеніне сенімдімін. Бірақ енді біз тұрақты өрнектерді қолданамыз.

Сондықтан келесі регекс тек мәтін жолын іздейді. нысаны: ">... мәтін...<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.

/>(.*?)Сонымен, біз талдайтын және пайдаланушы енгізген мәтінмен сәйкестіктерді іздейтін кодтың қажетті бөліктерін табамыз. Содан кейін табылған нысандарға стильдерді қосамыз, содан кейін html кодын жаңасымен ауыстырамыз.

Бастайық. Біріншіден, бізге қажет айнымалылар.

Var input, search,pr,result,result_arr, locale_HTML, result_store; //енгізу – пайдаланушы енгізген мәтінді қабылдаймыз //іздеу – жолдан тұрақты өрнек жасаймыз //pr – оған ағымдағыны сақтаймыз //нәтиже - pr-дан мәтінді алу (яғни тегтер мен атрибуттарды кесу) //result_arr - pr-ге ұқсас, бірақ бөлектеу үшін стильдермен //locale_HTML - түпнұсқа біз өзгертпейміз, біз стильдерді қалпына келтіру үшін қолданамыз
Ал біз бірден анықтаймыз тіл_HTMLбіз бір нәрсені іздейміз бе, жоқ па дегенді білдіреді. Бұл бастапқы бетті дереу сақтау және стильдерді қалпына келтіру үшін қажет.

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені айнымалыға сақтаңыз (көз)
Жарайды, енді бізден шақырылатын функцияны жасау уақыты келді DOM. Бірден есептеп көрейік, бізде 2 функция болуы керек, олардың әрқайсысы басылған түймеге байланысты жұмыс істейді. Ақыр соңында, біз іздеу жүргіземіз немесе оны қалпына келтіреміз. Және ол атрибут арқылы басқарылады шын/жалған, есіңізде болса. Сондай-ақ, сіз қайта іздеу кезінде ескі стильдерді қалпына келтіру керек екенін түсінуіңіз керек. Осылайша біз келесіні аламыз:

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені (Бастапқы) FindOnPage(аты, күй) ( if(status) ( FindOnPageBack(); FindOnPageGo(); ) айнымалы функциясына сақтаңыз // өткенді тазалап, табылған if(!status) ( FindOnPageBack) мәнін бөлектеңіз. (); ) //Таңдауды жою)
Жарайды, логиканың бір бөлігі орындалды, әрі қарай жылжыңыз. Алынған сөзді таңбалар санына тексеру қажет. Өйткені, бізге 1 әріп/таңбаны не үшін іздеу керек. Жалпы, мен бұл мүмкіндікті 3+ таңбамен шектеуді шештім.

Сонымен, алдымен пайдаланушы енгізген мәнді аламыз және оның ұзындығына байланысты біз негізгі іздеу функциясын немесе ескертуді және нөлді көрсету функциясын орындаймыз. Ол келесідей болады:

<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( //іздеу жасау ) функциясы FindOnPageBack() ( document.body.innerHTML = locale_HTML; ) //мәнерлерді нөлге орнатыңыз if(status) ( FindOnPageBack(); FindOnPageGo(); ) //өткенді өшіріңіз және табылған if( !status) ( FindOnPageBack(); ) //Таңдауды жою ) белгілеңіз.
Маған кодтың осы бөлігін түсіндіруге рұқсат етіңіз. Түсінікті бола алмайтын жалғыз нәрсе - бұл жол:

FindOnPageBack() функциясы ( document.body.innerHTML = locale_HTML; )

Мұнда бәрі қарапайым: әдіс innerHTMLқайтарады htmlобъект коды. Бұл жағдайда біз жай ғана токты ауыстырамыз денебүкіл бетті жүктеген кезде сақтаған түпнұсқаға.

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені (Көз) FindOnPage(аты, күй) айнымалы функциясына сақтау ( кіріс = document.getElementById(name).value; // html if(input.length) өрісінен мәнді алу<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( FindOnPageGo() функциясы ( іздеу = "/"+input+"/g"; //жолдан тұрақты өрнек жасау pr = document.body.innerHTML; //барлық денені айнымалы нәтижеге сақтау = pr .матч(/ >(.*?)Сонымен, осы кезеңде бізде негізгі айнымалылар мен мәндер бар. Енді біз таңдалған фонмен код стильдерінің қажетті бөлімдерін беруіміз керек. Анау. таңдалған мәтінді тұрақты өрнек үшін тексеру (шын мәнінде, біз тұрақты өрнек арқылы таңдалған мәтінді қайтадан тұрақты өрнекпен талдаймыз). Ол үшін енгізілген мәтіннен тұрақты өрнек құрастыру керек (орындалды), содан кейін тактика ретінде өткен әдісті орындау керек. Мұнда әдіс бізге көмектеседі бағалау().

Жалпы, мәтінді ауыстырып, нәтижені стильдермен алғаннан кейін бізге ағым қажет htmlалынғанымен ауыстырыңыз. Біз жасаймыз.

Var input, search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // бүкіл денені (Көз) FindOnPage(аты, күй) айнымалы функциясына сақтау ( кіріс = document.getElementById(name).value; // html if(input.length) өрісінен мәнді алу<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( FindOnPageGo() функциясы ( іздеу = "/"+input+"/g"; //жолдан тұрақты өрнек жасау pr = document.body.innerHTML; //барлық денені айнымалы нәтижеге сақтау = pr .матч(/ >(.*?)"+енгізу+""); // қажетті элементтерді табыңыз, стильді орнатыңыз және жаңа массивке сақтаңыз ) for(var i=0; i Іс жүзінде бәрі дайын, сценарий қазірдің өзінде жұмыс істеп тұр. Бірақ сұлулық үшін тағы бірнеше мәліметтерді қосайық.

1) Пайдаланушы енгізетін мәтіннен бос орындарды кесіңіз. Мына кодты қойыңыз:

Енгізу = numer.replace(/^\s+/g,""); кіріс = numer.replace(/(1,)/g," ");
Осы жолдан кейін:

Енгізу = document.getElementById(name).value; // html ішіндегі өрістен мән алу
2) Сәйкестіктерді тексерейік (егер сәйкестік табылмаса, бұл туралы бізге хабарлаңыз). Бұл кодты FindOnPageGo() функциясының ішіне айнымалылардан кейін енгіземіз.

Міне бітті. Әрине, сіз бірінші табылған нәтижеге, тікелей ajax іздеуіне айналдыруды қоса аласыз және жалпы оны шексіз жақсартуға болады. Қазір бұл сайттағы қарапайым іздеу. Мақаланың мақсаты мен сияқты сұрақ туындаса, жаңадан келгендерге көмектесу болды. Өйткені, мен қарапайым дайын шешім таппадым.

P.S.: дұрыс жұмыс істеу үшін тегтер арасында қарапайым мәтін бар жерлерде html құжатындағы мәтінді ораманы алып тастау керек.

Мысалы, орнына

Бля бла бла

Бля бла бла

Сондай-ақ, егер біреу ұқсас нәрсені жазған болса, бірақ тірі іздеу арқылы дереккөзді бөлісіңіз, талдау қызықты болады.

Мен сындарлы сын, пікірлер, мүмкін ұсыныстар тыңдауға қуанышты болар едім.

Келесі күні мен кішкене код қостым, бетте тікелей іздеу жасадым. Сондықтан сұрақ жойылады. код HTMLөзгермеді. JSСіз көре аласыз.

Іздеу "place_for_live_search" сыныбы бар тегтер арқылы жүргізіледі. Сонымен, алгоритм қажетті мазмұнды талдау үшін сыныпты қосыңыз және сіз аяқтадыңыз.

Сценарий беттің кейбір элементімен жұмыс істеуі үшін алдымен осы элементті табу керек. JavaScript-те мұны істеудің бірнеше жолы бар. Табылған элемент әдетте айнымалыға тағайындалады, ал кейінірек осы айнымалы арқылы сценарий элементке қатынасады және онымен кейбір әрекеттерді орындайды.

Идентификатор бойынша іздеу

Егер элементке бет кодында id төлсипаты берілсе, онда элементті id арқылы табуға болады. Бұл ең оңай жол. Элемент құжаттың жаһандық нысанының getElementById() әдісі арқылы ізделеді.

document.getElementById(id)

Параметрлер:

id – табылатын элементтің идентификаторы. id - жол, сондықтан ол тырнақшаға алынуы керек.

Бетті жасайық, оған элемент қосып, оған id берейік және осы элементті сценарийден табайық:

HTML коды:

JavaScript:

Табылған элементті блок айнымалысына тағайындадық және айнымалы мәнді консольде көрсеттік. Браузер консолін ашыңыз, ол элементті қамтуы керек.

Идентификатор бойынша іздеу ең оңай және ыңғайлы әдіс болғандықтан, ол жиі қолданылады. Сценарийдегі қандай да бір элементпен жұмыс істеу қажет болса, онда id атрибуты осы элемент үшін бет кодындағы бұрын орнатылмаған болса да орнатылады. Және идентификатор бойынша элементті табыңыз.

Сынып бойынша іздеу

getElementsByClassName() әдісі белгілі бір сыныпқа жататын барлық элементтерді табуға мүмкіндік береді.

document.getElementsByClassName(сынып)

Параметрлер:

класс – табылуға тиісті элементтер класы

Әдіс табылған элементтерді қамтитын псевдо-массивті қайтарады. Оны псевдо-массив деп атайды, өйткені көптеген массив әдістері оған жұмыс істемейді. Бірақ негізгі сипат сақталады - массивтің кез келген элементіне сілтеме жасай аласыз. Бір ғана элемент табылса да, ол әлі де массивте болады.

Бетке элементтерді қосып, оларға класс берейік. Кейбір элементтер біз бұрын жасаған блоктың ішіне орналастырылады. Басқа бөлігі блоктан тыс құрылады. Мұның мәні сәл кейінірек белгілі болады. Енді бет келесідей болады:

HTML коды:

JavaScript:

Енді блокта орналасқан элементтер ғана табылды.

Тег бойынша іздеу

getElementsByTagName() әдісі белгілі бір тегі бар барлық элементтерді табады. Ол сондай-ақ табылған элементтері бар псевдо-массивті қайтарады.

document.getElementsByTagName (тег)

Параметрлер:

тег – табылатын элементтер тегі

Беттегі барлық p тегтерін табайық:

Бұл әдісті бүкіл құжатқа емес, белгілі бір элементке де қолдануға болады. Блоктағы барлық p тегтерін табыңыз.

Селектор арқылы іздеу

Берілген селекторға сәйкес элементтерді табатын querySelector() және querySelectorAll() әдістері бар. Яғни, егер ол осындай селекторға көрсетілсе, стиль қолданылатын элементтер табылады. Сонымен қатар, бет стилінде мұндай селектордың болуы мүлдем қажет емес. Бұл әдістердің CSS-ке ешқандай қатысы жоқ. querySelectorAll() әдісі селекторға сәйкес келетін барлық элементтерді табады. Ал querySelector() әдісі бет кодындағы бірінші элемент болып табылатын бір элементті табады. Бұл әдістер бұрын талқыланған элементтерді табудың барлық әдістерін алмастыра алады, себебі идентификатор селекторы, тегтер селекторы және басқалары бар.

document.querySelector(таңдаушы)

document.querySelectorAll(таңдаушы)

Селекторлар CSS-тегідей жазылған, тек тырнақшаларды қоюды ұмытпаңыз.

Бетке тізімді қосып, оны селектор арқылы табайық. Біз бір ғана элементті іздейміз және оның бірінші болатынына сенімдіміз, өйткені бұл бетте жалғыз. Сондықтан бұл жағдайда querySelector() әдісін қолдану ыңғайлырақ. Бірақ бұл әдісті пайдаланған кезде болашақта бірдей элементтерді бетке қосуға болатынын ескеру қажет. Дегенмен, бұл көптеген әдістерге қатысты.

HTML коды:

Бұл әдістер сонымен қатар элементтерді бүкіл құжатта емес, бір элемент ішінде іздей алады.

Мысалда біз тек тег бойынша селекторларды қолдандық. Басқа селекторларды пайдаланып бет элементтерін табуға тырысыңыз.

Көршілес элементтер

Табылған элемент үшін сіз көршілерді таба аласыз. Әрбір элемент объект болып табылады және көрші элементтерді осы объектінің қасиеттері арқылы алуға болады. FrontElementSibling сипаты алдыңғы элементті қамтиды, ал nextElementSibling сипаты келесі элементті қамтиды.

element.previousElementSibling

element.nextElementSibling

Блоктан кейінгі элементті табыңыз:

Бала элементтері

Балалар сипатында балалар жиыны бар.

элемент.балалар

Блоктың еншілес элементтерін табыңыз.