JS snippets u radu sa DOM-om

document.addEventListener("DOMContentLoaded", function() {
  // neki kod
}, false);

window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
  });

Izbor svih elemenata koji zadovoljavaju selektor

document.querySelectorAll("CSSselektor");

Primer

var elementi =document.querySelectorAll('#roditelj p'); // Vraća: "Array like" objekat

var nizElemenata = Array.prototype.slice.call(elementi); //Prebacivanje u niz
nizElemenata.forEach(function(current, index){
  console.log(current);
});

Izbor samo prvog elementa koji zadovoljava selektor

Ukoliko želimo da sa plain JS vratimo samo prvi element koji zadovoljava kriterijum selektora možemo da koristimo:

document.querySelector('selector');

Sintaksa za starije browsere

Ukoliko postoji potreba da se zadovolje browseri koji su stariji od IE 11, onda je potrebno da se koriste sledeći JS selektori:

//za selektovanje elementa preko klase:
document.getElementsByClassName('foo');

//za selektovanje tag elementa
document.getElementsByTagName('a');

//za selektovanje elementa preko ID atributa
document.getElementById('foo'); 

document.querySelector('#izabrani').parentNode;  //Vraća HTML elemenat koji je "roditelj" selektovanog elementa

document.querySelector('#roditelj').children; //Vraća "Array like" objekat čija su svojstva svi HTML elementi koji su njegova deca

document.querySelector('#roditelj').firstElementChild;

document.querySelector('#roditelj').lastElementChild;

document.querySelector("#izabrani").previousElementSibling; // Vraća paragraf id="prviParagraf"

document.querySelector("#izabrani").nextElementSibling; // Vraća paragraf id="drugiParagraf"

U ovom primeru funkcija nadjiRodjake pravi novi niz od dece roditelja koji zadovoljavaju uslov. Dodaje elemente u niz ako ne postoji filter ili ako filter vraća neki element, sve dok postoji sledeći rodjak.

function nadjiRodjake(el) {
    var nizRodjaci = [];
    el = el.parentNode.firstElementChild;
    do {
      nizRodjaci.push(el);
    } while (el = el.nextElementSibling);
    return nizRodjaci;
}

var izabrani = document.querySelector('#izabrani');
var sviRodjaci = nadjiRodjake(izabrani);  // Vraća niz sa svim rodjacima trazenog elementa

function filtrirajRodjake(el, filterTag) {
    var nizRodjaci = [];
    var el = el.parentNode.firstElementChild;
    var proveraElemenata = function (el, filterTag) {
      return el.nodeName.toLowerCase() == filterTag;    // Vraća: TRUE ili FALSE
    }
    do {
      if (!proveraElemenata || proveraElemenata(el,filterTag)){  // Ubacuje el. koji zadovaljavaju proveru u niz
        nizRodjaci.push(el);
      }
    } while (el = el.nextElementSibling);
    return nizRodjaci;
}

var izabrani = document.querySelector('#izabrani');
var filtriraniRodjaci = filtrirajRodjake(izabrani, "span");  // Vraća: sve  rodjake

var el = document.createElement('div');

//Element kome se dodaje novi element
var roditelj = document.querySelector('#roditelj');

//Kreiranje novog elementa
var newDiv = document.createElement('div');
var newP = document.createElement('p');
var newText = document.createTextNode('Hello World!');

//dodavanje elemenata kao dete
newP.appendChild(newText);
newDiv.appendChild(newP);
roditelj.appendChild(newDiv);

var el = document.querySelector('#izabrani');
var roditelj = document.querySelector('#roditelj');

var klon = el.cloneNode(true);
roditelj.appendChild(klon);

Ukoliko je parametar “true” pravi se “deep copy” tj. kopija sa svim atributima i “child” elementima, dok ako se izabere “false” kopira se bez “child” elemenata.

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

Ako je referenceNode null onda se ubacuje na kraju liste svih childNodes (isto kao appendChild).

Primer dodavanja elementa u listu

var noviElement = document.createElement("p");
var tekstElementa = document.createTextNode("Tekst unutar novog elementa");
noviElement.appendChild(tekstElementa);

var roditelj = document.getElementById("roditelj");
var refElement = roditelj.children[2];

roditelj.insertBefore(noviElement, refElement);  //Ubacuje novi element ispred span-a sa id="izabrani" 

Iako u JavaScript-u postoji insertBefore, medjutim NE POSTOJI insertAfter, stoga je potrebno da se pribegne “lukavstvu”:

function insertAfter(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

Primer dodavanja elementa u listu

var noviElement = document.createElement('div');
noviElement.innerHTML = '<p>Hello World!</p>';
var refNode = document.querySelector('div.before');

insertAfter(noviElement, refNode);

var izabrani = document.querySelector("#izabrani");
izabrani.parentNode.removeChild(izabrani);

var el = document.querySelector('#izabrani');
el.innerHTML = '';

Array.prototype.forEach.call(document.querySelectorAll('#izabrani'), (el) => {
  const obavijajuciDiv = document.createElement('div');
  obavijajuciDiv.className = 'omotac';
  el.parentNode.insertBefore(obavijajuciDiv, el);
  el.parentNode.removeChild(el);
  obavijajuciDiv.appendChild(el);
});

el.parentNode.replaceChild(newEl, el)

Primer

//Izbor elementa koji se zamenjuje
var el = document.querySelector('#izabrani');

//Kreiranje novog elementa koji će da zauzme mesto
var newEl = document.createElement('p');
newEl.innerHTML = '<strong>Hello World!</strong>';

//Zamena elemenata:
el.parentNode.replaceChild(newEl, el);

var el = document.querySelector('p');
el.matches('#izabrani');

Pošto "getComputedStyle()" metoda vraća vrednosti svih svojstava u vidu "CSSStyleDeclaration" objekata, potrebno je koristi još i metodu getPropertyValue:

window.getComputedStyle(el,null).getPropertyValue("CSSsvojstvo")

Primer

var el = document.getElementById('izabrani');

var styleValue = window.getComputedStyle(el,null).getPropertyValue("font-size");
console.log(styleValue);  //Vraća vrednost uvek u px

Definisanje jednog svojstva

el.style.CSSsvosjstvo = "vrednost";

Primer

var el = document.getElementById('izabrani');
el.style.fontSize = "50px";

Definisanje više svojstava odjednom

function css(el, styles) {
    for (var property in styles)
        el.style[property] = styles[property];
} 

Primer

var el = document.getElementById('izabrani');
css(el, { background: 'red', 'font-size': '25px' });

NAPOMENA:
Metode show() i toggle() zahtevaju i drugi atribut koji može biti: "block", "flex" "inline-block", "inline" ...

function hide(el) {
    el.style.display = 'none';
}

function show(el, vrednostDisplay) {
    el.style.display = vrednostDisplay || "block";
}

function toggle(el, vrednostDisplay) {
    var display = (window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle).display;
    if (display == 'none') el.style.display = vrednostDisplay || "block";;
    else el.style.display = 'none';
}

Primer

<div id="roditelj">
	<span id="prviSpan">Tekst u prvom span-u</span>
	<p id="prviParafraf">Tekst u prvom "p" tag-u</p>
	<span id="izabrani">Tekst u izabranom span-u</span>
	<p id="drugiParafraf">Tekst u drugom "p" tag-u</p>
	<span id="drugiSpan">Tekst u drugom spanu</span>
</div>

<button id="btn">Toggle</button>

<script>
   var el = document.querySelector("#izabrani");
   var btn =document.querySelector("#btn");

   btn.addEventListener("click", function(){
       toggle(el, "block");
   })
</script>