Compatibilitate W3C DOM - HTML

Ultima actualizare majora in 18 Iulie 2010.

Puteti vedea de asemenea versiunea anterioara, care a fost creata in Septembrie 2005 si are inca caracteristici IE Mac.

Cover of my book

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

Acest tabel de compatibilitate detaliaza suportul pentru modulele W3C DOM HTML Level 1 si 2 in toate browserele moderne.

Sunt patru tabele pe aceasta pagina. Trebuie sa stiti primele doua tabele pe de rost, celelalte doua sunt mult mai putin importante.

  1. Unul cu proprietati pentru toate elementele
  2. Unul cu niste elemente diverse
  3. Unul cu doua metode casute de selectare
  4. Unul cu toate metodele si proprietatile tabelelor

Toate elementele

Prima data cateva proprietati ale tuturor elementelor HTML . Toate sunt read/write, si scriptul DOM mediu foloseste cel putin doua sau trei.

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
className
Atributul class.

Pagina de test
da da da da da va fi testat
x.className
x.className = 'blue'

Ia sau seteaza valoarea atributului class al nodului x, daca exista unul.

dir
Atributul dir.

Pagina de test
aproape da da aproape aproape da va fi testat
x.dir
x.dir = 'rtl'

Ia sau seteaza directia textului (ltr sau rtl, stanga spre dreapta sau dreapta spre stanga) a elementuluix. Pe moment div serveste ca o alinire glorificata.

  • daca ultimul caracter pe o linie este un caracter interpunctie , IE, Safari, Chrome si Konqueror il muta la inceputul liniei . Nu cred ca asta ar trebui sa se intample, deci o clasez ca Aproape.
id
Atributul id.

Pagina de test
da da da da da va fi testat
x.id
x.id = 'otherID'

Ia sau seteaza id-ul nodului x, care trebuie sa fie un tag. Daca nu este specificat nici un ID in HTML, el este gol.

innerHTML
HTML-ul continut de un tag, ca sir.

Original o extensie Microsoft, innerHTML este atat de folosito incat toate browserele il suporta.

Pagina de test
vezi de asemenea pagina de test a tabelului
aproape da da da da va fi testat
x.innerHTML
x.innerHTML = "Let's <u>change</u> it!"

Ia sau seteaza HTML-ul continut de nodul x.

In general innerHTML este mai rapid decat metode normale DOM deoarece parserul methods because the  HTML este intodeauna mai rapidf de cat motorul DOM.Daca vreti sa faceti schimbari complicate, folositi innerHTML. (Pentru schimbari simple nu prea conteaza ce metode folositi, desi innerHTML ramane in teorie mai rapid.) Vezi de asemenea pagina de test W3C DOM vs. innerHTML pentru mai multe informatii.

  • In IE si Konqueror innerHTML nu functioneaza corect cand updatam tabele. Putem rezolva asta daca folosim metode pur DOM in loc. Vedeti aceasta explicatie a comportamentului de catre inventatorul innerHTML.
  • Daca elimina elemente prin innerHTML in IE, continutul lor este eliminat si nu ramane decat elementul insusi (i.e. tag-uri de deschidere si inchidere) . Daca doriti sa eliminati noduri pe care veti dorii sa le reinserati, folositi metode DOM cum ar fi removeChild().
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
innerText
Textul dintr-un tag.

Pagina de test
da nu da da da va fi testat
x.innerText
x.innerText = "Let's change it!"

Ia sau seteaza textul continut de nodul x. Orice tag HTML din nod este ognorat, chiar daca textul lor este adaugat in innerText. Daca setam innerText toate elementele inner HTML sunt eliminate.

Cross browser:

var text = x.innerText || x.textContent
outerHTML
HTML-ul unui tag, inclusiv tag-ul.

Pagina de test
aproape nu da da da va fi testat
x.outerHTML
x.outerHTML = "Let's <u>change</u> it!"

Ia sau seteaza HTML-ul intregului nod x, inclusiv cel mai exterior (elementul x insusi).

Odata ce ati schimbat outerHTML, elementul x este eliminat de tot si inlocuit cu HTML-ul specificat. Totusi, variabila x inca se refera la elementul eliminat care acum pluteste in “hiperspatiul DOM.” In IE continutul sau este eliminat, totusi, din cauza bug-ului mentionat sub innerHTML.

outerText
Textul unui tag, inclusiv tag-ul.

Pagina de test
aproape nu da da da va fi testat
x.outerText
x.outerText = "Let's change it!"

Ia sau seteaza textul continut de nodul x. Exact la fel ca innerText cu exceptia ca nodul x este si el suprascris si eliminat cand setam outerText.

Vezi nota outerHTML despre elementul x.

textContent
Textul continut de un tag.

Pagina de test
nu da da da da da va fi testat
x.textContent
x.textContent = "Let's change it!"

Ia sau seteaza textul continut de nodul x. Orice taguri HTML din nod sunt ignorate, desi textul lor este adaugat la textContent.

Cross browser:

var text = x.innerText || x.textContent
title
Atributul title.

Pagina de test
da da da da da va fi testat
x.title
x.title = 'Changed'

Ia sau seteaza titlul atributului nodului x.

  • Safari 3.0 nu arata titlul unui element sub nici un fel, deci compatibilitatea sa este in mare netestabila. Totusi, proprietatea title isi ia valoarea din atributul titlu,deci functioneaza pana la un moment dat.
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

Diverse

Niste elemente diverse, dintre care primele doua sunt uneori importante.

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
body
Tag-ul body

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

Reprezinta tag-ul BODY.

compatMode
Mod strict sau mod Quirks

Pagina de test Strict
Pagina de test Quirks
nu da da da da da va fi testat
document.compatMode

Returneaza modul de compatibilitate a documentului: BackCompat (Quirks Mode) sau CSS1Compat (Strict Mode). Vezi Quirks and Strict Mode page pentru o explciatie.

  • IE 5.5 nu suporta aceasta proprietate, dar nu are nevoie. Este blocata in permanenta in Quirks Mode.
createHTMLDocument()
Creaza un document HTML

Pagina de test
nu da nu da da da va fi testat
document.implementation.createHTMLDocument('Title')

Creaza un document HTML care consista in taguri <html>, <head>, <title> si <body>. Argumentul devine valoarea tag-ului <title>. Din pacate nu stiu ce sa fac cu noul creat document HTML.

defaultView
Fereastra in care este afisat documentul

Pagina de test
nu da da da da da va fi testat
document.defaultView

Se refera la fereastra. Nu inteleg de ce mai avem nevoie de inca o referinta la fereastra.

parentWindow
Fereastra in care este afisat documentul

Pagina de test
da nu nu nu da va fi testat
document.parentWindow

Se refera la fereastra. Nu inteleg de ce mai avem nevoie de inca o referinta la fereastra.

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

Casutele de selectare

Doua noi metode pentru casute de selectare.

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
add(opt,opt)
Adauga o optiune unei casute de selectare. Al doilea argument este optiunea dupa care vreti sa inserati noua optiune.

Pagina de test
nu da da da da da va fi testat
x.add(y,x.options[x.options.length])

Adauga o optiune la casuta de selectare, unde x este casuta de selectare si y este noua optiune.

Calea acceptata de W3C (care este mult prea complicata) necesita referirea catre obiectul optiune dupa care noua optiune este inserata.

add(opt,ind)
Adauga o optiune unei casute de selectare. Al doilea argument este un numar de index.

Pagina de test
da nu da da da va fi testat
x.add(y,2)

Adauga o optiune intr-o casuta de selectare, unde x este casuta de selectare si y este noua optiune.

Calea Microsoft: da numarul de index al optiunii dupa care vrem sa inseram o noua optiune.

Tin partea Microsoft aici; Implementarea W3C este prea complicata.

remove()
Elimina o optiune dintr-o casuta de selectare

Pagina de test
da da da da da va fi testat
x.remove(1)

Elimina a doua optiune din select x.

Tabele

Toate metodele, matricile si proprietatile pentru elementele copii ale tabelelor. Testele mele W3C DOM vs. innerHTML arata ca aceste metode sunt cea mai inceata cale de a crea un tabel in Explorer pe Windows. Folositi cu grija.

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
caption
Captura unui tabel

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

Acceseaza captura tabelului x.

cellIndex
numarul de index al unei celule din sirul sau

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

Numarul de index al elementului x, care trebuie sa fie un <td> sau <th>, in sirul sau (<tr>).

cellPadding
Atributul stramos

Pagina de test
da da da da da va fi testat
x.cellPadding = 10

Seteaza umplutura celulei tabelului x la 10 pixeli. cellPadding este suprascris de orice declaratie CSS padding. Cand setati cellPadding, schimbarile se aplica numai la celulele tabelului fara vre-o umplutura CSS.

  • Safari 3.0 si Konqueror nu reactioneaza la setarea cellPadding, dar este o diferenta subtila intre testul cellPadding si cel cellSpacing, si imediat cellSpacing. Rezultatul ar putea fi interpretat ca cellPadding avand efect doar dupa ce cellSpacing a fost setat, dar nu sunt sigur ca aceasta interpretare este corecta.
cells[]
O matrice cu toate celulele intr-un sir

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

Un nodeList cu toate celulele al celui de-al doilea sir al tabelului x. Contine atat <td> cat si <th>.

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
cellSpacing
Atributul stramos

Pagina de test
da da da da da va fi testat
x.cellSpacing = 10

Seteaza spatiul celulelor tabelului x la 10.

createCaption()
Creaza o captura pentru un tabel

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

Daca tabelul x are deja o captura aceasta metoda returneaza captura. Daca nu, o noua captura este creata.

createTFoot()
Creaza un element tFoot

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

Daca tabelul x are un <tfoot>, il ia.Daca nu, creaza un <tfoot> si il adauga la tabel.

createTHead()
Creaza un element tHead

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

Daca tabelul x are un <thead>, il ia. Daca nu,creaza un <thead> si il adauga la tabel.

deleteCaption()
Sterge captura unui tabel

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

Sterge captura tabelului x, daca exista.

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
deleteCell()
Sterge o celula de tabel

Pagina de test
da da da da da va fi testat
x.rows[1].deleteCell(0)

Sterge prima celula al celui de-al doilea sir al tabelului x.

deleteRow()
Sterge un sir de tabel

Pagina de test
da da da da da va fi testat
x.deleteRow(1)

Sterge al doilea sir al tabelului x.

x.tBodies[1].deleteRow(1)

Sterge al doilea sir al celui de al doilea <tbody> al tabelului x.

deleteTFoot()
Sterge tFoot al unui tabel

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

Sterge tFoot al tabelului x.

deleteTHead()
Sterge tHead al unui tabel

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

Sterge tHead al tabelului x.

frame
Un chenar in jurul intregului tabel

Pagina de test
da da da da da va fi testat
x.frame = 'lhs'

Seteaza atributul frame al tabelului x.

Posibile valori: void, above, below, hsides, vsides, lhs, rhs, box, border

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
insertCell()
Insereaza o celula de tabel

Pagina de test
da da da da da va fi testat
x.rows[0].insertCell(1)

Insereaza un <td> primul <tr> al tabelului x, ca al doilea <td>.

insertRow()
Insereaza un sir de tabel

Pagina de test
da da da da da va fi testat
x.insertRow(1)

Insereaza un <tr> in tabelul x ca al doilea <tr>.

moveRow()
Muta un sir dintr-o pozitie in alta. Proprietate Microsoft.

Pagina de test
da nu nu nu nu va fi testat
moveRow(0,3)

Muta sirul cu index 0 la index 3.

rowIndex
Numarul de index a unui sir intr-un tabel. Nu ia in cosiderare sectiunile de tabel.

Pagina de test
da da da da Incorect va fi testat
x.rowIndex

Numarul de index al elementului x, care ar trebui sa fie un <tr>, in tabelul sau, indiferent de sectiunea de tabel (tHead, tBody, tFoot).

Notati ca browserele ar trebui sa mute orice <thead> la inceputul tabelului, si orice <tfoot> la capat. De aceea sirurile ar trebui enumerate in ordinea <thead> siruri, <tbody>siruri, <tfoot>siruri: oridinea in care sunt vizibile in pagina redata.

  • Opera tine la ordinea din codul sursa (unde <tfoot> precede <tbody>.)
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
rows[]
O matrice din toate sirurile dintr-un tabel sau sectiune de tabel

Pagina de test
da da da da Incorect va fi testat
x.rows

o nodeList cu toate sirurile tabelului x.

  • Safari 3.0 si Opera tin la ordinea din sursa (unde<tfoot> precede<tbody>)
sectionRowIndex
Numarul de index a unui sir in sectiunea de tabel

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

Numarul de index al elementului x, care trebuie sa fie un which must be a <tr>, in sectiunea sa de tabel(tHead, tBody, tFoot).

tBodies[]
O matrice cu toate elementele tBody

Pagina de test
da da da da da va fi testat
x.tBodies
O matrice cu toate TBodies ale tabelului x.
tFoot
tFoot al unui tabel

Pagina de test
da da da da da va fi testat
x.tFoot
Acceseaza tFoot al x, care trebuie sa fie un tabel.
tHead
tHead al unui tabel

Pagina de test
da da da da da va fi testat
x.tHead
Acceseaza tHead al x, care trebuie sa fie un tabel.
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 Indianapolis Janitorial services Memphis