Uvod
U ovome članku sam pokušao da sakupim JavaScript isečke koda (eng. code snippets), koji mogu biti korisni u svakodnevnom radu sa DOM-om. Skoro svi snippet-i su napisani u dve verzije, koristeći samo plain JavaScript ili uz pomoć jQuery biblioteke.
Document Ready
U sledećim primerima je prikazan “event listener” koji čeka trenutak kada je DOM učitan da bi JavScript mogao sa njim da manipuliše. Isto bi se dobilo kada bi JavaScript kod stavili na kraj body-ja tj. ispred samog zatvarajućeg taga “body”.
|
1 2 3 |
document.addEventListener("DOMContentLoaded", function() { // neki kod }, false); |
|
1 2 3 |
$(document).ready(function() { // neki kod }); |
|
1 2 3 |
jQuery(document).ready(function ($) { // neki kod }); |
Document Load
Dogadjaj load se “okida” tek kad se učita cela stranica sa svim CSS stilovima, slikama…
|
1 2 3 |
window.addEventListener("load", function(event) { console.log("All resources finished loading!"); }); |
|
1 2 3 |
$(window).on('load', function(){ console.log("All resources finished loading!"); }); |
Selektovanje DOM elemenata
Selektovanje preko CSS selektora
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
Izbor svih elemenata koji zadovoljavaju selektor
|
1 |
document.querySelectorAll("CSSselektor"); |
Primer
|
1 2 3 4 5 6 |
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:
|
1 |
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:
|
1 2 3 4 5 6 7 8 |
//za selektovanje elementa preko klase: document.getElementsByClassName('foo'); //za selektovanje tag elementa document.getElementsByTagName('a'); //za selektovanje elementa preko ID atributa document.getElementById('foo'); |
|
1 |
$("CSSselector"); |
Primer
|
1 2 3 4 5 6 |
var elementi =$("p"); //Vraća objekat var nizElemenata = Array.prototype.slice.call(elementi); //Prebacivanje u niz nizElemenata.forEach(function(current, index){ console.log(current); }); |
Selektovanje roditelja
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
|
1 |
document.querySelector('#izabrani').parentNode; //Vraća HTML elemenat koji je "roditelj" selektovanog elementa |
|
1 |
$("#izabrani").parent(); |
Selektovanje sve dece
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
Naredne naredbe vraćaju niz elemenata sa svom decom izabranog selektora. U nrednim primerima je potrevon selektovati sve li elemente:
|
1 |
document.querySelector('#roditelj').children; //Vraća "Array like" objekat čija su svojstva svi HTML elementi koji su njegova deca |
|
1 |
document.querySelector('#roditelj').childNodes; |
NAPOMENA:
Treba naglasiti da “childNodes” vraća kao dete elementa čak i prazan prostor izmedju HTML tagova (kao prazan text node)
|
1 |
$('#roditelj').children(); //Vraća jQuery objekat čija su svojstva svi HTML elementi koji su njegova deca |
Selektovanje prvog deteta
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
Ukoliko je želite prvo dete onda mogu da se koriste sledeće naredbe:
|
1 |
document.querySelector('#roditelj').firstElementChild; |
|
1 |
document.querySelector('#roditelj').firstChild; |
NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i prvog elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.
|
1 |
$('#roditelj').children().first(); //Vraća |
Selektovanje poslednjeg deteta
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
|
1 |
document.querySelector('#roditelj').lastElementChild; |
|
1 |
document.querySelector('#roditelj').lastChild; |
NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.
|
1 |
$('#roditelj').children().last(); |
Selektovanje prethodnog rodjaka
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
|
1 |
document.querySelector("#izabrani").previousElementSibling; // Vraća paragraf id="prviParagraf" |
|
1 |
document.querySelector("#izabrani").previousSibling; |
NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.
|
1 |
$("#izabrani").prev(); // Vraća paragraf id="prviParagraf" |
Selektovanje narednog rodjaka
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
|
1 |
document.querySelector("#izabrani").nextElementSibling; // Vraća paragraf id="drugiParagraf" |
|
1 |
document.querySelector("#izabrani").nextSibling; |
NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.
|
1 |
$("#izabrani").next(); // Vraća paragraf id="drugiParagraf" |
Selektovanje svih rodjaka
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
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 |
|
1 |
$("#izabrani").siblings(); |
Filtriranje selektovanih elemenata
Redukovanje elemenata koji zadovoljavaju targetirani selektor ukoliko “prodju” test filtera. Test filtera može biti drugi selektor a najčešće je filter funkcija:
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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 <span> rodjake |
|
1 2 3 |
$( "span" ) .filter( "#izabrani" ) .css( "background", "red" ); |
ili koristeći funkciju
|
1 2 3 4 5 |
$( "span" ) .filter(function( indexElementaNiza ) { return $( this ).attr( "id" ) === "izabrani"; }) .css( "background", "red" ); |
Manipulacija DOM elementima
Pravljenje elementa
|
1 |
var el = document.createElement('div'); |
|
1 |
var el = $('div'); |
Dodavanje elementa kao deteta
Dodavanje novog elementa kao poslednjeg deteta kod svakog selektovanog elementa.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//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); |
|
1 2 3 4 5 |
//Element kome se dodaje novi element var roditelj = document.querySelector('#roditelj'); //dodavanje novog sadrzaja kao dete roditelj.innerHTML += '<div><p>Hello World!</p></div>'; |
NAPOMENA:
Obratiti pažnju da se uz innerHTML koristi operator dodavanja i dodeljivanja “+=”, jer ako se koristi samo operator dedeljivanja “=” onda se pri menjanju DOM-a gaze svi elementi unutar elementa “roditelj” i pravi se novi modifikovani DOM, a ako postoje Event handlers koji su bili zakačeni za “stari DOM”, sada NE POSTOJE!
I varijanta
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//Element kome se dodaje novi element var roditelj = $('#roditelj'); //Kreiranje novog elementa var newDiv = $('<div>'); var newP = $('<p>'); var newText = $.parseHTML('Hello World!'); //dodavanje elemenata kao dete newP.append(newText); newDiv.append(newP); roditelj.append(<div>); |
II varijanta:
|
1 |
$('#roditelj').append("<div><p>Hello World!</p></div>") |
Kloniranje elementa
|
1 2 3 4 5 |
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.
|
1 2 |
var izabrani = $( "#izabrani" ).clone(); izabrani.appendTo( "#roditelj" ); |
Dodavanje pre elementa
|
1 |
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
|
1 2 3 4 5 6 7 8 |
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" |
|
1 2 |
//Dodaj pre izabranog elementa nešto $('#izabrani').before("<div>Hello World!</div>"); |
|
1 2 |
//Dodaj nešto pre izabranog elementa $("<div>Hello World!</div>").insertBefore('#izabrani'); |
Dodavanje posle elementa
Iako u JavaScript-u postoji insertBefore, medjutim NE POSTOJI insertAfter, stoga je potrebno da se pribegne “lukavstvu”:
|
1 2 3 |
function insertAfter(el, referenceNode) { referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling); } |
Primer dodavanja elementa u listu
|
1 2 3 4 5 |
var noviElement = document.createElement('div'); noviElement.innerHTML = '<p>Hello World!</p>'; var refNode = document.querySelector('div.before'); insertAfter(noviElement, refNode); |
|
1 2 |
//Dodaj nešto posle izabranog elementa $("<div>Hello World!</div>").insertAfter('#izabrani'); |
|
1 2 |
//Dodaj posle izabranog elementa nešto $('#izabrani').after("<div>Hello World!</div>"); |
Brisanje elementa
|
1 2 |
var izabrani = document.querySelector("#izabrani"); izabrani.parentNode.removeChild(izabrani); |
|
1 |
$('span').remove(); |
Brise SVE span elemente
|
1 |
$('span').remove('#izabrani'); |
Brise samo span elemente sa ID=”izabrani”
Brisanje sve dece elementa
|
1 2 |
var el = document.querySelector('#izabrani'); el.innerHTML = ''; |
|
1 |
$( "#izabrani" ).empty(); |
Obavijanje elementa sa elementom
HTML
|
1 |
<span id="izabrani">Tekst u izabranom span-u</span> |
JavaScript
|
1 2 3 4 5 6 7 |
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); }); |
|
1 |
$('#izabrani').wrap('<div class="omotac"></div>'); |
Rezultat
|
1 2 3 |
<div class="omotac"> <span id="izabrani">3. Tekst u izabranom span-u </span> </div> |
Zamena elementa drugim
HTML
|
1 |
<span id="izabrani">Tekst u izabranom span-u</span> |
JavaScript
|
1 |
el.parentNode.replaceChild(newEl, el) |
Primer
|
1 2 3 4 5 6 7 8 9 |
//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); |
|
1 |
$('#izabrani').replaceWith('<p><strong>Hello World!</strong></p>'); |
Provera da li postoji selektor (is)
|
1 2 |
var el = document.querySelector('p'); el.matches('#izabrani'); |
|
1 |
$(li).is(":first-child"); |
Primer
U narednim snippet-ima se dobija booleanova vrednost, stoga ako je odgovor “true” onda su jednaki selektori. Uglavnom se koristi uz “if”.
|
1 2 3 4 5 6 7 8 9 |
$("li").click(function () { if ($(this).is(":first-child")) { $("p").text("This is list item 1"); } else if ($(this).is(".middle")) { $("p").text("This is middle class list"); } else if ($(this).is(":contains('item 5')")) { $("p").text("It's 5th list"); } }); |
Rad sa sadržajem DOM-a
Dobijanje sadržaja (teksta) unutar elementa
|
1 2 3 |
<div id="roditelj"> <span id="prviSpan">Tekst <strong>u prvom</strong> span-u </span> </div> |
Naredni snippet-i vraćaju tekst odredjenog elementa:
|
1 2 3 4 5 6 7 8 9 10 11 |
var el = document.getElementById("prviSpan"); // Vraća samo text (ignoriše HTML formatiranje npr.<strong>) i prilično je brza var tekst = el.textContent; // Vraća: Tekst u prvom span-u // Vraća tekst sa HTML tagovima (malo je sporije jer mora da parsira HTML) var tekst = el.innerHTML; // Vraća: Tekst <strong>u prvom</strong> span-u // Vraća tekst ali CSS utiče na izlaz (ukoliko je visibility: hidden ne prikazuje tekst), // uveo je IE i nije standardizovano sa W3C pa nije bas preporucljivo var tekst = el.innerText; |
|
1 2 3 4 5 6 7 |
var el = $("#prviSpan"); // Vraća samo tekst var text = el.text(); // Vraća: Tekst u prvom span-u // Vraća tekst sa HTML tagovima var text = el.html() //Vraća: Tekst <strong>u prvom</strong> span-u |
Ubacivanje ili zamena sadržaja (teksta) unutar elementa
|
1 2 3 |
<div id="roditelj"> <span id="prviSpan">Tekst <strong>u prvom</strong> span-u </span> </div> |
Naredni snippet-i menjaju postojeći tekst sa novim:
|
1 2 3 4 5 6 7 8 9 10 11 |
var el = document.getElementById("prviSpan"); // Ubacije i menja postojeći tekst el.textContent= "Novi tekst"; // Ubacuje tekst čak i sa HTML (malo je sporije jer parsira HTML) el.innerHTML= "Novi <strong>tekst</strong>"; // Ubacuje tekst čak ali CSS utiče na izlaz (ukoliko je visibility: hidden ne prikazuje tekst), // uveo je IE i nije standardizovano sa W3C pa nije bas preporucljivo el.innerText= "Novi tekst"; |
|
1 2 3 4 5 6 7 |
var el = $("#prviSpan"); // Ubacuje i menja posrotjeći tekst el.text("Novi tekst"); // Ubacuje tekst čak i sa HTML el.html("Novi <strong>tekst</strong>"); |
outerHTML elementa
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
Za HTML prezentaciju selektovanog elementa koristimo:
|
1 2 |
var outerHTML = document.querySelector("#izabrani").outerHTML; console.log(outerHTML); //Vraća: "<span id='izabrani'>Tekst u izabranom span-u</span>" |
Jedan od retkih slučajeva kada jQuery nema direktnu metodu za neki problem a Plain JS ga ima, stoga se rešava zaobilazno (u “privremenom div elementu klonira naš element).
|
1 |
console.log($('<div>').append($("#izabrani").clone()).html()); //Vraća "<span id='izabrani'>Tekst u izabranom span-u</span>" |
Vrednost unutar “input” ili “textarea”
|
1 |
document.querySelector('#nekiInput').value; |
Primer
|
1 2 |
<input id="text-unos" value="pocetna vrednost" type="text" /> <p id="ispis"></p> |
JavaScript
|
1 2 3 4 5 6 7 8 9 |
var elUnos = document.querySelector("#text-unos"); var ispis = document.querySelector("#ispis"); var pocetnaVrednost = elUnos.value; ispis.textContent= pocetnaVrednost; elUnos.addEventListener("keyup", function(){ var vrednostUnosa = elUnos.value ; ispis.textContent= vrednostUnosa; }, false); |
|
1 |
$('selectori').val(); |
Primer
|
1 2 |
<input id="text-unos" value="pocetna vrednost" type="text" /> <p id="ispis"></p> |
JavaScript
|
1 2 3 4 5 6 7 |
// Dobijanja vrednosti inputa i njegovo štampanje u paragraf sa id="ispis" $( "#text-unos" ) .keyup(); // Okidač eventa koji kupi default-ni value inputa .keyup(function() { var value = $( this ).val(); $( "#ispis" ).text( value ); }) |
Radio unput
HTML
|
1 2 3 4 5 6 |
<form id="radioForm"> <label>Prvi izbor: <input type="radio" name="radioBtn" value="Prvi" /></label> <label>Drugi izbor: <input type="radio" name="radioBtn" value="Drugi"/></label> <label>Treci izbor: <input type="radio" name="radioBtn" value="Treci" /></label> <label>Cetvrti izbor: <input type="radio" name="radioBtn" value="Cetvrti" /></label> </form> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
var elRadioInput = document.forms['radioForm'].elements['radioBtn']; var len = elRadioInput.length; for (var i=0; i <= len; i++) { elRadioInput[i].onclick = function(e) { var indexRadioBtn = Array.prototype.indexOf.call(elRadioInput, e.currentTarget) +1; // Umesto "e.currentTarget.value" može da se koristi i "this.value" var vrednost = e.currentTarget.value; console.log("Selektovan je " + indexRadioBtn + ' radioBtn ' + " čija je vrednost " + vrednost); }; } |
|
1 2 3 4 5 6 7 8 9 10 |
var elRadioInput = $('#radioForm input'); var len = elRadioInput.length; for (var i=0; i <= len; i++) { elRadioInput[i].onclick = function(e) { var indexRadioBtn = elRadioInput.index(e.currentTarget) + 1; // Umesto "e.currentTarget.value" može da se koristi i "this.value" var vrednost = e.currentTarget.value; console.log("Selektovan je " + indexRadioBtn + ' radioBtn' + " čija je vrednost " + vrednost); }; } |
Select
HTML
|
1 2 3 4 5 |
<select id="pozicija"> <option value="direktor">Direktor</option> <option value="poslovodja">Poslovodja</option> <option value="radnik">Radnik</option> </select> |
JavaScript
|
1 2 3 4 5 6 7 |
var select = document.getElementById("pozicija"); var izborPozicije = "direktor"; select.addEventListener("change", function(){ izborPozicije = select.options[select.selectedIndex].value; console.log(izborPozicije); }) |
|
1 2 3 4 5 6 |
var izborPozicije = "direktor"; $("#pozicija").change(function(){ izborPozicije = $("#pozicija option:selected").val(); console.log(izborPozicije); }) |
Rad sa HTML atributima
Dobijanje vrednosti HTML atributa
Atributi: href, title, alt, i value imaju svoje “lično” svojstvo za pristup, stoga im se može lako pristupiti direktno preko njih:
|
1 2 3 |
var unos = document.querySelector('selector').value; var link = document.querySelector('selector').href; // Vraća: full path http://example.com/deo/clanak.html var title = document.querySelector('selector').title; |
HTML
|
1 2 3 |
<form> <input type="checkbox" name="vehicle" value="Bike" checked> I have a bike<br> </form> |
Ostalim atributima koji nemaju svoju “ličnu” metodu možemo pristupiti na sledeći način:
|
1 |
el.getAttribute('name'); // Vraca vrednost atributa "vehicle" |
|
1 |
$('input').attr('name'); // Vraca vrednost "vehicle" |
Dobijanje vrednosti DATA atributa
Moram napomenuti da se ovaj podatak se može dobiti lako i prethodnim načinom kao običan HTML atribut.
NAPOMENA:
Ne koristiti velika slova u nazivima data atributa već koristiti crtice izmedju!
HTML
|
1 |
<p class="person" data-index-no="123">Pera Perić</p> |
JavaScript
|
1 2 3 4 5 6 7 |
var el = document.querySelector('.person'); el.getAttribute('data-index-no'); // Za E11+ može da se koristi novija naredba ali sa camelCase jer ne podržava crtice!: el.dataset['indexNo']; ili var b = el.dataset.indexNo; |
NAPOMENA:
Pri pozivanju u sklopu “dataset” syntax-e koristiti camelCase!
|
1 2 3 |
$('.person').data('index-no'); // isti efekat se dobija kada umesto crtice koristimo cameCase $('.person').data('indexNo') |
Setovanje vrednosti atributa
Atributi: href, title, alt, i value imaju svoje “lično” svojstvo za pristup, stoga im se može lako pristupiti direktno preko njih:
|
1 2 3 |
document.querySelector('selector').value = "neki unos"; document.querySelector('selector').href = "var link = document.querySelector('selector').href = "; document.querySelector('selector').title="Ovo je title"; |
HTML
|
1 2 3 |
<form> <input type="checkbox" name="vehicle" value="Bike" checked> I have a bike<br> </form> |
JavaScript
|
1 2 |
var el = document.querySelector('#text-unos'); el.setAttribute('name', 'input-polje'); |
|
1 |
$('#text-unos').attr('name', 'input-polje'); |
NAPOMENA:
Dodati atributi se ne vide fizički u DOM-u, nego su sačuvani u memoriji.
Provera da li elemenat ima klasu
|
1 |
el.classList.contains(className); |
NAPOMENA:
Objekat classList nije podržan kod IE za verzije manje od IE10
|
1 |
$el.hasClass(className); |
Dodavanje klase elementu
|
1 |
el.classList.add(className); |
NAPOMENA:
Objekat classList nije podržan kod IE za verzije manje od IE10
|
1 |
$el.addClass(className); |
Uklanjanje klase
|
1 |
el.classList.remove(className); |
NAPOMENA:
Ovaj objekat classList nije podržan kod IE za verzije manje od IE10
|
1 |
$el.removeClass(className); |
Naizmenično dodavanje i brisanje klase (togle)
HTML
|
1 2 3 4 5 6 7 |
<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> |
JavaScript
Bez toggle()
See the Pen Toogle plainJS by Web programiranje (@chos) on CodePen.
Sa togle()
|
1 |
el.classList.toggle("className"); |
NAPOMENA:
Ova metoda nije podržana u IE (pogledajte tabelu kompatibilnosti ovde)
Primer
|
1 2 3 4 |
var el = document.getElementById('prviSpan'); el.onclick = function () { el.classList.toggle("nazivKlase"); } |
Mix
Ili mix prethodna dva primera
See the Pen EvaKoN by Web programiranje (@chos) on CodePen.
|
1 |
$el.toggleClass("nazivKlase"); |
Primer
|
1 2 3 |
$("#prviSpan").on("click", function(){ $("#prviSpan").toggleClass("nazivKlase"); }); |
Styling elementa
Dobijanje svojstava elementa
Pošto “getComputedStyle()” metoda vraća vrednosti svih svojstava u vidu “CSSStyleDeclaration” objekata, potrebno je koristi još i metodu getPropertyValue:
|
1 |
window.getComputedStyle(el,null).getPropertyValue("CSSsvojstvo") |
Primer
|
1 2 3 4 |
var el = document.getElementById('izabrani'); var styleValue = window.getComputedStyle(el,null).getPropertyValue("font-size"); console.log(styleValue); //Vraća vrednost uvek u px |
|
1 |
$(el).css("CSSsvojstvo"); // Vraća vrednost CSS svojstva |
Primer
|
1 2 3 |
var el = $("#izabrani"); var styleValue = el.css("fontSize"); // Vraća vrednost console.log(styleValue); //Vraća vrednost uvek u px |
Definisanje CSS svojstava elementu
Definisanje jednog svojstva
|
1 |
el.style.CSSsvosjstvo = "vrednost"; |
Primer
|
1 2 |
var el = document.getElementById('izabrani'); el.style.fontSize = "50px"; |
Definisanje više svojstava odjednom
|
1 2 3 4 |
function css(el, styles) { for (var property in styles) el.style[property] = styles[property]; } |
Primer
|
1 2 |
var el = document.getElementById('izabrani'); css(el, { background: 'red', 'font-size': '25px' }); |
Definisanje vrednosti svojstva
|
1 |
$('#izabrani').css("display", "block"); // Definiše vrednost svojstva |
Definisanje više svojstava odjednom
|
1 2 3 4 |
$('#izabrani').css({ "font-size" : "25px", "background" : "red" }); |
Show, hide i toggle
NAPOMENA:
Metode show() i toggle() zahtevaju i drugi atribut koji može biti: “block”, “flex” “inline-block”, “inline” …
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
|
1 2 3 |
$( "#izabrani" ).show() $( "#izabrani" ).hide(); $( "#izabrani" ).toggle(); |
NAPOMENA:
Sve tri metode imaju “ugradjenu” animaciju. Ukoliko želimo animaciju dovoljno je da prosledimo atribut funkciji koji definiše dužinu trajanja animacije. Sa ovim metodama se animira width, height, i opacity simultano. Takodje je moguće sa drugim atributom promeniti defaultni tip animacije “swing”.
Primer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 btn = document.querySelector("#btn"); btn.addEventListener("click", function(){ $( "#izabrani" ).toggle(1000); }) </script> |
Pozicija elementa
Visina i širina elementa
Box sa padding-om i border-om
|
1 2 3 4 5 |
var box = document.querySelector('#izabrani'); var width = box.offsetWidth; var height = box.offsetHeight; console.log(width, height); |
Slično može da se dobije sa getBoundingClientRect() metodom (podržana >=IE9)
|
1 2 3 |
var obj = document.querySelector('#izabrani'); var rect = obj.getBoundingClientRect(); console.log(rect.width, rect.height); |
Box sa podding-om, borderom i marginom
|
1 2 3 4 5 6 7 8 9 |
function outerWidth(el) { var width = el.offsetWidth; var style = getComputedStyle(el); width += parseInt(style.marginLeft) + parseInt(style.marginRight); return width; } outerWidth(el); |
Box bez border-a
|
1 2 3 4 5 |
var box = document.querySelector('#izabrani'); var widthNoBorder = box.clientWidth; var heightNoBorder = box.clientHeight; console.log(widthNoBorder, heightNoBorder); |
Box sa padding-om i border-om
|
1 2 3 4 5 |
var box = $('#izabrani'); var width = box.outerWidth(); var height = box.outerHeight(); console.log(width, height); |
Box sa podding-om, borderom i marginom
|
1 2 3 4 5 |
var box = $('#izabrani'); var width = box.outerWidth(true); var height = box.outerHeight(true); console.log(width, height); |
Box bez border-a
|
1 2 3 4 5 |
var box = $('#izabrani'); var widthNoBorder = box.innerWidth(); var heightNoBorder = box.innerHeight(); console.log(widthNoBorder, heightNoBorder); |
Rastojanje elementa do roditelja
Vrednost od ivice izabranog elementa do ivice prvog “ne statičnnog” roditelja (onaj koji nema svojstvo position:”static”). Posmatra se leva i gornja ivica elementa.
|
1 2 3 |
var el = document.querySelector('#izabrani'); var doLeveIviceRoditelje = el.offsetLeft; var doGornjeIviceRoditelje = el.offsetTop |
|
1 2 3 |
var el = $('#izabrani'); var doLeveIviceRoditelje = el.position().left; var doGornjeIviceRoditelje = el.position().top; |
Rastojanje elementa do dokumenta
|
1 2 3 4 5 6 7 8 |
function offset(el) { var rectLeft = el.getBoundingClientRect().left, var rectTop = el.getBoundingClientRect().top, scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.documentElement.scrollTop; return { top: rectTop + scrollTop, left: rectLeft + scrollLeft } } |
Primer
|
1 2 3 |
var izabrani = document.querySelector('#izabrani'); var rastojanje = offset(izabrani); console.log(rastojanje.left, rastojanje.top); |
Slično može da se dobije sa getBoundingClientRect() metodom:
|
1 2 3 |
var obj = document.querySelector('#izabrani'); var rect = obj.getBoundingClientRect(); console.log(rect.left, rect.top, rect.right, rect.bottom); |
|
1 2 3 |
var izabrani = $('#izabrani'); var rastojanje = izabrani.offset(); console.log(rastojanje.left, rastojanje.top); |
Provera vidljivosti elementa u viewport-u
Sa narednim snippet-om proveravamo dali je izabrani element ceo vidljiv u viewport-u.
|
1 2 3 4 5 6 7 8 9 10 |
function isInViewport(element) { var rect = element.getBoundingClientRect(); var html = document.documentElement; return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || html.clientHeight) && rect.right <= (window.innerWidth || html.clientWidth) ); } // Vraća TRUE ili FALSE |
Primer
|
1 2 |
var img = document.querySelector('img'); isInViewport(img); // Vraća "true" ako je ceo element u viewport-u |
Scroll
Metoda koja vraća vrednost za koliko je skrolovan viewport nekog elementa je:
|
1 |
el.scrollTop; |
Za window/document možemo da koristimo i:
- window.pageYOffset – nema podršku verzije < IE9
- window.scrollY – nema podršku za IE
- document.documentElement.scrollTop
Ali da bi postigli što veću cross browser kompatibilnost dobro je koristi sledeći izraz:
|
1 |
var vrednostScrolla = window.pageYOffset || document.documentElement.scrollTop || body.scrollTop || 0; |
See the Pen JS scroll by Web programiranje (@chos) on CodePen.
Metoda koja vraća vrednost za koliko je skrolovan viewport nekog elementa je:
|
1 |
el.scrollTop(); |
See the Pen jQuery scroll by Web programiranje (@chos) on CodePen.
Pozicija miša pri clik dogadjaju
|
1 2 3 4 5 6 |
document.addEventListener('click', function (e) { e = e || window.event; var pageX = e.pageX; var pageY = e.pageY; console.log(pageX, pageY); }); |
|
1 2 3 4 5 6 |
$("body").click(function(e){ var parentOffset = $(this).parent().offset(); var relX = e.pageX - parentOffset.left; var relY = e.pageY - parentOffset.top; console.log(relX, relY); }); |
Ukoliko se umesto taga body izabere neki drugi element dobijaćemo relativnu poziciju u odnosu na njega
Ostavite komentar