JavaScript DOM

JavaScriptDOM CheatSheet

by Ninna

Table of Contents

1. Shortcuts
2. Intro
3. Math functions
4. Document functions
5. Events

Intro

1. DOM is Document Object Model- Structured respresentation of an HTML document

Math functions

1. Math.floor() - zaokruzuje broj
2. Math.random() - vraca random broj od 0-1, ako zelimo random broj neki drugi izmedju neka dva broja koristimo floor(random*broj_koji_treba). Da izuzmemo 0 samo dodamo + 1;

Document functions

1. querySelector('.name, #name, element') -vraca prvi element koji se podudara sa selektorom koji je trazen. Moze se koristiti i kao setter i kao getter.

2. getElementByID('name) - brze nego query selector

3. .textContent - dozvoljava upisivanje samo prostog teksta

    document.querySelector('id').textContent = biloSta;

4. innerHTML - dozvoljava upisivanje html elementa

    document.querySelector('id').innerHTML = '<h1>' + vrednost + '</h1>';

5. .style - za manipulisanje css-om.

    document.querySelector('id').style.property ='value' ;

6. .classList za manipulisanje klasama

   • add
   • remove
   • toggle

1.Anonimne funkcije su funkcije koje nemaju ime i ne mozemo da koristimo iznova i one se nalaze uglavnom unutar event listenera kao drugi argument. Ako zelimo da ih opet koristimo ispisemo ih van listenera i pozovemo ih bez () unutar njega.

Events

1. Obavestavaju kod da se nesto desilo sa stranicom. Trigeruju se sa klikom, skrolom, klikom dugmeta itd. Koristimo event listener da sprovedemo neku akciju u odnosu na to koji se event desio. Event listener ceka da se desi neka radnja da bi se pokrenuo.

1.Sintaksa

 document.querySelector('id').addEventListener('event', function(){
   //do something
 }) ;