Štruktúra dokumentu

HTML si môžete predstaviť ako zbierku vnorených políčok. Značkám sa páčia a obsahujú ďalšie značky, ktoré naopak obsahujú značky alebo text. Tu je príklad dokumentu z predchádzajúcej kapitoly:

Moja domovská stránka

Ahoj, som Mariyn a toto je moja domovská stránka.

A tiež som napísal knihu! Prečítajte si to tu.

Táto stránka má nasledujúcu štruktúru:

Štruktúra údajov, ktorú prehliadač používa na reprezentáciu dokumentu, odráža jeho tvar. Pre každé pole existuje objekt, s ktorým môžeme komunikovať a dozvedieť sa o ňom rôzne údaje - akú značku predstavuje, aké polia a text obsahuje. Toto zobrazenie sa nazýva Document Object Model alebo skrátene DOM.

K týmto objektom môžeme pristupovať prostredníctvom dokumentu globálnej premennej. Jeho vlastnosť documentElement odkazuje na objekt, ktorý predstavuje značku. Poskytuje tiež vlastnosti hlavy a tela, ktoré obsahujú objekty pre zodpovedajúce prvky.

Stromy

Vráťte sa k stromom syntaxe v kapitole 11. Ich štruktúra je nápadne podobná štruktúre dokumentu prehliadača. Každý uzol môže odkazovať na iné uzly, každá z vetiev môže mať svoju vlastnú vetvu. Táto štruktúra je typickým príkladom vnorených štruktúr, kde prvky obsahujú podobné subelementy.

Dátovú štruktúru nazývame strom, keď je vidličkový, nemá cykly (uzol sa nemôže sám obsahovať) a má jeden výrazný „koreň“. V prípade DOM je koreňom dokument.documentElement.

Stromy sú vo výpočtovej vede bežné. Okrem toho, že predstavujú rekurzívne štruktúry, ako napríklad dokument HTML alebo programy, sa často používajú na prácu s triedenými súbormi údajov, pretože prvky je zvyčajne jednoduchšie nájsť alebo vložiť do triedeného stromu ako do triedeného jednorozmerného poľa.

Typický strom má rôzne uzly. Vajcový syntaxový strom mal premenné, hodnoty a aplikácie. Aplikácie mali vždy podradené vetvy a premennými a hodnotami boli „listy“, tj uzly bez podradených vetiev.

DOM je rovnaký. Uzly pre pravidelné prvky reprezentujúce HTML tagy, definujte štruktúru dokumentu. Môžu mať podradené uzly. Príkladom takéhoto uzla je document.body. Niektoré z týchto podradených uzlov môžu byť listy - napríklad text alebo komentáre (v HTML sa komentáre píšu medzi znaky).

Každý objekt uzla DOM má vlastnosť nodeType, ktorá obsahuje číselný kód, ktorý identifikuje typ uzla. Pre bežné prvky sa rovná 1, ktorá je tiež definovaná ako konštantná vlastnosť document.ELEMENT_NODE. Textové uzly predstavujúce útržky textu ho majú rovné 3 (document.TEXT_NODE). Pripomienky majú 8 (document.COMMENT_NODE).

To znamená, že toto je ďalší spôsob, ako graficky znázorniť strom dokumentov:

Listy sú textové uzly a šípky ukazujú vzťah otec-dieťa medzi uzlami.

Štandardné

Použitie záhadných čísel na reprezentáciu typu uzla nie je prístupom v štýle JavaScript. Neskôr sa stretneme s ďalšími časťami rozhrania DOM, ktoré pôsobia tiež cudzo a trápne. Dôvodom je, že DOM bol navrhnutý nielen pre JavaScript. Snaží sa definovať jazykovo-agnostické rozhranie, ktoré je možné použiť v iných systémoch-nielen HTML, ale XML, čo je univerzálny formát údajov so syntaxou podobnou HTML.

Ukazuje sa, že je to nepohodlné. Aj keď sú štandardy veľmi užitočná vec, v našom prípade výhoda jazykovej nezávislosti nie je taká užitočná. Je lepšie mať rozhranie, ktoré je vhodné pre jazyk, ktorý používate, ako rozhranie, ktoré je známe v rôznych jazykoch.

Ak chcete ukázať nepríjemnú jazykovú integráciu, zvážte vlastnosť childNodes, ktorú majú uzly DOM. Obsahuje objekt podobný poľu s vlastnosťou dĺžka a číslovanými vlastnosťami na prístup k podradeným uzlom. Ale toto je inštancia typu NodeList, nie skutočné pole, takže nemá metódy ako forEach.

Problémy sú aj so zle premyslenými systémami. Nemôžete napríklad vytvoriť nový uzol a okamžite doň pridať vlastnosti alebo podradené uzly. Najprv ho musíte vytvoriť, potom pridať deti po jednom a nakoniec priradiť vlastnosti jednu po druhej pomocou vedľajších účinkov. Prísny kód DOM je dlhý, škaredý a opakuje sa.

Tieto problémy však nie sú smrteľné. JavaScript vám umožňuje vytvárať abstrakcie. Ľahko sa píše sekundárne funkcie ktoré vám umožnia vyjadriť operácie jasnejšie a stručnejšie. Vo všeobecnosti tieto druhy nástrojov poskytujú mnoho knižníc zameraných na programovanie pre prehliadač.

Prechod stromov

Uzly DOM obsahujú mnoho odkazov na susedov. Toto je znázornené na diagrame:

Aj keď je tu zobrazená iba jedna referencia z každého typu, každý uzol má vlastnosť parentNode, ktorá ukazuje na jej nadradený uzol. Každý uzol prvku (typ 1) má tiež vlastnosť childNodes, ktorá ukazuje na objekt podobný poľu obsahujúci jeho podradené uzly.

Teoreticky môžete prejsť na akúkoľvek časť stromu pomocou iba týchto odkazov. JavaScript nám však poskytuje mnoho ďalších pomocných odkazov. Vlastnosti firstChild a lastChild poukazujú na prvé a posledné deti alebo sú pre tie uzly, ktoré nemajú žiadne deti, nulové. previousSibling a nextSibling ukazujú na susedné uzly - uzly rovnakého rodiča ako aktuálny uzol, ale umiestnené bezprostredne pred alebo za aktuálnym uzlom v zozname. Prvý uzol bude mať vlastnosť previousSibling null a posledný nextSibling bude mať hodnotu null.

Pri riešení takýchto vnorených štruktúr prídu vhod rekurzívne funkcie. Nasledujúci text hľadá v dokumente textové uzly obsahujúce daný reťazec, a vráti hodnotu true, keď nájde:

Funkcia talksAbout (uzol, reťazec) (ak (node.nodeType == document.ELEMENT_NODE) ​​(pre (var i = 0; i< node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) >-1; )) console.log (talksAbout (document.body, "books")); // → pravda

Vlastnosti textového uzla nodeValue obsahuje riadok textu.

Nájdite položky

Často je užitočné prechádzať týmito prepojeniami medzi rodičmi, deťmi a súrodencami a prechádzať celým dokumentom. Ak však v dokumente potrebujeme konkrétny uzol, je veľmi nepohodlné ho prejsť, začínajúc dokumentom.body a hlúpo iterujúc po pevne zakódovanej ceste. Pritom robíme predpoklady o presnej štruktúre dokumentu do programu - čo možno budeme chcieť neskôr zmeniť. Ďalším komplikujúcim faktorom je, že textové uzly sú vytvárané dokonca aj pre medzery medzi uzlami. V dokumente z príkladu nemá tag body tri deti (h1 a dve p), ale až sedem: tieto tri plus medzery pred nimi, za nimi a medzi nimi.

Var odkaz = document.body.getElementsByTagName ("a"); console.log (link.href);

Všetky uzly prvkov majú metódu getElementsByTagName, ktorá zhromažďuje všetky prvky s danou značkou, ktoré pochádzajú (priamy alebo nepriamy potomok) z tohto uzla, a vracia ju ako objekt podobný poľu.

Ak chcete nájsť konkrétny uzol, môžete preň nastaviť atribút id a použiť metódu document.getElementById.

Moja pštrosia Gertrúda:

Treťou metódou je getElementsByClassName, ktorý podobne ako getElementsByTagName prehľadá obsah uzla prvku a vráti všetky prvky obsahujúce zadaný reťazec vo svojej triede.

Zmeňte dokument

Takmer všetko v štruktúre DOM je možné zmeniť. Uzly prvkov majú súbor metód, ktoré sa používajú na ich úpravu. Metóda removeChild odstráni zadaný podradený uzol. Na pridanie uzla môžete použiť príkaz appendChild, ktorý pridá uzol na koniec zoznamu, alebo príkaz insertBefore, ktorý pridá uzol odovzdaný v prvom argumente predtým, ako uzol prejde v druhom argumente.

Uzol môže existovať iba na jednom mieste v dokumente. Vložením odseku „tri“ pred odsek „jeden“ ho skutočne odstránime z konca zoznamu a vložením na začiatok a dostaneme „tri / jeden / dva“. Všetky operácie na vloženie uzla povedú k jeho zmiznutiu z aktuálnej polohy (ak ju mal).

Metóda replaceChild sa používa na nahradenie jedného podradeného uzla iným. Na to sú potrebné dva uzly: nový a ten, ktorý je potrebné vymeniť. Uzol, ktorý sa má nahradiť, musí byť potomkom prvku, ktorého metódu voláme. AkoCheckCheck, tak InsertBefore očakávajte, že ako prvý argument dostanete nový uzol.

Vytváranie uzlov

V nasledujúcom príklade musíme vytvoriť skript, ktorý nahradí všetky obrázky (tagy) v dokumente textom obsiahnutým v ich atribúte „alt“, ktorý nastaví alternatívnu textovú reprezentáciu obrázku.

Aby ste to urobili, musíte obrázky nielen vymazať, ale tiež pridať nové textové uzly, ktoré ich nahradia. Na tento účel používame metódu document.createTextNode.

to v .

Vymeňte

Vzhľadom na reťazec nám createTextNode poskytne uzol (text) DOM typu 3, ktorý môžeme vložiť do dokumentu a zobraziť ho na obrazovke.

Obrazová slučka začína na konci zoznamu uzlov. Dôvodom je, že zoznam uzlov vrátených metódou getElementsByTagName (alebo vlastnosťou childNodes) je neustále aktualizovaný, keď sa dokument zmení. Ak by sme začali od začiatku, vymazanie prvého obrázku by spôsobilo, že zoznam stratí prvý prvok a počas druhého priechodu slučky, keď i je 1, by sa zastavil, pretože dĺžka zoznamu by mala stať sa tiež 1.

Ak potrebujete pracovať s pevným zoznamom uzlov namiesto živého, môžete ho previesť na skutočné pole pomocou metódy slice.

Var arrayishish = (0: "jeden", 1: "dva", dĺžka: 2); var real = Array.prototype.slice.call (arrayish, 0); real.forEach (function (elt) (console.log (elt);)); // → jeden // dva

Na vytvorenie uzlov prvkov (typ 1) môžete použiť document.createElement. Metóda preberie názov značky a vráti nový prázdny uzol daného typu. Nasledujúci príklad definuje nástroj elt, ktorý vytvorí uzol prvku a ostatné argumenty použije ako podriadené. Táto funkcia sa potom používa na pridanie ďalších informácií k cenovej ponuke.

Žiadnu knihu nie je možné dokončiť. Pri práci na ňom sa naučíme dosť na to, aby sme ho považovali za nezrelého bezprostredne potom, čo sa od neho rozptyľujeme.

Atribúty

K niektorým atribútovým prvkom, ako je napríklad href odkazov, je možné pristupovať prostredníctvom rovnomennej vlastnosti objektu. To je možné pre obmedzený počet bežne používaných štandardných atribútov.

HTML vám však umožňuje priradiť uzlom akékoľvek atribúty. Je to užitočné, pretože umožňuje uložiť Ďalšie informácie v dokumente. Ak prídete s vlastnými názvami atribútov, nebudú medzi vlastnosťami uzla prvku. Na prácu s nimi budete namiesto toho musieť použiť metódy getAttribute a setAttribute.

Štartovací kód 00000000.

Mačka má štyri nohy.

Odporúčam vložiť pred údaje vynájdených atribútov „data-“, aby ste sa uistili, že nie sú v rozpore s inými. Ako jednoduchý príklad napíšeme zvýraznenie syntaxe, ktoré hľadá značky

(„Predformátovaný“, predformátovaný - používa sa na kód a obyčajný text) s atribútom data -language (language) a je dosť hrubý, keď sa snaží zvýrazniť kľúčové slová v jazyku.
Funkcia . slice (pos, match.index); node.appendChild (document.createTextNode (pred)); var strong = document.createElement ("strong"); strong.appendChild (document.createTextNode (match)); node.appendChild ( silné); pos = kľúčové slová.lastIndex;) var after = text.slice (pos); node.appendChild (document.createTextNode (after));)
Funkcia highlightCode prevezme uzol 
A pravidelný (so zapnutým globálnym nastavením), ktorý zodpovedá kľúčovému slovu programovacieho jazyka, ktoré obsahuje prvok.
Vlastnosť textContent sa používa na získanie celého textu uzla a potom sa nastaví na prázdny reťazec, ktorý uzol vymaže.  Zopakujeme všetky výskyty výrazu kľúčového slova, pridáme medzi ne text vo forme jednoduchých textových uzlov a pridáme zodpovedajúci text (kľúčové slová) a uzatvoríme ich do prvkov. (tučné písmo).
Opakovaním všetkých prvkov môžeme automaticky zvýrazniť celý kód stránky 
Ktoré majú atribút jazyka údajov, a volanie na každý highlightCode so správnym regulárnym výrazom.
Var languages ​​= (javascript: / \ b (funkcia | návrat | var) \ b / g / * ... atď * /);  funkcia highlightAllCode () (var pres = document.body.getElementsByTagName ("pre"); for (var i = 0; i< pres.length; i++) {
 var pre = pres[i];
 var lang = pre.getAttribute("data-language");
 if (languages.hasOwnProperty(lang))
 highlightCode(pre, languages);
 }
}
 
Tu je príklad:
 
A tu je, identifikačná funkcia:
ID funkcie (x) (návrat x;)

 
Existuje jeden bežne používaný atribút, trieda, ktorého názov je v jazyku JavaScript kľúčovým slovom.  Z historických dôvodov, keď staršie implementácie JavaScriptu nevedeli, ako zaobchádzať s názvami vlastností, ktoré zodpovedajú kľúčovým slovám, je tento atribút k dispozícii prostredníctvom vlastnosti s názvom className.  Prístup k nemu získate aj pomocou skutočného mena „trieda“ prostredníctvom metód getAttribute a setAttribute.
Rozloženie
Možno ste si všimli, že rôzne druhy prvkov sú umiestnené odlišne.  Niektorým sa páčia odseky 
A hlavičky 
roztiahnite na celú šírku dokumentu a zobrazte ho na oddelených riadkoch.  Takéto prvky sa nazývajú blokové prvky.  Iní majú radi odkazy alebo tučný text sa zobrazia v rovnakom riadku s okolitým textom.  Hovorí sa im inline. 
Pre každý dokument môžu prehliadače vytvoriť usporiadanie prvkov, rozloženie, v ktorom bude mať každý veľkosť a umiestnenie na základe svojho typu a obsahu.  Toto rozloženie sa potom použije na vytvorenie vzhľadu dokumentu.
Veľkosť a polohu prvku je možné zistiť pomocou JavaScriptu.  Vlastnosti offsetWidth a offsetHeight udávajú veľkosť v pixeloch, ktorú prvok zaberie.  Pixel je základnou mernou jednotkou v prehliadačoch a zvyčajne zodpovedá veľkosti minimálneho bodu obrazovky.  Podobne, clientWidth a clientHeight udávajú veľkosť vnútra prvku bez orámovania (alebo, ako niektorí hovoria, orámovania).
 
Som v krabici

 
Najúčinnejší spôsob, ako zistiť presnú polohu prvku na obrazovke, je metóda getBoundingClientRect.  Vráti objekt s vlastnosťami hore, dole, vľavo a vpravo, ktoré obsahujú polohu prvku vzhľadom na ľavý horný roh obrazovky v pixeloch.  Ak potrebujete získať tieto údaje pre celý dokument, musíte pridať aktuálnu pozíciu posúvania, ktorá je obsiahnutá v globálnych premenných pageXOffset a pageYOffset.
Analýza dokumentu je náročná úloha.  V záujme výkonu motory prehliadačov dokument neprebudujú pri každej zmene, ale čakajú tak dlho.  ako sa dá.  Keď program JavaScript, ktorý upravoval dokument, skončí, prehliadač bude musieť vykresliť nové rozloženie stránky, aby mohol zobraziť upravený dokument na obrazovke.  Keď program požaduje polohu alebo veľkosť niečoho tak, že načíta vlastnosti typu offsetHeight alebo zavolá príkaz getBoundingClientRect, na zaistenie správnych informácií je potrebné vypočítať aj rozloženie.
Program, ktorý pravidelne číta rozloženie DOM a upravuje DOM, núti prehliadač mnohokrát prepočítať rozloženie, a preto pobeží pomaly.  V nasledujúcom príklade existujú dva rôzne programy, ktoré nakreslia čiaru o šírke X znakov 2 000 pixelov a zmerajú dobu prevádzky.
 



 
Štýly
Videli sme, že rôzne prvky HTML sa správajú odlišne.  Niektoré sú zobrazené ako bloky, iné sú vložené.  Niektoré pridávajú vizuálny štýl - napríklad urobia text tučným a urobia text podčiarknutý a modrý. 
Vzhľad obrázku v značke alebo skutočnosť, že odkaz v značke po kliknutí otvorí novú stránku, je spojený s typom prvku.  Základné štýly priradené k prvku, ako napríklad farba textu alebo podčiarknutie, však môžeme zmeniť.  Tu je príklad použitia vlastnosti style:
Zelený odkaz
 
Atribút style môže obsahovať jednu alebo viac deklarácií vlastností (farba), za ktorými nasleduje dvojbodka a hodnota.  V prípade viacnásobných vyhlásení sú oddelené bodkočiarkou: „farba: červená;  hranica: žiadna “.
Veľa vecí sa dá zmeniť pomocou štýlov.  Vlastnosť display napríklad určuje, či je prvok zobrazený v blokovom alebo vloženom formáte.
Zobrazený text vstavaný,
ako blok a nie je vôbec vidieť.
 
Prvok bloku je zobrazený v samostatnom bloku a posledný nie je vôbec viditeľný - zobrazenie: žiadny zakáže zobrazenie prvkov.  Týmto spôsobom môžete skryť prvky.  To sa zvyčajne dáva prednosť úplné odstránenie sú z dokumentu, pretože v prípade potreby je jednoduchšie ich neskôr ukázať.
Kód JavaScript môže priamo pôsobiť na štýl prvku prostredníctvom vlastnosti štýlu uzla.  Obsahuje objekt, ktorý má vlastnosti pre všetky vlastnosti štýlu.  Ich hodnoty sú reťazce, do ktorých môžeme napísať, aby sme zmenili nejaký aspekt štýlu prvku.
 
Krása

 
Niektoré názvy vlastností štýlu obsahujú spojovníky, napríklad rodina písem.  Pretože by bolo nepohodlné s nimi pracovať v JavaScripte (museli by ste napísať štýl ["font-family"]), názvy vlastností v objekte štýlu sú napísané bez spojovníka a namiesto toho sa zobrazujú veľkými písmenami: style.fontFamily
Kaskádové štýly
Stylingový systém v HTML sa nazýva CSS (Cascading Style Sheets).  Šablóna štýlov je sada štýlov v dokumente.  Je možné ho zapísať do značky: 


Teraz silný text značkyšikmé a sivé.
 
Kaskádovanie znamená, že na vytvorenie konečného štýlu dokumentu sú kombinované viaceré pravidlá.  V príklade je predvolený štýl pre, ktorý robí text tučným, prekrytý pravidlom zo značky, pomocou ktorej sa pridá štýl písma a farba.
Keď je hodnota vlastnosti určená viac ako jedným pravidlom, majú prednosť neskoršie pravidlá.  Ak by štýl textu obsahoval pravidlo font-weight: normal, ktoré je v rozpore s predvoleným štýlom, potom by bol text normálny, nie tučný.  Štýly, ktoré sú aplikované na uzol prostredníctvom atribútu style, majú najvyššiu prioritu.
V CSS je možné zadať viac ako len názov značiek.  Pravidlo pre .abc platí pre všetky prvky, ktoré majú špecifikovanú triedu „abc“.  Pravidlo pre #xyz platí pre prvok s atribútom id „xyz“ (atribúty id musia byť v dokumente jedinečné).
Subtílne (farba: sivá; veľkosť písma: 80%;) #hlavička (pozadie: modrá; farba: biela;) / * p prvky so zadanými triedami a a b a id určené ako hlavné * / pab # hlavné (okraj-spodok) : 20 pixelov;)
Priorita najnovších pravidiel funguje, ak majú pravidlá rovnakú zrnitosť.  Je to miera, ako presne popisuje vhodné prvky, určená počtom a druhom požadovaných aspektov prvkov.  Pravidlo pre p.a je napríklad podrobnejšie ako pravidlo pre p alebo iba .a a bude mať prednosť.
Položka p> a (...) sa vzťahuje na všetky značky, ktoré sa nachádzajú v značke a sú jej priamymi potomkami. 
p a (...) platí aj pre všetky tagy v rámci neho bez ohľadu na to, či ide o priameho potomka alebo nie.
Selektory dopytov
V tejto knihe nebudeme veľa používať štýly.  Pochopenie ich fungovania je pre programovanie prehliadača zásadné, ale na úplné vysvetlenie všetkých ich vlastností by boli potrebné 2-3 knihy. hlavný dôvod oboznámenosť s nimi a so syntaxou selektorov (záznamy, ktoré určujú, na ktoré prvky sa pravidlá vzťahujú) - na nájdenie prvkov DOM môžeme použiť rovnaký účinný minijazyk. 
Metóda querySelectorAll, ktorá existuje na objekte dokumentu aj na prvkoch uzla, prevezme selektorový reťazec a vráti objekt podobný poľu obsahujúci všetky prvky, ktoré s ním zodpovedajú.

Milujem búrku na začiatku Smieť
Keď prvé jarné hromy
Ako keby frflanie a hrať sa
Hrmí na modrej oblohe.

 
Na rozdiel od metód, ako je getElementsByTagName, objekt vrátený serverom querySelectorAll nie je interaktívny.  Ak dokument zmeníte, nezmení sa.
Metóda querySelector (bez All) funguje podobne.  Je to potrebné, ak potrebujete jednu konkrétnu položku.  Vráti iba prvý zápas, alebo nulu, ak neexistuje zhoda.
Poloha a animácia
Vlastnosť polohy štýlov výrazne ovplyvňuje polohu prvkov.  Štandardne je statický, čo znamená, že prvok je v dokumente v normálnej polohe.  Keď je to relatívne, prvok stále zaberá miesto, ale teraz je možné použiť vlastnosti horného a ľavého okraja na kompenzáciu zo svojej normálnej polohy.  Keď je absolútny, prvok sa odstráni z bežného „toku“ dokumentu - to znamená, že nezaberá miesto a môže sa prekrývať.  Navyše jeho ľavé a horné vlastnosti je možné použiť na umiestnenie absolútne vzhľadom na ľavý horný roh najbližšieho obklopujúceho prvku, ktorého poloha nie je statická.  A ak taký prvok neexistuje, je umiestnený relatívne k dokumentu. 
Môžeme to použiť na vytváranie animácií.  Nasledujúci dokument ukazuje obrázok mačky pohybujúcej sa v elipse.
 

 


 
Obrázok je vycentrovaný na stránku a nastavený do polohy: relatívne.  Neustále aktualizujeme horné a ľavé vlastnosti obrázka, aby sa pohyboval.
Skript používa requestAnimationFrame na vyvolanie funkcie animácie vždy, keď je prehliadač pripravený na prekreslenie obrazovky.  Samotná funkcia animácie opäť zavolá requestAnimationFrame, aby naplánovala nasledujúcu aktualizáciu.  Keď je okno prehliadača (alebo záložka) aktívne, bude to mať za následok aktualizácie približne 60 -krát za sekundu, čo bude mať za následok pekne vyzerajúcu animáciu.
Ak by sme len aktualizovali DOM v slučke, stránka by zamrzla a nebolo by nič vidieť.  Prehliadače stránku neobnovujú počas JavaScript funguje, a v súčasnosti nepovoľujú prácu so stránkou.  Preto potrebujeme requestAnimationFrame - hovorí prehliadaču, že sme zatiaľ hotoví, a môže vykonávať svoje vlastné činnosti v prehliadači, napríklad aktualizovať obrazovku a reagovať na požiadavky používateľov.
Našej animačnej funkcii prechádza aktuálny čas pomocou argumentov, ktoré porovnáva s predchádzajúcou (premenná lastTime), aby bol pohyb mačky rovnomerný a animácia bežala hladko.  Ak by sme ho v každom kroku len posunuli o daný interval, pohyb by sa zakopol, keby napríklad počítač načítala iná úloha.
Kruhový pohyb sa vykonáva pomocou trigonometrických funkcií Math.cos a Math.sin.  Stručne ich popíšem pre tých, ktorí ich nepoznajú, keďže ich budeme v budúcnosti potrebovať.
Math.cos a Math.sin sú užitočné, keď potrebujete nájsť body v kruhu so stredom (0, 0) a s polomerom jeden.  Obe funkcie interpretujú svoj argument ako polohu v kruhu, kde 0 označuje bod na pravom okraji kruhu, potom proti smeru hodinových ručičiek, kým nás cesta 2π (asi 6,28) neprevedie okolo kruhu.  Math.cos vypočíta súradnicu x bodu, ktorý je našou aktuálnou polohou v kruhu, a Math.sin dá súradnicu y.  Povolené sú aj polohy (alebo uhly) väčšie ako 2π alebo menšie ako 0 - zákruty sa opakujú tak, že a + 2π znamená rovnaký uhol ako a.
Na výpočet súradníc použite sínus a kosínus
Animácia mačky ukladá počítadlo uhlov pre aktuálny uhol natočenia animácie a zvyšuje ho úmerne k uplynutému času pri každom vyvolaní funkcie animácie.  Tento uhol sa používa na výpočet aktuálnej polohy obrazového prvku.  Horný štýl sa vypočíta pomocou Math.sin a vynásobí 20, čo je zvislý polomer našej elipsy.  Štýl vľavo je vypočítaný cez Math.cos a vynásobený 200, takže šírka elipsy je oveľa väčšia ako výška. 
Štýly zvyčajne vyžadujú jednotky.  V našom prípade musíme k číslu pridať px, aby sme prehliadaču vysvetlili, čo počítame v pixeloch (a nie v centimetroch, ems alebo iných jednotkách).  Je ľahké zabudnúť.  Použitie čísel bez jednotiek bude mať za následok ignorovanie štýlu - pokiaľ číslo nie je 0, čo nezávisí od jednotiek.
Výsledok
Programy JavaScript môžu skúmať a upravovať dokument aktuálne zobrazovaný prehliadačom prostredníctvom štruktúry nazývanej DOM.  Táto štruktúra údajov predstavuje model dokumentu prehliadača a program JavaScript ho môže upraviť tak, aby zmenil viditeľný dokument.  DOM je usporiadaný ako strom s prvkami hierarchicky usporiadanými podľa štruktúry dokumentu.  Objekty prvkov majú vlastnosti typu parentNode a childNodes, ktoré sa používajú na navigáciu v strome. 
Vzhľad dokumentu je možné zmeniť pomocou štýlov, a to buď priamym pridaním štýlov do uzlov, alebo definovaním pravidiel pre akékoľvek uzly.  Štýly majú mnoho vlastností, ako je farba alebo zobrazenie.  JavaScript môže ovplyvniť štýl prvku priamo prostredníctvom jeho vlastnosti štýlu.
Cvičenia
Stavanie stola
Tabuľky sme vytvorili z obyčajného textu v kapitole 6. HTML uľahčuje vytváranie tabuliek.  Tabuľka v HTML je vytvorená pomocou nasledujúcich značiek: 
 

 

 
názov
 
výška
 
krajina
 
 

 
Kilimandžáro
 
5895
 
Tanzánia
 

 
Značka obsahuje značku pre každý riadok.  Do neho môžeme umiestniť bunky: buď bunky hlavičky, alebo bežné bunky.
Rovnaké údaje, ktoré sme použili v kapitole 6, sú opäť k dispozícii v premennej HORY.
Napíšte funkciu buildTable, ktorá pomocou radu objektov s rovnakými vlastnosťami vytvorí štruktúru DOM, ktorá predstavuje tabuľku.  Tabuľka musí mať riadok so hlavičkami, kde sú názvy vlastností zabalené do prvkov, a musí existovať jeden riadok na objekt z poľa, kde sú jeho vlastnosti zabalené do prvkov.  Tu príde vhod funkcia Object.keys, ktorá vráti pole obsahujúce názvy vlastností objektu.
Keď ste oboznámení so základmi, zarovnajte číselné bunky doprava zmenou ich vlastnosti style.textAlign na „vpravo“.



 
Prvky podľa názvu značky
Metóda getElementsByTagName vracia všetky podradené prvky s daným názvom značky.  Vytvorte zo svojej verzie tejto metódy pravidelnú funkciu, ktorá preberá uzol a reťazec (názov značky) a vráti pole obsahujúce všetky zostupné uzly s daným názvom značky. 
Ak chcete zistiť názov značky prvku, použite vlastnosť tagName.  Upozorňujeme, že týmto sa vráti názov značky do veľké písmená...  Použite reťazcové metódy toLowerCase alebo toUpperCase.
 
Hlavička s prvkom span vo vnútri.
Odsek s jedným alebo dvoma prvkami.

 
Mačací klobúk
Rozšírte animáciu mačky tak, aby mačka aj jej klobúk lietali na opačných stranách elipsy. 
Alebo nechajte klobúk lietať okolo mačky.  Alebo vymyslite niečo iné zaujímavé.
Na zjednodušenie polohovania mnohých predmetov je vhodné prepnúť na absolútne určovanie polohy.  Potom bude horný a ľavý text považovaný za relatívny k ľavému hornému rohu dokumentu.  Aby ste sa vyhli používaniu záporných súradníc, môžete k hodnotám polohy pridať určený počet pixelov.
 


Vývojári zvyčajne používajú jQuery, keď potrebujú niečo urobiť s DOM.  Takmer akúkoľvek manipuláciu s DOM je však možné vykonať v čistom JavaScripte pomocou jeho rozhrania DOM API.
Pozrime sa podrobnejšie na toto API:

Na konci napíšete svoju vlastnú jednoduchú knižnicu DOM, ktorú je možné použiť v akomkoľvek projekte.
Požiadavky DOM
Dotazy DOM sa robia pomocou metódy .querySelector (), ktorá ako argument berie ľubovoľný selektor CSS.
Const myElement = document.querySelector ("# foo> div.bar")
Vráti prvú zodpovedajúcu položku.  Prípadne môžete skontrolovať, či sa prvok zhoduje s voličom:
MyElement.matches ("div.bar") === true
Ak chcete získať všetky prvky, ktoré zodpovedajú selektoru, použite nasledujúcu konštrukciu:
Const myElements = document.querySelectorAll (". Bar")
Ak vieš ktoré rodičovský prvok musí byť referencovaný, môžete namiesto celého kódu prehľadávať jeho podriadené položky:
Const myChildElemet = myElement.querySelector ("vstup") // Namiesto: // document.querySelector ("# foo> vstup div.bar")
Vynára sa otázka: prečo potom používať iné, menej pohodlné metódy, ako je .getElementsByTagName ()?  Je tu malý problém - výstup výstupu .querySelector () sa neaktualizuje a keď pridáme nový prvok (pozri), nezmení sa.
Const elements1 = document.querySelectorAll ("div") const elements2 = document.getElementsByTagName ("div") const newElement = document.createElement ("div") document.body.appendChild (newElement) elements1.length === elements2.length // nepravda
Tiež querySelectorAll () zhromažďuje všetko do jedného zoznamu, čo spôsobuje, že nie je veľmi efektívny.
Ako môžem pracovať so zoznamami?
Navyše .querySelectorAll () má dve malé nuansy.  Nemôžete len volať metódy k výsledkom a očakávať, že sa uplatnia na každý z nich (ako ste si mohli zvyknúť pri jQuery).  V každom prípade budete musieť iterovať všetky prvky v slučke.  Za druhé, vrátený objekt je zoznam prvkov, nie pole.  Metódy poľa preto nebudú fungovať.  Samozrejme, existujú metódy pre zoznamy, niečo ako .forEach (), ale, bohužiaľ, nie sú vhodné pre všetky prípady.  Je preto lepšie previesť zoznam na pole:
// Using Array.from () Array.from (myElements) .forEach (doSomethingWithEachElement) // Or Array prototype (pre ES6) Array.prototype.forEach.call (myElements, doSomethingWithEachElement) // Simpler: .forEach.call (myElements , doSomethingWithEachElement)
Každý prvok má určité vlastnosti, ktoré odkazujú na „rodinu“.
MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling
Pretože rozhranie Element je zdedené z rozhrania Node, sú k dispozícii aj nasledujúce vlastnosti:
MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement
Prvé vlastnosti sa týkajú prvku, zatiaľ čo druhé (s výnimkou .parentElement) môžu byť zoznamy akéhokoľvek typu prvku.  Podľa toho môžete skontrolovať typ prvku:
MyElement.firstChild.nodeType === 3 // tento prvok bude textový uzol
Pridávanie tried a atribútov
Je veľmi jednoduché pridať novú triedu:
MyElement.classList.add ("foo") myElement.classList.remove ("bar") myElement.classList.toggle ("baz")
Pridanie vlastnosti k prvku je úplne rovnaké ako pre akýkoľvek objekt:
// Získať hodnotu atribútu const value = myElement.value // Nastaviť atribút ako vlastnosť prvku myElement.value = "(! LANG: foo"
// Для установки нескольких свойств используйте.Object.assign()
Object.assign(myElement, {
 value: "foo",
 id: "bar"
})
// Удаление атрибута
myElement.value = null
!}
Môžete použiť metódy .getAttibute (), .setAttribute () a .removeAttribute ().  Okamžite zmenia atribúty HTML prvku (na rozdiel od vlastností DOM), čo spôsobí prekreslenie prehliadača (všetky zmeny môžete vidieť preskúmaním prvku pomocou nástrojov pre vývojárov v prehliadači).  Takéto prekreslenia vyžadujú nielen viac zdrojov ako nastavenie vlastností DOM, ale môžu tiež viesť k neočakávaným chybám.
Obvykle sa používajú pre prvky, ktoré nemajú zodpovedajúce vlastnosti DOM, ako napríklad colspan.  Alebo ak je ich použitie skutočne nevyhnutné, napríklad pre vlastnosti HTML v dedičnosti (pozri).
Pridanie štýlov CSS
Pridávajú sa rovnakým spôsobom ako ostatné vlastnosti:
MyElement.style.marginLeft = "2em"
Niektoré špecifické vlastnosti je možné nastaviť pomocou .style, ale ak chcete získať hodnoty po niektorých výpočtoch, je lepšie použiť window.getComputedStyle ().  Táto metóda vezme prvok a vráti CSSStyleDeclaration obsahujúci štýly samotného prvku a jeho rodiča:
Window.getComputedStyle (myElement) .getPropertyValue ("margin-left")
Zmena DOM
Môžete presúvať prvky:
// Pridajte prvok1 ako posledné dieťa prvku element2 element1.appendChild (element2) // Element2 vložte ako potomok elementu1 pred element3 element1.insertBefore (element2, element3)
Ak sa nechcete presúvať, ale potrebujete vložiť kópiu, použite:
// Vytvorte klon const myElementClone = myElement.cloneNode () myParentElement.appendChild (myElementClone)
Metóda .cloneNode () berie ako argument booleovskú hodnotu, ak je pravdivá, klonujú sa aj podradené prvky.
Môžete samozrejme vytvárať nové prvky:
Const myNewElement = document.createElement ("div") const myNewTextNode = document.createTextNode ("nejaký text")
Potom ich vložte tak, ako je to znázornené vyššie.  Priamo nebudete môcť odstrániť prvok, ale môžete to urobiť prostredníctvom nadradeného prvku:
MyParentElement.removeChild (myElement)
Žiadosť môžete podať aj nepriamo:
MyElement.parentNode.removeChild (myElement)
Metódy pre prvky
Každý prvok má vlastnosti ako .innerHTML a .textContent, obsahuje kód HTML a podľa toho aj samotný text.  Nasledujúci príklad mení obsah prvku:
// Zmena HTML myElement.innerHTML = ` 

 
Nový obsah
píp bum píp bum

 
`// // Týmto sa odstráni obsah myElement.innerHTML = null // Pridať do HTML myElement.innerHTML + =` pokračovať v čítaní ... 

Zmena HTML je v skutočnosti zlý nápad, pretože stratí všetky zmeny, ktoré boli vykonané predtým, a tiež preťažuje obsluhy udalostí.  Je lepšie použiť túto metódu iba tak, že úplne zahodíte všetok HTML a nahradíte ho kópiou zo servera.  Páči sa ti to:
Const link = document.createElement ("a") const text = document.createTextNode ("pokračovať v čítaní ...") const hr = document.createElement ("hr") link.href = "foo.html" link.appendChild ( text) myElement.appendChild (odkaz) myElement.appendChild (hr)
To by však znamenalo dve prekreslenia v prehliadači, zatiaľ čo .innerHTML by malo za následok iba jedno.  Môžete to obísť tak, že najskôr pridáte všetko do DocumentFragment a potom pridáte požadovaný fragment:
Const fragment = document.createDocumentFragment () fragment.appendChild (text) fragment.appendChild (hr) myElement.appendChild (fragment)
Obsluha udalostí
Jeden z najjednoduchších ovládačov:
MyElement.onclick = funkcia onclick (udalosť) (console.log (event.type + "dostal padáka"))
Ale spravidla by sa tomu malo vyhnúť.  Tu je .onclick vlastnosťou prvku a teoreticky ho môžete zmeniť, ale ďalšie ovládače nemôžete pridávať pomocou inej funkcie, ktorá odkazuje na starú.
Na pridanie obslužných programov je lepšie použiť .addEventListener ().  Na to sú potrebné tri argumenty: typ udalosti, funkcia, ktorá sa bude volať vždy, keď sa spustí, a konfiguračný objekt (k tomu sa ešte vrátime).
MyElement.addEventListener ("klik", funkcia (udalosť) (console.log (event.type + "dostal padáka"))) myElement.addEventListener ("klik", funkcia (udalosť) (console.log (event.type + " opäť ma vyhodili “)))
Vlastnosť event.target odkazuje na prvok, ku ktorému je udalosť pripojená.
A takto získate prístup k všetkým vlastnostiam:
// Vlastnosť `forms` je pole obsahujúce odkazy na všetky formuláre const myForm = document.forms const myInputElements = myForm.querySelectorAll (" input ") Array.from (myInputElements) .forEach (el => (el.addEventListener (" zmeniť ", funkcia (udalosť) (console.log (event.target.value))))))
Predchádzanie predvoleným akciám
Na tento účel sa používa metóda .preventDefault (), ktorá blokuje štandardné akcie.  Ak napríklad autorizácia na strane klienta nebola úspešná, bude blokovať odosielanie formulárov:
MyForm.addEventListener ("odoslať", funkcia (udalosť) (const name = this.querySelector ("# name") if (name.value === "(! LANG: Donald Duck") {
 alert("You gotta be kidding!")
 event.preventDefault()
 }
})
!}
Metóda .stopPropagation () pomôže, ak máte k dieťaťu pripojený konkrétny obslužný program udalostí a k rodičovi druhý obslužný program tej istej udalosti.
Ako už bolo spomenuté, metóda .addEventListener () preberá voliteľný tretí argument, ktorým je konfiguračný objekt.  Tento objekt musí obsahovať niektorú z nasledujúcich boolovských vlastností (v predvolenom nastavení všetky falošné):
zachytenie: udalosť bude k tomuto prvku pripojená pred akýmkoľvek iným prvkom nižšie v DOM;
jedenkrát: udalosť je možné pripnúť iba raz;
pasívny: event.preventDefault () bude ignorovaný (výnimka počas chyby).
Najbežnejšou vlastnosťou je .capture a je tak bežný, že existuje krátky spôsob, ako si ho zapísať: namiesto toho, aby ste ho odovzdali v konfiguračnom objekte, zadajte jeho hodnotu tu:
MyElement.addEventListener (typ, poslucháč, true)
Obslužné rutiny sa odstránia pomocou metódy .removeEventListener (), ktorá obsahuje dva argumenty: typ udalosti a odkaz na odstránenie obslužného programu.  Vlastnosť Once môže byť napríklad implementovaná takto:
MyElement.addEventListener („zmena“, poslucháč funkcií (udalosť) (console.log (event.type + „bol spustený na“ + toto) this.removeEventListener („zmena“, poslucháč)))
Dedičnosť
Povedzme, že máte prvok a chcete pridať obslužný program udalostí pre všetky jeho deti.  Potom by ste sa museli medzi nimi pretočiť pomocou metódy myForm.querySelectorAll („vstup“), ako je uvedené vyššie.  Môžete však jednoducho pridať prvky do formulára a skontrolovať ich obsah pomocou event.target.
MyForm.addEventListener ("zmena", funkcia (udalosť) (const target = event.target if (target.matches ("input")) (console.log (target.value))))
A ďalšou výhodou tejto metódy je, že sa obsluha automaticky naviaže na nové podradené prvky.
Animácia
Animáciu najľahšie pridáte pomocou CSS s vlastnosťou prechodu.  Ale pre väčšiu flexibilitu (napríklad pre hru) je vhodnejší JavaScript.
Volanie metódy window.setTimeout () do ukončenia animácie nie je dobrý nápad, pretože vaša aplikácia môže zamrznúť, najmä na mobilných zariadeniach.  Na uloženie všetkých zmien do ďalšieho prekreslenia je lepšie použiť okno.requestAnimationFrame ().  Berie funkciu ako argument, ktorý naopak dostane časovú pečiatku:
Const start = window.performance.now () const duration = 2000 window.requestAnimationFrame (function fadeIn (now)) (const progress = now - start myElement.style.opacity = progress / duration if (progress< duration) {
 window.requestAnimationFrame(fadeIn)
 }
}
Takýmto spôsobom je dosiahnutá veľmi plynulá animácia.  Mark Brown vo svojom článku rozoberá túto tému.
Píšete svoju knižnicu
Skutočnosť, že v DOM musíte prvky neustále iterovať, aby ste na nich mohli vykonávať akékoľvek operácie, sa môže zdať dosť únavná v porovnaní so syntaxou jQuery $ („. Foo“). Css ((farba: „červená“)).  Prečo však nenapísať niekoľko vlastných metód, ktoré vám túto úlohu uľahčia?
Const $ = funkcia $ (selektor, kontext = dokument) (const elements = Array.from (context.querySelectorAll (selector)) return (elements, html (newHtml) (this.elements.forEach (element => (element.innerHTML = newHtml)) return this), css (newCss) (this.elements.forEach (element => (Object.assign (element.style, newCss))) return this), on (event, handler, options) (this.elements .forEach (element => (element.addEventListener (event, handler, options))) return this)))
Pri otváraní akéhokoľvek dokumentu HTML prehliadač predbežne analyzuje jeho obsah a na základe tohto rozboru vytvorí objektový model dokumentu HTML alebo kratšie DOM.
DOM pozostáva z hierarchicky vnorených objektov vnorených do seba, ktoré sa nazývajú uzly...  Každý uzol v štruktúre predstavuje prvok HTML na stránke.
Pomocou DOM môžete komunikovať ( čítať, upravovať, mazať) s obsahom dokumentov HTML zo skriptov.
Nasleduje dokument HTML a kód DOM, ktoré by prehliadač vytvoril na základe tohto kódu:
 




HTML DOM.
Ahoj všetci.


Všetky obdĺžniky zobrazené na obrázku sú objekty (alebo uzly).  Uzly rôznych typ.
Uzol dokumentu je označený červenou farbou.  Akýkoľvek prístup k doméne DOM musí začínať volaním tohto uzla.
Značené zelenou farbou uzly prvkov...  Pre každý prvok HTML na stránke prehliadač vytvorí zodpovedajúci uzol prvku.
Obsah prvkov je uložený v priečinku textové uzly...  Textové uzly sú v našom diagrame označené modrou farbou.
Pre každý atribút prvku HTML a atribútový uzol...  Uzol atribútu je na diagrame označený ružovou farbou.
Poznámka: majte na pamäti, že text je vždy uložený v textových uzloch a nie je vlastnosťou prvku.  Títo.  Aby ste sa mohli odvolávať na obsah prvku HTML, musíte sa odvolať na vlastnosť jeho textového uzla.
Vzťahy medzi uzlami
Uzly v štruktúre objektov sú navzájom prepojené.  Existuje niekoľko technických termínov na opis vzťahov medzi uzlami:
Nadradený uzol ( rodičovský uzol)
- rodičovský uzol vo vzťahu k predmetnému objektu je uzol, v ktorom je príslušný objekt vnorený.  V našom diagrame vo vzťahu k uzlom 
a 
 je rodič.  Pre uzol 
 
 
 
Toto je dokument HTML
 
Príklad jednoduché text.
 

Reprezentácia tohto dokumentu DOM je znázornená na nasledujúcom diagrame:
Pre tých, ktorí ešte nepoznajú stromové štruktúry v počítačovom programovaní, je užitočné vedieť, že terminológia pre ich popis bola požičaná z rodokmeňov.  Uzol nachádzajúci sa priamo nad týmto uzlom sa nazýva rodič vo vzťahu k tomuto uzlu.  Uzly umiestnené o jednu úroveň pod iným uzlom sú dcérska spoločnosť vo vzťahu k tomuto uzlu.  Nazývajú sa uzly, ktoré sú na rovnakej úrovni a majú rovnakého rodiča ošetrovateľstvo...  Uzly, ktoré sú ľubovoľným počtom úrovní pod iným uzlom, sú jeho potomkami.  Rodičia, starí rodičia a všetky ostatné uzly umiestnené nad týmto uzlom sú jeho predkami.
Každý obdĺžnik v tomto diagrame je uzlom dokumentu, ktorý je reprezentovaný objektom Uzol...  Upozorňujeme, že na obrázku sú tri odlišné typy uzly.  Koreňom stromu je uzol Dokument, ktorý predstavuje celý dokument.  Uzly predstavujúce prvky HTML sú uzly prvkov a uzly predstavujúce text sú uzly textu.  Dokument, Element a Text sú podtriedy Uzla.  Document a Element sú dve najdôležitejšie triedy v DOM.
Typ uzla a jeho podtypy tvoria hierarchiu typov znázornenú na nasledujúcom diagrame.  Všimnite si formálne rozdiely medzi generickými typmi dokumentov a prvkov a typmi HTMLDocument a HTMLElement.  Typ dokumentu predstavuje dokument HTML a XML a trieda Element predstavuje prvok tohto dokumentu.  Podtriedy HTMLDocument a HTMLElement predstavujú konkrétne dokument HTML a jeho prvky:

V tomto diagrame je tiež potrebné poznamenať, že existuje mnoho podtypov triedy HTMLElement, ktoré predstavujú konkrétne typy prvkov HTML.  Každý z nich definuje vlastnosti JavaScriptu, ktoré odrážajú atribúty HTML konkrétneho prvku alebo skupiny prvkov.  Niektoré z týchto špecifických tried definujú ďalšie vlastnosti alebo metódy, ktoré neodrážajú syntax značkovacieho jazyka HTML.
Výber prvkov dokumentu
Väčšina klientskych programov JavaScript funguje tak či onak na manipulácii s prvkami dokumentu.  Tieto programy môžu za behu používať globálnu premennú dokumentu, ktorá odkazuje na objekt Document.  Aby však bolo možné vykonávať akúkoľvek manipuláciu s prvkami v dokumente, program musí nejakým spôsobom načítať alebo vybrať objekty Element, ktoré na tieto prvky v dokumente odkazujú.  DOM definuje niekoľko spôsobov výberu prvkov.  Môžete vybrať prvok alebo prvky dokumentu:
hodnotou atribútu id;
 
hodnotou atribútu name;
 
podľa názvu značky;
 
podľa názvu triedy alebo tried CSS;
 
zhodou okolností s určitým Selektor CSS.
Všetky tieto selekčné techniky sú popísané v nasledujúcich podsekciách.
Výber prvkov podľa hodnoty atribútu id
Všetky prvky HTML majú atribúty id.  Hodnota tohto atribútu musí byť v dokumente jedinečná - žiadne dva prvky v tom istom dokumente nesmú mať rovnakú hodnotu atribútu id.  Pomocou metódy môžete vybrať prvok podľa jedinečnej hodnoty atribútu id getElementById () Objekt dokumentu:
Var section1 = document.getElementById ("section1");
Toto je najjednoduchší a najbežnejší spôsob výberu položiek.  Ak skript potrebuje byť schopný manipulovať s konkrétnou sadou prvkov dokumentu, priraďte hodnoty k atribútom id týchto prvkov a použite schopnosť ich hľadať podľa týchto hodnôt.
Vo verziách internet Explorer pod IE8 metóda getElementById () hľadá hodnoty atribútov id bez rozlišovania malých a veľkých písmen a tiež vracia prvky, ktoré sa zhodujú s hodnotou atribútu name.
Výber prvkov podľa hodnoty atribútu name
Atribút názov HTML bol pôvodne určený na pomenovanie prvkov formulára a hodnota tohto atribútu bola použitá pri odoslaní údajov formulára na server.  Rovnako ako atribút id, aj atribút name priradí názov prvku.  Na rozdiel od id však hodnota atribútu name nemusí byť jedinečná: niekoľko prvkov môže mať rovnaký názov naraz, čo je celkom bežné pri použití prepínačov a začiarkavacích políčok vo formulároch.  Na rozdiel od id je atribút name povolený iba pre určité prvky HTML vrátane formulárov, prvkov formulára a prvkov.