Lo standard DOM trasferisce la richiesta di ricerca dell'elemento. Gli stessi metodi getElementById, getElementsByTagName e getElementsByName.

Metodi e trucchi più potenti per promuovere le librerie javascript.

Cerca per id

Sami modo manuale conoscere l'elemento nel DOM - tse yogo di id. Per quale wiki deve essere creato document.getElementById(id)

Ad esempio, il codice successivo consiste nel cambiare il colore del testo in nero per div "e c id="dataKeeper" :

Document.getElementById("dataKeeper").style.color = "blu"

Cerca un tag

Il prossimo passo è rimuovere tutti gli elementi con il tag del brano e il centro dell'elenco dei bisogni. Per i quali utilizzare document.getElementsByTagName(tag). Si trasforma una serie di elementi per creare un tale tag.

Ad esempio, puoi prendere un altro elemento (numerazione nell'array a partire da zero) con il tag li:

Document.getElementsByTagName("LI")

Bene, getElementsByTagName può essere cliccato non solo per document , ma anche per qualsiasi elemento, che può essere un tag (non di testo).

Con chi, ci saranno meno oggetti conosciuti, come se fossero conosciuti sotto questo elemento.

Ad esempio, il prossimo wiki prenderà un elenco di elementi LI che si trovano nel mezzo del primo tag div:

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

Porta via tutte le chicche

Fare clic su elem.getElementsByTagName("*") per ruotare l'elenco di tutti i figli del nodo elem nell'ordine della loro deviazione.

Ad esempio, su questo DOM:

Codice come questo:

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

Sequenza di Vivede: ol1, li1, li2.

Cerca il nome: getElementsByName

Il metodo document.getElementsByName(name) trasforma tutti gli elementi che hanno lo stesso nome (attributo name) di quello dato.

In pratica solo con questi elementi, ma la specifica passa esplicitamente l'attributo name: not form , input , a , select , textarea e altri più rari.

Il metodo document.getElementsByName non è applicabile ad altri elementi di tipo div, p e simili.

Altri modi

Esplora altri modi per cercare nel DOM: XPath, cssQuery, ecc. Di norma, sono implementati dalle librerie JavaScript per estendere le funzionalità standard del browser.

C'è anche un metodo getElementsByClassName per cercare elementi per classe, ma non funziona in IE, quindi non sembra nulla nella sua forma più pura.

Spesso perdona le lettere pov'azana z vіdsutnistyu S il nome del metodo getElementById è lo stesso di altri metodi, la lettera є: getElement S Per nome.

La regola qui è semplice: un elemento - Elemento, molti - Elemento S. Metodi d'uso *Elemento S* Ruota l'elenco dei nodi.

Pochi giorni fa, dopo aver preso un lavoro di prova da un'azienda per il posto vacante di Front-end dev. Sicuramente, il compito era formato da una serie di punti. Ma allo stesso tempo, è meno probabile che ne menzioni uno: l'organizzazione di uno scherzo a parte. Totò. una banale beffa per il testo inserito nel campo (analogo a Ctrl+F nel browser). La particolarità del task è che è stata bloccata la scelta se framework o librerie JS. Tutti scrivono in JavaScript nativo.

Cerca una soluzione pronta

Yakshcho komus tsikavo, codice bravo.

Script immediatamente zapratsyuvav. Pensavo che il cibo fosse virishene, ma, come sembrava, non a immagine dell'autore della sceneggiatura, quello nuovo ne aveva un po'. Script v_v cerca l'intero tag ... e, come hai già intuito cantilenante, quando chiedi se c'è qualche cambiamento di simboli per indovinare il tag o i suoi attributi, l'intera pagina HTML è stata interrotta.

Perché lo script viene eseguito in modo errato?

... conoscenza zbig ...
E poi sostituiremo il tag corrente corpo per un nuovo ritiro. Il layout viene aggiornato, gli stili vengono modificati e i risultati vengono visualizzati sullo schermo.

Hai già capito cantilenante qual è il problema, ma ti spiegherò comunque il rapporto. Rivela che la parola è stata inserita nel campo "div". Come puoi capire, capire corpoє anonimi altri tag, inclusi div. Mi piace a tutti noi "div" stili zastosovuєmo, nominati più in alto, tse sarà un blocco, ma irragionevolmente, i frammenti del design si stanno rompendo. Di conseguenza, dopo aver riscritto il socket, riprenderemo la pagina web rotta. Sembrando così.

Come una bachite, il lato sarà laminato. Insomma, la sceneggiatura sembrava impraticabile, e ho deciso di scriverne una mia da zero, a cui questo articolo è attribuito.

Scriviamo anche una sceneggiatura da zero

Ninі us tsіkavit form in poshukom. Avvolto con una linea rossa.

Analizziamo le cose. L'ho fatto in questo modo (finora HTML puro). Modulo con tre tag.

persico- Per l'immissione di testo;
Altro- per raccontare una barzelletta (prendere una visione);
Terzo- per scherzo (vedi i risultati che conosci).

Per prima cosa, facciamo bene: scriviamo la funzione wiki quando premiamo il pulsante, chiediamo quel pulsante. Sembriamo così:

Viene fornito il campo con il testo id="testo da trovare" (quell'id verrà spostato nell'elemento js).

I pulsanti per il ridimensionamento forniscono i seguenti attributi: type="button" onclick="javascript: FindOnPage("text-to-find", false); restituisce falso;"

- Tipo: pulsante
- Quando viene premuta, la funzione FindOnPage("text-to-find", false); passa l'id del campo con il testo, falso

I pulsanti richiedono i seguenti attributi: type="button" onclick="javascript: FindOnPage("text-to-find", true); restituisce falso;"

- Digita: invia
- Quando viene premuta, la funzione FindOnPage("text-to-find", true); passa l'id del campo con il testo, VERO

Tu, cantilenante, hai menzionato un altro attributo: vero falso . Yogo vincerà l'appuntamento, come se il pulsante fosse stato premuto da solo (ad esempio un poke o una piccola spinta). Se è in rilievo sul vіdmіnu, è trasferibile falso. Se è impresso su una barzelletta, viene trasmesso VERO.

Iniziamo prima a scrivere il codice, torniamo ad esso e discutiamolo prima, come tutti possiamo esercitarci. Totò. infatti, annoteremo il piano d_y. Inoltre, abbiamo bisogno che quando inseriamo il testo nel campo, cerchi a lato, ma non è possibile inserire tag e attributi. Totò. Meno oggetti di testo. Quanti raggiungono - vpevneniy є modi ricchi. Ma allo stesso tempo vikoristovuvatimemo regolare vyslovlyuvannya.

Otzhe, più regolare viraz shukatime meno testo successivo. digita: ">... testo...<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.

/>(.*?)Quindi sappiamo che abbiamo bisogno di alcune parti del codice, come parsitimemo e shukatimemo zbіgi con il testo, come un vvіv koristuvach. Quindi aggiungeremo stili agli oggetti che conosciamo e quindi sostituiremo il codice html con uno nuovo.

Iniziamo. Cambierò, quindi ne abbiamo bisogno.

Var input,search,pr,result,result_arr, locale_HTML, result_store; //input - il testo è accettato, che è un testo breve //cerca - la normale virase è stata derubata //pr - è possibile selezionare quella corrente prima di essa //result - selezione del testo da pr (per abilitare tag e attributi) //result_arr - analogo di pr, ma con stili per la corrispondenza //locale_HTML - original che non verrà modificato, vichista per l'azzeramento degli stili
Ho subito significativo locale_HTML il significato è indipendente da quello, mi chiedo quale sia. È necessario salvare immediatamente l'originale della pagina e la madre può ripristinare gli stili.

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // Cambia l'intero corpo (esterno)
Ok, ora creiamo una funzione, da come chiamiamo DOM. Si può immaginare che nel mezzo abbiamo due funzioni, la pelle di alcuni pulsanti spratsovu premuti in modo stantio. Aje mi conduce una ricerca o annulla lo yoga. І essere controllato da questo attributo vero falso come fai a ricordare. Inoltre, devi essere consapevole che quando chiedi di nuovo, più stili di colpa verranno azzerati. In questo rango, lo portiamo avanti:

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // Modifica l'intero corpo (Potkovkovy) funzione FindOnPage(name, status) ( if(status) ( FindOnPageBack(); FindOnPageGo(); ) //Lo vediamo)
Ok, parte della logica è implementata, la distanza sta cadendo a pezzi. È necessario convertire la parola otrimane in una serie di simboli. Benvenuto da noi shukati 1 lettera/simbolo. Zagalom I vyrіshiv tsyu mozhlivіst obmezhit 3+ caratteri.

Otzhe, priymaєmo value, come vvіv koristuvach, e, maggese da yogo dozhini, vykonuєmo sia la funzione principale della ricerca, sia la funzione di vedere prima di quell'azzeramento. Sembriamo così:

<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>Se ! stato) ( FindOnPageBack(); ) // Ottieni la vista )
Ti spiego subito il codice. L'unica cosa che non può essere chiara è l'asse di questa riga:

funzione FindOnPageBack() ( document.body.innerHTML = locale_HTML; )

Qui tutto è semplice: il metodo innerHTML giro html codice oggetto. In questo caso, sostituiamo semplicemente la corrente corpo a quello originario, che abbiamo risparmiato per un'ora di intrappolamento di tutte le parti.

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // prende l'intero corpo (Cob) da modificare funzione FindOnPage(name, status) (input = document.getElementById(name).value; //prende il valore del campo in html if(input.length)<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( function FindOnPageGo() ( search = "/"+input+"/g"; //al lavoro per caricare un pagerase normale pr = document.body.innerHTML; //sostituisci l'intero body result = pr.match(/ >(.*?)Inoltre, in questa fase, possiamo già modificare i valori principali. Ora è necessario dare il codice di stile ai cantieri necessari con la visione delle ceneri. Totò. ri-verifica del testo selezionato in un virase regolare (essenzialmente, la vibrazione con un testo virase regolare viene analizzato di nuovo con un virase regolare). Per il quale è necessario dal testo inserito aggiungere viraz regolare (distribuito), quindi vikonate il metodo, trasferendolo al tatto visivo. Qui aiuteremo il metodo valuta().

Inoltre, sostituiamo il testo e togliamo il risultato con stili che richiedono più precisi html sostitutivo del ritiro. Robimo.

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // prende l'intero corpo (Cob) da modificare funzione FindOnPage(name, status) (input = document.getElementById(name).value; //prende il valore del campo in html if(input.length)<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( function FindOnPageGo() ( search = "/"+input+"/g"; //al lavoro per caricare un pagerase normale pr = document.body.innerHTML; //sostituisci l'intero body result = pr.match(/ >(.*?)"+ingresso+""); // abbiamo bisogno degli elementi, impostiamo lo stile e salviamo in un nuovo array) for (var i = 0; i In effetti, è tutto pronto e lo script è già funzionante. Ale dodamo sche kіlka dettagli per la pittura.

1) Abbiamo provato il testo per introdurre un koristuvach. Incolla questo codice:

Input = numer.replace(/^\s+/g,""); input = numer.replace(/(1,)/g," ");
Riga successiva:

Input = document.getElementById(name).value; //valori obbligatori per i campi in html
2) Dobbiamo ricontrollare zbіgi (se zbіgіv non è stato trovato - diamo un'occhiata). Questo codice viene inserito nella funzione FindOnPageGo() dopo la modifica.

Ora tutto. Ovviamente, puoi aggiungere uno scroll al primo risultato trovato, una ricerca live ajax, e puoi migliorarlo all'infinito. Allo stesso tempo, invia una ricerca primitiva al sito. Metoyu statti è stato in grado di aiutare i neofiti, come se avessero la stessa alimentazione, come la mia. Aje non conosce una semplice soluzione già pronta.

PS: per il corretto funzionamento, è necessario ripulire il trasferimento del testo nei documenti html in luoghi tranquilli, dove il testo originale è tra i tag.

Ad esempio, vice

Bla bla bla

Bla bla bla

Quindi, come se scrivessi in modo simile, ma con una battuta vivente, condividi un fine settimana, sarai chiamato una rosa.

Radio ascolta critiche costruttive, pensieri, forse raccomandazioni.

Per giorni, dopo aver aggiunto un po' al codice, aver fatto una ricerca da vivere a lato. Quindi il cibo è noto. Il codice HTML senza cambiare. JS puoi meravigliarti.

La ricerca viene condotta per i tag della classe "place_for_live_search". Inoltre, affinché l'algoritmo analizzi il contenuto necessario, aggiungi la classe e il gioco è fatto.

Oltre al fatto che i siti Web possono selezionare gli elementi in base al loro ID, possiamo anche selezionare gli elementi in base all'attributo class.

Lo zavdannya è ancora più ampio. Se scrivo i miei script, sarò in grado di utilizzare spesso questo selettore.

Diciamo che possiamo trovare un codice a lato.

Il compito è semplice, devi selezionare un elemento dalla classe class = "elem" e lavorarci come aiuto per Javascript.

Diamo un'occhiata ad alcune opzioni, come puoi pensare.

Opzione 1: velocizza il metodo getElementsByClassName di Javascript.

Se non vuoi hackerare le vecchie librerie di componenti aggiuntivi, puoi accedere all'elemento usando il metodo getElementsByClassName("im'ya_class").

Ad esempio, puoi aggiungere la riga successiva del codice alla riga successiva del codice.

Nel risultato, poiché tutto funziona correttamente, dovremo fonderci nella finestra, in cui verrà visualizzato il testo, che si trova al centro del blocco div.

Si noti che il risultato della chiamata al metodo getElementsByClassName sarà una matrice di elementi, perché elementi della stessa classe sul lato possono essere rivestiti.

È necessario specificare alla fine della costruzione document.getElementsByClassName("elem") come visualizzare l'elemento null nell'array(). Il grafico Javascript parte da zero, non da uno.

Ma il problema con il metodo getElementsByClassName è che questo metodo non è supportato dalle versioni precedenti dei browser.

Є deyakі astuto, come puoi andare in giro, ma tse codice zayvy. Ad esempio, puoi accelerare con le normali virazi:

If(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\b"+cl+"\b"); var elem = this.getElementsByTagName( "* "), per (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

Questo è uno dei modi in cui puoi risolvere il problema. Ma, onestamente, a quanto pare, per me non è più piacevole guardare il lato con il codice, che il più delle volte è radicato in un'altra versione del problema.

Opzione 2. Per l'aiuto della libreria Jquery.

La libreria wiki di Jquery rende molto più semplice risolvere il problema della selezione degli elementi dietro il loro attributo di classe. È necessario accelerare la costruzione:

Qui elem è il nome della classe, assegnato all'elemento.

È necessario ricordare che per funzionare, la libreria Jquery deve essere attivata. Esci alla distribuzione , uno dei modi, come puoi farlo, è aggiungere la riga di codice successiva:

Affinché la biblioteca possa espandersi, può essere collegata a Internet.

Vediamo come funziona sul sedere.