Claudia Chiriță . 2023/2024
window.document // referința
/* element.style.proprietateCSS = valoare */
el.style.color = "red"
el.style.backgroundColor = "blue"
![kitty](cat.png)
obiect-Element-în-DOM = {tagName: "img", src: "cat.png",
alt: "kitty", id: "catImg"}
function change(){
var x = document.getElementById('catImg'); // obiect
x.alt = "image of a soft warm happy kitty";
x.style.border = "10px solid pink";
}
window.onload = function() { ... }
window.onload = myMain;
function myMain() { ... }
document.getElementById(numeId) // un obiect
document.querySelector(selectorCSS) // primul obiect
document.getElementsByClassName(numeClasa)
document.getElementsByTagName(numeTag)
document.getElementsByName(nume)
document.querySelectorAll(selectorCSS)
var col = document.querySelectorAll(“section.special > h1”);
alert(col.length);
Schimbarea numelui unei clase "old" în "new":
var colectie = document.getElementsByClassName("old");
for(var i = 0; i < colectie.length; i++)
colectie[i].className = "new";
/* merge? */
accesarea și modificarea conținutului unui element HTML ca String folosind
<p>It was <i> the best </i> of times.</p>
<--! innerHTML -->
It was <i> the best </i> of times.
accesarea și modificarea conținutului unui element HTML ca String folosind
<p>It was <i> the best </i> of times.</p>
<--! textContent -->
It was the best of times.
tipuri de noduri:
manipularea informației din noduri cu:
nodeValue /* pentru noduri Text, Comment
pentru noduri Element = null */
nodeName // numele tagului
nodeType /* Document=9, Element=1,
Text=3, Comment=8 */
node.parentNode // un obiect
node.childNodes // obiect NodeList
node.firstChild // un obiect
node.lastChild // un obiect
node.nextSibling // un obiect
node.previousSibling // un obiect
node.parentNode | node.parentElement
node.childNodes | node.children
node.firstChild | node.firstElementChild
node.lastChild | node.lastElementChild
node.nextSibling | node.nextElementSibling
node.previousSibling | node.previousElementSibling
putem defini metode noi
function secondChild(e){
return e.firstElementChild.nextElementSibling;
};
function find(e, className) {
var p = e.parentElement;
while (p != document.documentElement) {
if(p.classList.contains(className))
return p;
p = p.parentElement;
}
return null;
}
function frati(e) {
var nr = -1;
var p = e.parentElement;
var copii = p.children;
for(var i = 0; i < copii.length; i++) {
if(e.nodeName == copii[i].nodeName) nr++;
}
return nr;
}
crearea unui element
document.createElement("tag")
document.createTextNode("text")
inserarea unui element
parinte.appendChild(copil)
// dacă nodul copil există în arbore, doar mută nodul
parinte.insertBefore(CopilNou, CopilVechi)
ștergerea / înlocuirea unui element
parinte.removeChild(copil)
parinte.replaceChild(CopilNou, CopilVechi)
el.getAttribute("nume-atribut")
// întoarce un string (valoarea atributului specificat)
el.setAttribute("nume-atribut", "valoare")
// adaugă un atribut și valoarea lui
el.hasAttribute("nume-atribut") // întoarce boolean
el.removeAttribute("nume-atribut") // șterge atributul
el.proprietateNoua = valoare // adăugare de proprietăți noi
attrs = element.attributes;
// attrs[i].name
// attrs[i].value
// attrs.length - număr de atribute
var output = "";
for (var i = 0; i < attrs.length; i++) {
output += attrs[i].name + " -> " +
attrs[i].value + " // ";
}
alert(output);
element.style.proprietate = stil nou
ecl = element.classList
</head>
<body>
Hakuna Matata!
ecl = element.classList;
ecl.length // nr. de clase asociate elementului
ecl.item(i) // numele clasei cu indexul i (i = 0,..)
ecl.add("clasa1","clasa2",...)
ecl.remove("clasa1","clasa2",...)
ecl.contains("clasa") // returns boolean
ecl.toggle("clasa", expresie)
/* șterge clasa dacă aceasta există, altfel o adaugă;
expresie => boolean: if true, se adaugă clasa,
if false, se șterge clasa */
/\_____/\
/ o o \
( == v == )
) ( întrebări?
( )
( ( ) ( ) )
(__(__)___(__)__)