Pri práci s DOM potrebuje developer neustále rýchly prístup k vlastnostiam a metódam jednotlivých objektov. Z tohto pohľadu nastala pred časom v nástroji Developer Tools v prehliadači Google Chrome zmena, ktorá spôsobuje, že pri práci s uzlami sa namiesto vlastností a metód vypisuje daný uzol.Na jednu stranu je to rýchly prístup k získaným dátam, na druhú stranu pre tých čo si zvykli na pôvodné zobrazenie môže byť táto funkcionalita nežiadúca. Mne osobne tento prístup vyhovuje, no keďže poznám objekt console, hneď som skúsil zadať príkaz pre pôvodné zobrazenie. | | <nav id="display"> | | <ul> | | <li>1</li> | | <li>2</li> | | <li>3</li> | | <li>4</li> | | </ul> | | </nav> |
|
| | var Node = document.getElementById("display"); | | console.log(Node); |
|
Obrázok: Výsledok výstupu v Google Chrome.Obrázok: Výsledok výstupu v Internet Exploreri.Pre zobrazenie podrobností o objekte stačí do konzoly Internet Explorera zadať iba názov objektu (v tomto prípade Node) a pre výpis všetkých vlastností a metód kliknúť na odkaz Pridať na sledovanie. Obrázok: Podrobný výpis vlastností a metód uzla v Internet Exploreri.Zobrazenie uzla, tak ako ho zobrazuje v súčasnosti Google Chrome, je možné cez zápis do konzoly Node.outerHTML. No vráťme sa späť k Developer Tools pre Google Chrome. Ak chce developer výpis vlastností a metód uzla, musí aplikovať metódu dir(). Príklad: Výpis vlastností a metód uzla. | | var Node = document.getElementById("display"); | | console.dir(Node); |
|
Obrázok: Výsledok výstupu v Google Chrome.Metóda dir() funguje nielen v Google Chrome, ale je ju možné bez problémov používať aj v Internet Exploreri. Rozdiel je v tom, že kým Google Chrome podporuje zbaľovanie a rozbaľovanie vnorených objektov, Internet Explorer vypíše fixný zoznam. Pre zbaľovanie a rozbaľovanie objektov je potrebné použiť sledovanie objektu. Objekt console ponúka aj ďalšie metódy, ktoré stojí za to spoznať. Do budúcna plánujem napísať článok ako postupovať, ak prehliadač objekt console nepodporuje a ako si vytvoriť vlastnú konzolu.
