Compatibilitatea W3C DOM - Nucleu

Ultimul update major pe 18 Iulie 2010.

Tabel mobil.

Cover of my book

Daca vreti sa aveti niste exemple practice despre ce puteti face cu W3C DOM, cititi cartea mea ppk on JavaScript,in special capitolul 8.

Aceste tabele de compatibilitate detaliaza suportul pentru modulele W3C DOM Core Level 1 si 2 in toate browserele moderne.

Pe aceasta pagina am grupat diversele metode si proprietati W3C DOM in noua tabele. In principiu trebuie sa stiti primele cinci tabele pe de rost si foarte rar veti avea nevoie de ultimele patru tabele.

  1. Crearea elementelor; Elemente HTML sau noduri text.
  2. Mai multe modalitati de a obtine elementele.
  3. Informatii despre noduri. Odata ce ati gasit un nod despre care aveti nevoie de mai multe informatii.
  4. Navigarea ramificatiei DOM. Cum trecem de la un nod la altul.
  5. Proprietati DOM traversal care ignora noduri text.
  6. Manipularea nodurilor. Cum mutam noduri prin document.
  7. Manipularea datelor. Datele sunt mereu text, si exista cateva metode pentru a lucra cu ele.
  8. Manipularea atributelor. Incompatibilitati grave cu browserele.
  9. Metode si proprietati diverse. O sa aveti nevoie de ele foarte rar.
  10. Extensii Microsoft la Level 1 DOM Core. Neinteresante in general.

Crearea elementelor

Aceste doua metode creaza noi elemente HTML pe care le puteti apoi insera in document.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
createElement()
Creaza un nou element

Pagina de test
da da da da da va fi testat
var x = document.createElement('P')
Creaza un nod element <P> HTML nou si il plaseaza temporar in x, care este mai tarziu inserat in document.
  • IE8 si cele de mai jos suporta de asemenea ('<P>').
createTextNode()
Creaza un nou nod text

Pagina de test
da da da da da va fi testat
var x = document.createTextNode('text')

Creaza un nod text cu continut text si il plaseaza temporar in x, care este mai tarziu inserat in documenr.

Obtinerea elementelor

Aceste metode au fost create pentru obtinerea elementelor HTML de care avem nevoie din document.

Trebuie sa le stiti pe de rost.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
getElementById()
Obtine elementul cu ID-ul sau

Pagina de test 'd' mic!!
aproape da da da da da va fi testat
var x = document.getElementById('test')

Ia elemenrul cu id="test" (oriunde se afla in document) si il plaseaza in x.

Daca exista mai mult de un element cu id="test", metoda il selecteaza pe primul din document toate celelalte sunt ignorate.

  • IE5-7 returneaza de asemenea elementul cu name="test".
getElementsByClassName()
Obtine un nodeList a elementelor cu aceasta clasa.

Pagina de test
No da da da da da va fi testat
document.getElementsByClassName('test')
document.getElementsByClassName('test test2')

Prima expresie returneaza un nodeList cu toate elementele care au o valoare class care contine "test". A doua returneaza un nodeList cu toate elementele care au o valoare class care contine atat "test" cat si "test2" (in orice ordine).

getElementsByTagName()
Obtine toate tag-urile de acest tip

Pagina de test
Incomplet da da da da da va fi testat
var x = document.getElementsByTagName('P')

Face x intr-un nodeList ai tuturos P-urilor din document, a.i. x[1] e al doilea P etc.

var x = y.getElementsByTagName('P')

Ia toate paragrafele care sunt descendeti ai nodului y.

  • Argumentul * , care ar trebui sa selecteze toate elementele din document,nu functioneaza in IE 5.5.
  • Tag-urile customizate nu sunt returnate in Konqueror.
querySelectorAll()
Obtine o nodeList a elementelor dupa selectorul CSS

Pagina de test
No da No da da da da va fi testat
document.querySelectorAll('.testClass')
document.querySelectorAll('.testClass + p')

Returneaza un nodeList cu toate elementele care au o valoare class care contine "testClass";sau un nodeList cu toate paragrafele urmate direct de un astfel de element.

In esenta, aceasta metoda va permite sa utilizati sintaxa CSS pentru returnarea de elemente.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Informatii despre noduri

Aceste patru proprietati ofera informatii de baza despre toate nodurile. Ce returneaza ele depinde de tipul nodului. Ele sunt read-only, cu exceptia nodeValue.

Exista trei tipuri clasice de noduri: noduri de element (tag-uri HTML), noduri atribut si noduri text. Testez aceste proprietati pentru toate aceste tipuri de noduri si am adaugat un al patrulea tip de nod: nodul document(radacina celorlalte noduri).

Trebuie sa stiti aceste proprietati pe de rost.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
nodeName
Numele nodului cu LITERE MARI

Pagina de test
Incomplet da da da da da va fi testat
x.nodeName

Numele nodului x. Numele corecte sunt:

Element Atribut Text Comentarii Document
Numele tag-ului cu litere mari numele atributului #text #comment #document
  • IE 5.5 nu suporta un nodeName pentru atribute si document.
  • IE 5.5 raporteaza nodeName-ul unui comentariu ca !.
  • Konqueror nu vede nodurile comentarii.
nodeType
Tipul nodului

Pagina de test
Incomplet da da da da da va fi testat
x.nodeType

Tipul nodului x. Tipurile corecte sunt:

Element Atribut Text Comentarii Document
1 2 3 8 9
  • IE 5.5: atributele si documentul nu sunt definite; cometariul are nodeType 1
  • Konqueror nu vede nodurile comentarii.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
nodeValue
Valoarea nodului, daca are una. Citire/scriere

Pagina de test
Incomplet da da da da da va fi testat
x.nodeValue

Ia valoarea nodului x

x.nodeValue = 'Test'

Seteaza valoarea nodului sx

Element Atribut Text Comentarii Document
n/a Valoarea atributului Continutul nodului text Continutul nodului comentarii n/a
  • IE 5.5 nu suporta nodeValue pentru atribute
  • Konqueror nu vede nodurile comentarii.
tagName
Numele tag-ului unui nod element

Pagina de test Don't use
aproape da da da da va fi testat
x.tagName

Ia numele tag-ului pentru nodul x. Valorile corecte sunt:

Element Atribut Text Comentarii Document
numele tag-ului cu LITERE MARI n/a n/a n/a n/a

Sfatul meu e sa nu folositi tagName deloc.
nodeName contine toate functionalitatile tagName, plus altele. De aceea nodeName este mereu alegerea mai buna.

  • In IE (toate versiunile) tagName-ul unui nod comentariu este !
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Ramificatia DOM

Cinci proprietati si doua siruri pentru navigarea prin ramificatia DOM. Folosind aceste proprietati, puteti ajunge la noduri care sunt apropiate de nodul curent in structura documentului.

In general nu ar trebuis a folositi prea multe din aceste proprietati. Indata ce faceti ceva de genul

x.parentNode.firstChild.nextSibling.children[2]

codul este deja prea complicat. Relatiile complexe dintre noduri se pot schimba din-tro data si neasteptatcand modificam structura documentului, iar schimbarea structurii documentului este scopul W3C DOM. In general ar trebui sa folositi una sau doua proprietati pe actiune.

Trebuie sa stiti aceste proprietati pe de rost.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
childNodes[]
Un sir cu toate nodurile copii ale nodului

Pagina de test
da da da da da va fi testat
x.childNodes[1]

Ia al doilea nod copil al nodului x.

childNodes nodeList este format din toate nodurile copil ai elementului, inclusiv(goale) noduri text si noduri comentariu.

  • IE pana la versiunea 8 nu numara nodurile text goale. Din moment ce acesta este comportamentul dorit din cate ma priveste, primeste inca un da.
  • Konqueror ignora nodurile comentariu.
children[]
Un sir cu toate nodurile element copii ale nodului

Pagina de test
aproape da No da da da da va fi testat
x.children[1]

Ia al doilea nod copil element al nodului x.

Unde childNodes tine toate nodurile copil, children le tine doar pe cele care sunt noduri element(tag-uri HTML).

  • IE pana la vs 8 numara incorect nodurile comentarii.
firstChild
Primul nod copil al nodului

Pagina de test
da da da da da va fi testat
x.firstChild

Ia primul nod copil al nodului x.

  • Konqueror ignora nodurile comentariu.
lastChild
Ultimul nod copil al nodului

Pagina de test
da da da da da va fi testat
x.lastChild

Ia ultimul copil al nodului x.

  • Konqueror ignora nodurile comentariu.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
nextSibling
Urmatorul nod frate al nodului

Pagina de test
da da da da da va fi testat
x.nextSibling

Ia urmatorul copil al parintelui lui x.

  • Konqueror ignora nodurile comentariu.
parentNode
Nodul parinte al nodului

Pagina de test
da da da da da va fi testat
x.parentNode

Ia nodul parinte al lui x.

previousSibling
Fratele nodului anterior nodului

Pagina de test
da da da da da va fi testat
x.previousSibling

Ia copilul anterior al parintelui lui x.

  • Konqueror ignora nodurile comentariu.
sourceIndex
Numarul de index al nodului din pagina sursa

Pagina de test
da incorect No No No da va fi testat
x.sourceIndex

Ia sourceIndex al elementului x. Acesta este de asemenea numarul de index pentru elementul din matricea document.getElementsByTagName('*').

  • IE returneaza un sourceIndex care este cu unu mai inalt decat in Opera. In IE8 si vs anterioare aceasta se refera la elementul corect, dar in IE9 se refera la urmatorul element.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

DOM Traversale

Cateva proprietati folositoare care ar fi trebuit sa fie in DOM de la inceput dar in mod misterios nu sunt.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
childElementCount
Numarul de elemente copii

Pagina de test
No da No da da da da va fi testat
x.childElementCount
firstElementChild
Primul copil care esre un nod element

Pagina de test
No da No da da da da va fi testat
x.firstElementChild
lastElementChild
Ultimul copil care este un element nod

Pagina de test
No da No da da da da va fi testat
x.lastElementChild
nextElementSibling
Urmatorul nod element frate

Pagina de test
No da No da da da da va fi testat
x.nextElementSibling
previousElementSibling
Nodul element frate anterior

Pagina de test
No da No da da da da va fi testat
x.previousElementSibling
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Manipularea nodurilor

Aceste cinci metode permit restructurarea documentului. Scriptul mediu DOM foloseste cel putin doua din aceste metode.

Schimbarile din structura documentului se aplica imediat, intreaga ramificatie DOM este schimbata. Chiar si browserul va arata schimbarile imediat.

Trebuie sa stiti aceste metode pe de rost.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
appendChild()
Adauga un nod copil ca ultimul nod la un element

Pagina de test
da da da da da va fi testat
x.appendChild(y)

Face nodul y ultimul copil al nodului x.

Daca adaugam un nod care este in alta parte in document, se muta la noua pozitie.

cloneNode()
Cloneaza un nod

Pagina de test
da da da da da va fi testat
x = y.cloneNode(true | false)

Face nodul x o copie a nodului y. Daca argumentul este true, intreaga ramificatie mai jos de y este copiata, daca este false numai nodul radacina y este copiat.

Mai tarziu inserati clona in document.

insertBefore()
Insereaza un nod in nodurile copil al unui element

Pagina de test
da da da da da va fi testat
x.insertBefore(y,z)

Insereaza nodul y ca si copil al nodului x chiar inaintea nodului z.

removeChild()
Elimina un nod copil dintr-un element

Pagina de test
da da da da da va fi testat
x.removeChild(y)

Elimina copilul y al nodului x.

replaceChild()
Inlocuieste un nod copil al unui element cu un alt nod copil

Pagina de test
da da da da da va fi testat
x.replaceChild(y,z)

Inlocuieste nodul z, un copil al nodului x, de catre nodul y.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Date text

Aceste metode sunt folosite pentru a manipula date text, i.e. continutul nodurilor text.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
appendData()
Adauga date unui nod text

Pagina de test
No da cu bug-uri da da da da va fi testat
x.appendData(' some extra text')

Adauga sirul some extra text lui x, care trebuie sa fie un nod text.

  • IE8 si 9 adauga textul, dar nu il arata pana nu dati click pe element.
data
Continutul unui nod text

Pagina de test
da da da da da va fi testat
x.data

Continutul lui x, care trebuie sa fie un nod text. La fel ca x.nodeValue.

Poate fi setat de asemenea:

x.data = 'The new text'
deleteData()
Sterge date dintr-un nod text

Pagina de test
No da da da da da va fi testat
x.deleteData(4,3)

Sterge niste date din x, care trebuie sa fie un nod text, incepand de la al cincilea caracter si stergand trei caractere. Al doilea argument este obligatoriu.

insertData()
Insereaza text intr-un nod text

Pagina de test
No da da da da da va fi testat
x.insertData(4,' and now for some extra text ')

Inseraza sirul and now for some extra text dupa al patrulea caracter in x, catre trebuie sa fie un nod text.

normalize()
Uneste noduri text adiacente intr-un singur nod

Pagina de test
No da da da da da va fi testat
x.normalize()

Toate nodurile copil ai nodului x care sunt noduri text si care au alte noduri text sau frati, sunt unite. Aceasta este de faptinversul lui splitText: nodurile text care au fost impartite, se unesc din nou.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
replaceData()
Inlocuieste textul dintr-un nod text

Pagina de test
No da da da da da va fi testat
x.replaceData(4,3,' and for some new text ')

Inlocuieste trei caractere, incepand de la al cincilea, al nodului x, care trebuie sa fie un nod text, al sirului and for some new text.

splitText()
Imparte un nod text in doua noduri text

Pagina de test
cu bug-uri da da da da va fi testat
x.splitText(5)

Imparte nodul text x la al saselea caracter. x contine acum prima parte (caract. 0-5), pe cand un nou nod este creat(si devine x.nextSibling) care contine a doua parte (caract. 6-pana la sfarsit) a textului original.

  • IE manevreaza primul splitText()bine, dar dupa normalizarea textului IE nu il mai imparte.
substringData()
Ia un subsir de text din nodul text

Pagina de test
No da da da da da va fi testat
x.substringData(4,3)

Ia un subsir al lui x, care trebuie sa fie un nod text, incepand de la al cincilea caracter sic u o lungime de trei caractere. Astfel este la fel ca metoda substr() de siruri.

wholeText
Textul unui nod text plus textul din noduri text direct adiacente. Read only.

Pagina de test
No da No da da da da va fi testat

Aceasta proprietate read-only este folositoare daca doriti sa luati tot textul la un moment dat si nu vreti sa fiti deranjati de marginile dintre nodurile text.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Atribute

O incurcatura totala. Incercati influentarea atributelor in aceasta ordine:

  1. Incercati obtinerea sau setarea unei proprietati specifice, ca x.id sau y.onclick.
  2. Daca nu este nici o proprietate specifica, folositi getAttribute() sau setAttribute().
  3. Daca nici asta nu functioneaza, incercati alta metoda sau proprietate din tabelul de mai jos. Majoritatea au totusi tipare de incompatibilitate cu browserele groaznice.
  4. Evitati attributes[]. E mai rau decat orice altceva.

In ilustratia mea orice metoda sau proprietate care priveste nodurile atribut ar trebui sa functioneze de asemenea pe atributul style, manipulatoare de evenimente si atribute customizate. Daca nu functioneaza atunci zic ca metoda sau proprietatea este incompleta.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
attributes[index]
O matrice cu atributele unui nod, accesat dupa numarul de index, in ordinea in care sunt definite in codul sursa.

Pagina de test Nu folositi Folositi getAttribute() in loc
Alternative incorect incorect da da da va fi testat
x.attributes[1]

Aceasta matrice este formata din toate atributele definite in ordinea codului sursa.

  • Firefox si IE8 incearca sa creeze o lista in ordinea codului sursa, dar ordinea este dezactivata.
  • IE5-7 ia al doilea atribut posibil al nodului x (dataFld in test), chiar daca este definit sau nu. De aceea este format din toate atributele care pot fi posibil definite pe nod(84 toate in toate).
  • IE 5.5 da initial valoarea atributului; nu obiectul atributului.

Faceti-va o favoare si nu folositi matricea indexata attribute.

attributes[key]
O matrice cu atributele unui nod, accesat dupa numele atributului

Pagina de test
incorect aproape da da da da da va fi testat
x.attributes['align']

Ia obiectul atributului de aliniere a nodului x. Daca nodul nu are atribut de aliniere, returneaza undefined (cu exceptia IE, unde returneaza un obiect atribut care nu are nici o valoare.)

  • IE5-7 nu returneaza valoarea unui atribut style.
  • IE 5.5 nu returneaza atribute customizate, si reda initial valoarea atributului in loc de valoarea obiectului.
createAttribute() si setAttributeNode()
Creaza un nou nod atribut si il adauga unui nod element.

Pagina de test
No da da da da da va fi testat
z = document.createAttribute('title');
z.value = 'Test title';
x.setAttributeNode(z)

Aceasta creaza un atribut titlu cu o valoare si o seteaza pe nodul x.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
getAttribute()
Ia valoarea unui atribut

Pagina de test
aproape da da da da da va fi testat
x.getAttribute('align')

Ofera valoarea atributului de aliniere a nodului x. Numele atributelor cu litere mari sunt de asemenea permise.

  • In IE5-7, accesarea atributului style reda un obiect, si accesarea atributului onclick reda o functie anonima infasurata in jurul continutului efectiv.
getAttributeNode()
Ia un nod atribut

Pagina de test
No aproape da da da da da va fi testat
x.getAttributeNode('align')

Ia obiectul atribut align al nodului x. Acesta este un obiect, nu o valoare.

  • IE 6/7 nu va permite sa accesati valoarea lui x.getAttributeNode('style').
hasAttribute()
Verifica daca un nod are un anume atribut

Pagina de test
No da da da da da va fi testat
x.hasAttribute('align')

Returneaza true cand nodul x are un atribut align, false cand nu are.

hasAttributes()
Verifica daca un nod are atribute

Pagina de test
No da da da da da va fi testat
x.hasAttributes()

Returneaza true cand nodul x are atribute, false cand nu are.

name
Numele unui atribut

Pagina de test
No da da da da da va fi testat
x.name

Numele nodului atribut x.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
removeAttribute()
Elimina un nod atribut

Pagina de test
aproape da da da da aproape va fi testat
x.removeAttribute('align')

Elimina atributlui align din nodul x.

  • IE5-7 si Opera nu elimina manipulatoarele de eveniment.
  • Konqueror nu elimina atributul align.
removeAttributeNode()
Elimina un nod atribut

Pagina de test
No Minim Incomplet da da da da aproape va fi testat
x.removeAttributeNode(x.attributes['align'])
x.removeAttributeNode(x.attributes[1])
x.removeAttributeNode(x.getAttributeNode('align'))

Elimina nodul atribut. Este o mica diferenta cu removeAttribute(), cu exceptia argumentului.

  • IE 6 nu elimina nimic, dar nu da nici un mesaj si nici eroare.
  • IE 7 nu elimina stilurile si manipulatoarele de evenimente.
  • Opera nu elimina manipulatoarele de evenimente.
  • Konqueror nu elimina atributul align.
setAttribute()
Seteaza valoarea unui atribut

Pagina de test
Incomplet da da da da da va fi testat
x.setAttribute('align','right')

Seteaza atributul align al nodului x la right. Numele si valoarea sunt ambele siruri.

  • IE5-7 nu seteaza stilurile si elimina evenimentele cand inercati sa le setati.
setAttributeNode()
See createAttribute()
value
Valoarea unui atribut

Pagina de test
No aproape da da da da da va fi testat
x.value

Valoarea atributului x.

  • IE6-7 reda null pentru valorile de stil.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Altele

Multe alte metode si proprietati care se folosesc foarte rar. Eu folosesc doar doua intr-un script propriu zis.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
compareDocumentPosition()
Reda pozitia relativa a unui element fata de altul.

Pagina de test
No da da da da da va fi testat
x.compareDocumentPosition(y)

Compara in pozitia documentului (DOM) a elementului y cu cea a elementului x Metoda returneaza o masca de biti:

  • 1:Pozitie deconectata
  • 2: Precede
  • 4: Urmeaza
  • 8: Contine
  • 16: Este continut de

Toate numerele relevante sunt adaugate, si aceasta suma este returnata. Deci daca y urmeaza (4) si este continut de (16) x, metoda returneaza 20.

contains()
Verifica daca un element contine un alt element

Pagina de test
da No da da da va fi testat
x.contains(y)

Daca nodul y este un descendent al nodului x, metoda returneaza true, in caz contrar false.

Vezi postul din acest blog pentru o abordare diferita. (Si da, refuzul constant al Firefox de a implementa aceasta metoda foarte importanta inecepe sa devina foarte enervanta.)

createDocument()
Creaza un nou document

Pagina de test
No incorect da da da da va fi testat
x = document.implementation.createDocument('','',null)

Creaza un nou document XML.

  • IE9 creaza un document HTML.
createDocumentFragment()
Creaza un fragment de document

Pagina de test
No da da da da da va fi testat
x = document.createDocumentFragment();
x.[fill with nodes];
document.[somewhere].appendChild(x);

Creaza un fragment, adauga o gramada de noduri la el, si apoi il insereaza in document. Notati ca fragmentul propriu zis nu este inserat ci numai nodurile copii.

documentElement
Tag-ul HTML

Pagina de test
da da da da da va fi testat
document.documentElement

Reprezinta elementul radacina a documentului XML. In orice document HTML, elementul <html> este binenteles elementul radacina.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
getElementsByName()
Reda elementele dupa atributul nume

Pagina de test
incorect si incomplet da da da incorect va fi testat
var x = document.getElementsByName('test')

Creaza un nodeList cu toate elementele care au name="test". Ar trebui sa ignore elementele cu id="test"

Pe pagina mea de test <p>, <input>, <img> si <ppk> au acest nume, atata timp cat este de asemenea un pragraf cu id="test". Ideal, toate browserele ar trebui sa ia primele patru elemente si sa il ignore pe al cincilea.

  • IE ignora tag-urile <p> si <ppk> cu name="test", dar include <div> cu id="test"
  • Konqueror ignora tag-ul <ppk>.
  • Opera include <div> cu id="test"
hasChildNodes()
Verifica daca nodul are noduri copii

Pagina de test
da da da da da va fi testat
x.hasChildNodes()

Returneaza true cand nodul x are noduri copii; false cand nu are.

item()
Acceseaza un element intr-o matrice

Pagina de test Nu neaparat in JavaScript
da da da da da va fi testat
document.getElementsByTagName('P').item(0)

La fel ca document.getElementsByTagName('P')[0].

Metoda item() este intentionata pentru alte limbaje de programare unde nodeLists ca acelea returnate de getElementsByTagName nu sunt la fel de usor de accesat cum ar fi, daca ar fi matrici.

Nu avem nevoie de item() deloc in JavaScript.

ownerDocument
Documentul care 'detine' elementul

Pagina de test
No da da da da da va fi testat
x.ownerDocument

Se refera la obiectul documentului care 'contine' nodul x. Acesta este nodul documentului.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Extensii Microsoft

Ca de obicei Microsoft a extins standardul cumva. Chiar daca uneori extensiile sale sunt stralucite (innerHTML imi vine in minte), in cazul DOM Core ele nu sunt.

Notati diferentele dintre metodele W3C si Microsoft. Metodele W3C sunt detinute de elementul parinte al nodului pe care doriti sa il ajustati, metodele Microsoft de nodul insusi.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
applyElement()
Ceva cu noduri

Pagina de test
da No No No No va fi testat
var y = document.createElement('i');
x.applyElement(y)

Elementul <i>este inserat in elementul x, in jurul textului.

clearAttributes()
Elimina toate atributele dintr-un nod

Pagina de test
Incomplet No No No No va fi testat
x.clearAttributes()

Elimina toate atributele din nodul x.

  • IE nu elimina manipulatoarele de evenimente si stilurile inline.
mergeAttributes()
Copiaza toate atributele unui nod in alt nod

Pagina de test
da No No No No va fi testat
x.mergeAttributes(y)

Copiaza toate atributele lui y in nodul x.

removeNode()
Elimina un nod

Pagina de test
da No No No da va fi testat
x.removeNode(true | false)

Elimina nodul x din document. Daca folosim argumentul true copiii sai sunt de asemenea eliminati; daca dfolosim false nu sunt eliminati. Notati ca toate nodurile text se pun ca si copii.

replaceNode()
Inlocuieste un nod cu un alt nod

Pagina de test
da No No No No va fi testat
x.replaceNode(y)

Inlocuieste nodul x cu nodul y.

swapNode()
Schimba doua noduri

Pagina de test
da No No No No va fi testat
x.swapNode(y)

Pune nodul x in locul nodului y si invers.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
Office cleaning Charlotte NC   Chicago chair covers