JavaScript 

Document Object Model (DOM) API

Parengė: Martynas Kašelionis

From zero to hero

DOM

Kai web puslapis užkrautas, naršyklė sukuria “Document Object Model” (dokumento objektų modelį).

Naršyklė

Naršyklė

  • window (langas) - yra naršyklės skirtukas, kuriame yra užkraunamas tinklapis. Iš JavaScript pusės, tai yra window objektas su metodais ir ypatybėmis.

      pvz. metodų pagalba galite sužinoti lango plotį ir          aukštį: Window.innerWidth, Window.innerHeight

  • navigator -  naudojama naršyklės ir jos būsenos indentifikavimui. Iš JavaScript pusės, tai yra navigator objektas su metodais ir ypatybėmis. pvz. navigator metodų pagalba, galime gauti vartotojo nustatytą kalbą, geolocation informaciją ir kt.
  • document (dokumentas) - kuris reiškia užkrautą DOM naršyklės lange(window).  Document objekto ypatybių ir metodų pagalba galima manipulioti HTML elementais.

DOM elementai

DOM elementai

Užkrautas DOM , kuriame elementai yra atvaiduojami medžio struktūra ir yra vadinami node.

Node tipai:

  • Element node - elementas, kuris egzistuoja DOM 
  • Root node - aukščiausiai esantis elementas, medžio struktūroje.
  • Child node - elementas, kuris tesiogiai (directly) yra kitame elemente. pvz.: article elementas yra section elemento viduje
  • Descendant node -  elementas, kuris yra betkurioje vietoje kitame elemente.
  • Parent node -  elementas, kuris savyje turi kitą elementą

DOM elementai

Node tipai:

  • Sibling nodes - elementai, kurie yra tame pačiame lygyje DOM.
  • Text node - elementas, kuris savyje turi teksto eilutę.

DOM API

Naudojant DOM API, JavaScript gali dinamiškai valdyti HTML:

  • Keisti elementus
  • Keisti HTML elementų atributus
  • Keisti CSS stilius
  • Šalinti ir pridėti HTML atributus
  • Reaguoti į įvykius puslapyje
  • Kurti naujus įvykius

Elemento pasirinkimas

Elementų pasirinkimui, dažnausiai naudojami metodai:

 

  • document.getElementById( ‘customHeaderis’);
  • document.getElementsByTagName(‘p’); //masyvas
  • document.getElementsByClassName(); //masyvas
  • document.querySelector('.antraste');
  • document.querySelectorAll(); //masyvas  

Funkcijos vykdymas sulaukus įvykio

element.addEventListener("click", function(){ alert("Labas"); });
element.addEventListener("click", pasisveikink);

function pasisveikink(){

 alert("Labas");
}

Demo

Manipuliavimas turiniu

  • textContent

const jsAntraste = document.querySelector('#js-antraste');

jsAntraste.textContent ="Jus sveikina JS";

  • innerHTML

const todolist = document.querySelector('#todo ul');

  • todolist.innerHTML += "<li>Dirbti</li>”

Manipuliavimas atributais

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Naujų elementų kūrimas

  • document.CreateElement('div');
  • Node.appendChild(childElement);

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Elementų šalinimas

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild​

DOM API

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/API

Įvykiai

  • Paspaudimas (click)
  • Pelės užvedimas (mouseover)
  •  Sufokusavimas (focus)
  •  Sufokusavimo pabaiga (blur)
  • Pelės nuvedimas (mouseout)
  • Užkrautas puslapis (load)
  •  Ir t.t.

Įvykių klausymas

  • Tiesiai per HTML atributus

 <h1 onclick="this.innerHTML = 'Ooops!'">Spausk!</h1>

  •  Per parametrus

 document.getElementById("myBtn").onclick = displayDate;

  • Per “event listener”

window.addEventListener("resize", function(){
t; document.getElementById("demo").innerHTML = sometex

});

Įvykiai

Įvykiai

Įvykių objektai

Įvykių objektai

  • Funkcijos įvykio parametras gali būtį(event, evt, e)
  • Įvykio target ypatybė – visada yra nuoroda į patį elementą.
  • Įvykdžius ankstesnėje skaidrėje parašytą skriptą fonas bus keičiamas pačiam mygtukui.
  • Labai patogu, kai norima tą pačią funkciją naudoti skirtingiems elementams.

Standartinės elgsenos keitimas

Standartinės elgsenos keitimas

Event bubbling and capture

Event bubbling ir capture yra du mechanizmai, kurie nurodo, kas nutinka, kai  event handleriai, to pačio įvykio tipo yra aktyvuojami ant to pačio elemento.

<button>Rodyti video</button>

<div class="hidden">
  <video>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
  </video>
</div>

Event bubbling and capture

btn.onclick = function() {
  videoBox.setAttribute('class', 'showing');
}
videoBox.onclick = function() {
  videoBox.setAttribute('class', 'hidden');
};

video.onclick = function() {
  video.play();
};

Event bubbling and capture

Event bubbling and capture

Sprendimas:

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

setTimeout()

JavaScript WEB API

By Martynas Kašelionis

Made with Slides.com

JavaScript WEB API

  • 646

More from Martynas Kašelionis