Scribd
Upload
589 views

Javascript Dom PDF

The document describes the Document Object Model (DOM) and how to manipulate elements and nodes in the DOM tree. It discusses the main DOM nodes like document, documentElement, body, and head. It shows how to access child nodes, get elements by ID, class, or CSS selector. It also covers modifying the DOM by adding, removing and replacing nodes, as well as manipulating styles and handling events.

Uploaded by

Mikele Kodra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
589 views

Javascript Dom PDF

The document describes the Document Object Model (DOM) and how to manipulate elements and nodes in the DOM tree. It discusses the main DOM nodes like document, documentElement, body, and head. It shows how to access child nodes, get elements by ID, class, or CSS selector. It also covers modifying the DOM by adding, removing and replacing nodes, as well as manipulating styles and handling events.

Uploaded by

Mikele Kodra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

DOM (Document Object Model) (Modeli i

Objektit të Dokumentit)
●

● document

●
// change the background color to red
document.body.style.background = "red";
// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);

● document.body.style
Pema e DOM.

●
●

●
● document.body <body>
●
document.body.style.background = 'red'; // make the background red
setTimeout(() => document.body.style.background = '', 3000); // return back

● style.background document.body

○ innerHTML
○ offsetWidth
○ etj...
Shembull Pema DOM
●

<!DOCTYPE HTML>
<html>
<head>
<title>About elk</title>
</head>
<body>
The truth about elk.
</body>
</html>
Bredhja në pemën e DOM.
●

●
document
3 nyjet kryesore te pemes.

● document

● <html> = document.documentElement
document document.documentElement <html>

● <body> = document.body
<body> document.body

● <head> = document.head
<head>
Fëmijët: nyjet e fëmijëve, fëmija i parë, fëmija i
fundit (childNodes, firstChild, lastChild).
●
●
<head> <body> <html>
●
● <body> <div> <ul>
<html>
<body>
<div>Begin</div>
<ul>
<li>
<b>Information</b>
</li>
</ul>
</body>
</html>
Shembull (childNodes).
● document.body
<html>
<body>
<div>Begin</div>
<ul>
<li>Information</li>
</ul>
<div>End</div>
<script>
for (let i = 0; i < document.body.childNodes.length; i++) {
alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
}
</script>
</body>
</html>
Shembull (firstChild, lastChild).

● firstChild lastChild
●

elem.childNodes[0] === elem.firstChild


elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

● elem.hasChildNodes()
Koleksionet e DOM

●
for..of
for (let node of document.body.childNodes) {
alert(node); // shows all nodes from the collection
}

document.body.childNodes.filter // undefined (there's no filter method!)

Array.from

Array.from(document.body.childNodes)
Permbledhje Nyjet e DOM

●
●

parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling.

parentElement, children, firstElementChild, lastElementChild,


previousElementSibling, nextElementSibling

●
Kerkimi me (getElement*, querySelector*).

●
document.getElementById:

document.getElementById(id)
●
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
// get the element
let elem = document.getElementById('elem');
// make its background red
elem.style.background = 'red';
</script>
querySelectorAll.

● elem.querySelectorAll(css)
elem
● <li>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
querySelector (metoda matches(css)).
● elem.querySelector(css)
●

● elem.matches(css)
true false
for (let elem of document.body.children) {
if (elem.matches('a[href$="zip"]')) {
alert("The archive reference: " + elem.href );
}
}
querySelector (metoda closest(css)).
● elem.closest(css) elem

<h1>Contents</h1>
<div class="contents">
<ul class="book">
<li class="chapter">Chapter 1</li>
<li class="chapter">Chapter 1</li>
</ul>
</div>
<script>
let chapter = document.querySelector('.chapter'); // LI
alert(chapter.closest('.book')); // UL
alert(chapter.closest('.contents')); // DIV
alert(chapter.closest('h1')); // null (because h1 is not an ancestor)
</script>
getElementsBy*.

●
● elem.getElementsByTagName(tag)

// get all divs in the document


let divs = document.getElementsByTagName('div');

● elem.getElementsByClassName(className)
<form name="my-form">
<div class="article">Article</div>
<div class="long article">Long article</div>
</form>
<script>
// find by name attribute
let form = document.getElementsByName('my-form')[0];
// find by class inside the form
let articles = form.getElementsByClassName('article');
alert(articles.length); // 2, found two elements with class "article"
</script>
Permbledhje
●
Metoda Kerkuar sipas... Mund te therritet ne nje Live? (koleksione
element? reale)
querySelector CSS-selector ✔ -
querySelectorAll CSS-selector ✔ -
getElementById id - -
getElementsByName emer (elementi) - ✔
getElementsByTagName tag ose '*' ✔ ✔
getElementsByClassName class ✔ ✔

● querySelector querySelectorAll getElementBy*


Modifikimi i dokumentit
●
○ document.createElement(tag)--
○ document.createTextNode(value)--
○ elem.cloneNode(deep)-- deep==true
●
○ node.append(...nodes or strings)--
○ node.prepend(...nodes or strings)--
○ node.before(...nodes or strings)--
○ node.after(...nodes or strings)--
○ node.replaceWith(...nodes or strings)--
○ node.remove() -- heq nyjen.
●
○ parent.appendChild(node)
○ parent.insertBefore(node, nextSibling)
○ parent.removeChild(node)
○ parent.replaceChild(newElem, node)
Stilimi i elementeve te DOM-it

●
○ className
○ classList

●
○ style camelCased”
style important
MDN.
○ style.cssText style

●
○ style
Evente ne Javascript
●

●
●
○ click – kur mausi klikon mbi nje element (ne paisjet touchscreen gjenerohet me prekje).
○ contextmenu – kur klikoni me te djathten e mausit mbi element.
○ mouseover / mouseout – kur mausi kalon siper / largohet nga nje element.
○ mousedown / mouseup – kur mausi eshte i klikuar / leshuar mbi nje element.
○ mousemove – kur leviz mausi.
● Eventet e elementit të formës:
○ submit – kur vizitori ben submit formen <form>.
○ focus – kur perdoruesi fokusohet ne nje element si per shembull <input>.
● Eventet e tastjeres:
○ keydown dhe keyup – kur vizitori shtyp dhe më pas lëshon butonin.
● Eventet e dokumentit:
○ DOMContentLoaded – kur HTML është ngarkuar dhe përpunuar, (DOM është i ndërtuar plotësisht)
● Eventet e CSS:
○ transitionend – kur mbaron një animacion CSS.
● Ka dhe shumë evente të tjera por me lart jane perdorur eventet me te perdorura.
Menaxheret e eventeve (Event handlers)

●
●
●
●
● on<event>
● onclick
<input value="Click me" onclick="alert('Click!')" type="button">

●
● on<event>
● elem.onclick
<input id="elem" type="button" value="Click me">
<script>
elem.onclick = function() {
alert('Thank you');
};
</script>
Aksesimi i elementit me this dhe addEventListener
● this
● button this.innerHTML
<button onclick="alert(this.innerHTML)">Click me</button>
●
● handlers

●
● handlers
input.onclick = function() { alert(1); }
input.onclick = function() { alert(2); } // ,bivendos handler-in me siper

● handlers eshte
addEventListener removeEventListener
element.addEventListener(event, handler[, options]);
event handler handler

●
element.removeEventListener(event, handler[, options]);
addEventListener (shembull)
● addEventListener
<input id="elem" type="button" value="Click me"/>

<script>
function handler1() {
alert('Thanks!');
};
function handler2() {
alert('Thanks again!');
}
elem.onclick = () => alert("Hello");
elem.addEventListener("click", handler1); // Thanks!
elem.addEventListener("click", handler2); // Thanks again!
</script>
Objekti i eventit.
●

●
<input type="button" value="Click me" id="elem">

<script>
elem.onclick = function(event) {
// tregon tipin e eventit, elementin dhe kordinatat e klikimit.
alert(event.type + " at " + event.currentTarget);
alert("Coordinates: " + event.clientX + ":" + event.clientY);
};
</script>
Permbledhje

●
○ onclick="..."
○ elem.onclick = function
○ elem.addEventListener(event, handler[, phase])
removeEventListener
●

●
transtionend DOMContentLoaded addEventListener

●
Eventet e modifikuara dhe dispatchEvent

●
open
select

●
dispatchEvent

●
elem.dispatchEvent(event)
●
●

<button id="elem" onclick="alert('Click!');">Autoclick</button>

<script>
let event = new Event("click");
elem.dispatchEvent(event);
</script>
Eventet e modifikuara (CustomEvent)
● new CustomEvent
CustomEvent Event
● detail

<h1 id="elem">Hello for John!</h1>

<script> elem.addEventListener("hello", function(event) {


alert(event.detail.name);
});
elem.dispatchEvent(new CustomEvent("hello", {
detail: { name: "John" }
}));
</script>
Ushtrime me Eventet
● <div id="text">
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>

Pas klikimit
<body>
<input type="button" id="hider" value="Click to hide the text" />
<div id="text">Text</div>
<script>
</script>
</body>
</html>
Ushtrime me Eventet (zgjidhja)
● <div id="text">
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="hider" value="Click to hide the text" />
<div id="text">Text</div>
<script>
document.getElementById('hider').onclick = function() {
document.getElementById('text').hidden = true;
}
</script>
</body>
</html>
Ushtrime me Eventet (zgjidhja)

●
<input type="button" value="Click to hide">

<input type="button" onclick="this.hidden=true" value="Click to hide">

You might also like