The HTML DOM Document Object

Previous Next Reference

HTML DOM Nodes

In the HTML DOM (Document Object Mode !" ever#thin$ is % node&

The document itse f is % document node ' HTML e ements %re e ement nodes ' HTML %ttributes %re %ttribute nodes Text inside HTML e ements %re text nodes (omments %re comment nodes

The Document Object

)hen %n HTML document is o%ded into % *eb bro*ser" it becomes % document object+ The document object is the root node of the HTML document %nd the ,o*ner, of % other nodes& (e ement nodes" text nodes" %ttribute nodes" %nd comment nodes!+ The document object -rovides -ro-erties %nd methods to %ccess % node objects" from *ithin .%v%/cri-t+ Tip: The document is % -%rt of the *indo* object %nd c%n be %ccessed %s *indo*+document+

0ro*ser /u--ort

The Document Object is su--orted in % m%jor bro*sers+

Document Object Pro-erties %nd Methods

The fo o*in$ -ro-erties %nd methods c%n be used on HTML documents&
Property / Method Description

document+%do-tNode(node! document+%nchors document+%-- ets document+b%se1RI document+bod# document+c ose(! document+coo2ie document+cre%te'ttribute(! document+cre%te(omment(!

Returns %n %d%-ded node from %nother document to this document+ Returns % co ection of % the %nchors in the document Returns % co ection of % the %-- ets in the document Returns the %bso ute b%se 1RI of % document Returns the bod# e ement of the document ( oses the out-ut stre%m -revious # o-ened *ith document+o-en(! Returns % n%me3v% ue -%irs of coo2ies in the document (re%tes %n %ttribute node (re%tes % (omment node *ith the s-ecified text

document+cre%teDocument4r%$ment(! document+cre%te5 ement(! document+cre%teTextNode(! document+doct#-e document+document5 ement document+documentMode document+document1RI document+dom%in document+dom(onfi$ document+forms document+$et5 ement0#Id(! document+$et5 ements0#N%me(! document+$et5 ements0#T%$N%me(! document+im%$es document+im- ement%tion document+im-ortNode(! document+in-ut5ncodin$ document+ %stModified document+ in2s document+norm% i6e(! document+norm% i6eDocument(! document+o-en(! document+re%d#/t%te document+referrer document+ren%meNode(! document+strict5rror(hec2in$ document+tit e document+1RL document+*rite(! document+*rite n(!

(re%tes %n em-t# Document4r%$ment node (re%tes %n 5 ement node (re%tes % Text node Returns the Document T#-e Dec %r%tion %ssoci%ted *ith the document Returns the Document 5 ement of the document (the HTML e ement! Returns the mode used b# the bro*ser to render the document /ets or returns the oc%tion of the document Returns the dom%in n%me of the server th%t o%ded the document Returns the confi$ur%tion used *hen norm% i6eDocument(! is invo2ed Returns % co ection of % the forms in the document Returns the e ement th%t h%s the ID %ttribute *ith the s-ecified v% ue 'ccesses % e ements *ith % s-ecified n%me Returns % NodeList cont%inin$ % e ements *ith the s-ecified t%$n%me Returns % co ection of % the im%$es in the document Returns the DOMIm- ement%tion object th%t h%nd es this document Im-orts % node from %nother document Returns the encodin$" ch%r%cter set" used for the document Returns the d%te %nd time the document *%s %st modified Returns % co ection of % the in2s in the document Removes em-t# Text nodes" %nd joins %dj%cent nodes Removes em-t# Text nodes" %nd joins %dj%cent nodes O-ens %n HTML out-ut stre%m to co ect out-ut from document+*rite(! Returns the ( o%din$! st%tus of the document Returns the 1RL of the document th%t o%ded the current document Ren%mes the s-ecified node /ets or returns *hether error7chec2in$ is enforced or not /ets or returns the tit e of the document Returns the fu 1RL of the document )rites HTML ex-ressions or .%v%/cri-t code to % document /%me %s *rite(!" but %dds % ne* ine ch%r%cter %fter e%ch st%tement

)%rnin$ 888
In the )9( DOM (ore" the Document object inherits % -ro-erties %nd methods from the Node object+ M%n# of these -ro-erties %nd methods m%2e no sense used on documents+ Avoid using these node object properties and methods on HTML document objects:
Property / Method Reason for avoiding

document+%ttributes document+h%s'ttributes(! document+next/ib in$ document+nodeN%me document+nodeT#-e document+node>% ue document+o*nerDocument document+o*ner5 ement document+-%rentNode document+-revious/ib in$ document+text(ontent Document bject

Documents don:t h%ve %ttributes Documents don:t h%ve %ttributes Documents don:t h%ve sib in$s This is % *%#s ;document This is % *%#s < (DO(1M5NT=NOD5! Documents don:t h%ve %n node v% ue Documents don:t h%ve %n o*ner document Documents don:t h%ve %n o*ner e ement Documents don:t h%ve % -%rent node Documents don:t h%ve sib in$s Documents don:t h%ve % text content

The HTML DOM !"ement Object

Next Reference

Previous

HTML DOM Nodes

In the HTML DOM (Document Object Mode !" ever#thin$ is % node&

The document itse f is % document node ' HTML e ements %re e ement nodes ' HTML %ttributes %re %ttribute nodes Text inside HTML e ements %re text nodes (omments %re comment nodes

The 5 ement Object

In the HTML DOM" the !"ement object re-resents %n HTML e ement+ 5 ement objects c%n h%ve chi"d nodes of t#-e e ement nodes" text nodes" or comment nodes+ ' #odeList object re-resents % ist of nodes" i2e %n HTML e ement:s co ection of chi d nodes+ 5 ements c%n % so h%ve %ttributes+ 'ttributes %re %ttribute nodes (/ee next ch%-ter!+

0ro*ser /u--ort

The 5 ement Object %nd the NodeList Object is su--orted in % m%jor bro*sers+

Pro-erties %nd Methods

The fo o*in$ -ro-erties %nd methods c%n be used on % HTML e ements&

Property / Method

Description

element+%ccess?e# element+%--end(hi d(! element+%ttributes element+chi dNodes element+c %ssN%me element+c ientHei$ht element+c ient)idth element+c oneNode(! element+com-%reDocumentPosition(! element+dir element+first(hi d element+$et'ttribute(! element+$et'ttributeNode(! element+$et5 ements0#T%$N%me(! element+$et4e%ture(! element+$et1serD%t%(! element+h%s'ttribute(! element+h%s'ttributes(! element+h%s(hi dNodes(! element+id element+innerHTML element+insert0efore(! element+isDef%u tN%mes-%ce(! element+is5@u% Node(! element+is/%meNode(! element+is/u--orted(! element+ %n$ element+ %st(hi d element+n%mes-%ce1RI element+next/ib in$ element+nodeN%me element+nodeT#-e element+node>% ue element+norm% i6e(! element+offsetHei$ht element+offset)idth element+offsetLeft

/ets or returns the %ccess2e# for %n e ement 'dds % ne* chi d node" to %n e ement" %s the %st chi d node Returns % N%medNodeM%- of %n e ement:s %ttributes Returns % NodeList of chi d nodes for %n e ement /ets or returns the c %ss %ttribute of %n e ement Returns the vie*%b e hei$ht of %n e ement Returns the vie*%b e *idth of %n e ement ( ones %n e ement (om-%res the document -osition of t*o e ements /ets or returns the text direction of %n e ement Returns the first chi d of %n e ement Returns the s-ecified %ttribute v% ue of %n e ement node Returns the s-ecified %ttribute node Returns % co ection of % chi d e ements *ith the s-ecified t%$n%me Returns %n object *hich im- ements the 'PIs of % s-ecified fe%ture Returns the object %ssoci%ted to % 2e# on %n e ement Returns true if %n e ement h%s the s-ecified %ttribute" other*ise f% se Returns true if %n e ement h%s %n# %ttributes" other*ise f% se Returns true if %n e ement h%s %n# chi d nodes" other*ise f% se /ets or returns the id of %n e ement /ets or returns the content of %n e ement Inserts % ne* chi d node before % s-ecified" existin$" chi d node Returns true if % s-ecified n%mes-%ce1RI is the def%u t" other*ise f% se (hec2s if t*o e ements %re e@u% (hec2s if t*o e ements %re the s%me node Returns true if % s-ecified fe%ture is su--orted on the e ement /ets or returns the %n$u%$e code for %n e ement Returns the %st chi d of %n e ement Returns the n%mes-%ce 1RI of %n e ement Returns the next node %t the s%me node tree eve Returns the n%me of %n e ement Returns the node t#-e of %n e ement /ets or returns the v% ue of %n e ement .oins %dj%cent text nodes %nd removes em-t# text nodes in %n e ement Returns the hei$ht of %n e ement Returns the *idth of %n e ement Returns the hori6ont% offset -osition of %n e ement

element+offsetP%rent element+offsetToelement+o*nerDocument element+-%rentNode element+-revious/ib in$ element+remove'ttribute(! element+remove'ttributeNode(! element+remove(hi d(! element+re- %ce(hi d(! element+scro Hei$ht element+scro Left element+scro Toelement+scro )idth element+set'ttribute(! element+set'ttributeNode(! element+setId'ttribute(! element+setId'ttributeNode(! element+set1serD%t%(! element+st# e element+t%bIndex element+t%$N%me element+text(ontent element+tit e element+to/trin$(!

Returns the offset cont%iner of %n e ement Returns the vertic% offset -osition of %n e ement Returns the root e ement (document object! for %n e ement Returns the -%rent node of %n e ement Returns the -revious e ement %t the s%me node tree eve Removes % s-ecified %ttribute from %n e ement Removes % s-ecified %ttribute node" %nd returns the removed node Removes % chi d node from %n e ement Re- %ces % chi d node in %n e ement Returns the entire hei$ht of %n e ement Returns the dist%nce bet*een the eft ed$e of %n e ement %nd the vie* Returns the dist%nce bet*een the to- ed$e of %n e ement %nd the vie* Returns the entire *idth of %n e ement /ets or ch%n$es the s-ecified %ttribute" to the s-ecified v% ue /ets or ch%n$es the s-ecified %ttribute node

'ssoci%tes %n object to % 2e# on %n e ement /ets or returns the st# e %ttribute of %n e ement /ets or returns the t%b order of %n e ement Returns the t%$ n%me of %n e ement /ets or returns the textu% content of % node %nd its descend%nts /ets or returns the tit e %ttribute of %n e ement (onverts %n e ement to % strin$

nodelist+item(! nodelist+ en$th

Returns the node %t the s-ecified index in % NodeList Returns the number of nodes in % NodeList

The HTML DOM Attribute Object

Previous Next (h%-ter

HTML DOM Nodes

In the HTML DOM (Document Object Mode !" ever#thin$ is % node&

The document itse f is % document node ' HTML e ements %re e ement nodes ' HTML %ttributes %re %ttribute nodes Text inside HTML e ements %re text nodes (omments %re comment nodes

The 'ttr Object

In the HTML DOM" the Attr object re-resents %n HTML %ttribute+ 'n HTML %ttribute % *%#s be on$s to %n HTML e ement+

The N%medNodeM%- Object

In the HTML DOM" the #amed#odeMap object re-resents %n unordered co ection of %n e ements %ttribute nodes+ Nodes in % N%medNodeM%- c%n be %ccessed b# n%me or b# index (number!+

0ro*ser /u--ort

The 'ttr object %nd the N%medNodeM%- object is su--orted in % m%jor bro*sers+

Pro-erties %nd Methods

Property / Method Description

attr+isId attr+n%me attr+v% ue attr+s-ecified

Returns true if the %ttribute is of t#-e Id" other*ise it returns false Returns the n%me of %n %ttribute /ets or returns the v% ue of the %ttribute Returns true if the %ttribute h%s been s-ecified" other*ise it returns false

nodemap+$etN%medItem(! nodemap+item(! nodemap+ en$th nodemap+removeN%medItem(! nodemap+setN%medItem(!

Returns % s-ecified %ttribute node from % N%medNodeM%-+ Returns the node %t % s-ecified index in % N%medNodeM%Returns the number of nodes in % N%medNodeM%Removes % s-ecified %ttribute node /ets the s-ecified %ttribute node (b# n%me!

DOM A )%rnin$ 888

In the )9( DOM (ore" the 'ttr (%ttribute! object inherits % -ro-erties %nd methods from the Node object+ In DOM A" the 'ttr object no on$er inherits from Node+ $or future code %ua"ity& you shou"d avoid using node object properties and methods on attribute objects:
Property / Method Reason for avoiding

attr+%--end(hi d(! attr+%ttributes attr+b%se1RI

'ttributes don:t h%ve chi d nodes 'ttributes don:t h%ve %ttributes use document+b%se1RI inste%d

attr+chi dNodes attr+c oneNode(! attr+first(hi d attr+h%s'ttributes(! attr+h%s(hi dNodes attr+insert0efore(! attr+is5@u% Node(! attr+is/%meNode(! attr+is/u--orted(! attr+ %st(hi d attr+next/ib in$ attr+nodeN%me attr+nodeT#-e attr+node>% ue attr+norm% i6e(! attr+o*nerDocument attr+o*ner5 ement attr+-%rentNode attr+-revious/ib in$ attr+remove(hi d attr+re- %ce(hi d attr+text(ontent

'ttributes don:t h%ve chi d nodes Bet or set the attr+v% ue inste%d 'ttributes don:t h%ve chi d nodes 'ttributes don:t h%ve %ttributes 'ttributes don:t h%ve chi d nodes 'ttributes don:t h%ve chi d nodes M%2es no sense M%2es no sense Is % *%#s true 'ttributes don:t h%ve chi d nodes 'ttributes don:t h%ve sib in$s 1se attr+n%me inste%d This is % *%#s C ('TTRI01T5=NOD5! 1se attr+v% ue inste%d 'ttributes c%nnot be norm% i6ed This is % *%#s #our HTML document This is the HTML e ement #ou used to %ccess the %ttribute This is the HTML e ement #ou used to %ccess the %ttribute 'ttributes don:t h%ve sib in$s 'ttributes don:t h%ve chi d nodes 'ttributes don:t h%ve chi d nodes 1se attr+v% ue inste%d

HTML DOM !vents

Previous Next Reference

HTML DOM 5vents HTML DOM events % o* .%v%/cri-t to re$ister different event h%nd ers on e ements in %n HTML document+ 5vents %re norm% # used in combin%tion *ith functions" %nd the function *i not be executed before the event occurs (such %s *hen % user c ic2s % button!+ Tip: The event mode *%s st%nd%rdi6ed b# the )9( in DOM Leve C+ HTML DOM 5vents D M: Indic%tes in *hich DOM Leve the -ro-ert# *%s introduced+

Mouse 5vents
Property Description D M

onc ic2 ondb c ic2 onmousedo*n onmousemove onmouseover onmouseout onmouseu-

The event occurs *hen the user c ic2s on %n e ement The event occurs *hen the user doub e7c ic2s on %n e ement The event occurs *hen % user -resses % mouse button over %n e ement The event occurs *hen the -ointer is movin$ *hi e it is over %n e ement The event occurs *hen the -ointer is moved onto %n e ement The event occurs *hen % user moves the mouse -ointer out of %n e ement The event occurs *hen % user re e%ses % mouse button over %n e ement

C C C C C C C

?e#bo%rd 5vents
Attribute Description D M

on2e#do*n on2e#-ress on2e#u-

The event occurs *hen the user is -ressin$ % 2e# The event occurs *hen the user -resses % 2e# The event occurs *hen the user re e%ses % 2e#

C C C

4r%me3Object 5vents
Attribute Description D M

on%bort

The event occurs *hen %n im%$e is sto--ed from o%din$ before com- ete # o%ded (for DobjectE! The event occurs *hen %n im%$e does not o%d -ro-er # (for DobjectE" Dbod#E %nd Dfr%mesetE! The event occurs *hen % document" fr%meset" or DobjectE h%s been o%ded The event occurs *hen % document vie* is resi6ed The event occurs *hen % document vie* is scro ed The event occurs once % -%$e h%s un o%ded (for Dbod#E %nd Dfr%mesetE!

onerror

on o%d onresi6e onscro onun o%d

C C C C

4orm 5vents
Attribute Description D M

onb ur onch%n$e

The event occurs *hen % form e ement oses focus The event occurs *hen the content of % form e ement" the se ection" or the chec2ed st%te h%ve ch%n$ed (for Din-utE" Dse ectE" %nd Dtext%re%E! The event occurs *hen %n e ement $ets focus (for D %be E" Din-utE" Dse ectE" text%re%E" %nd DbuttonE! The event occurs *hen % form is reset The event occurs *hen % user se ects some text (for Din-utE %nd Dtext%re%E! The event occurs *hen % form is submitted

C C

onfocus

onreset onse ect onsubmit

C C C

5vent Object
(onst%nts
'onstant Description D M

('PT1RINB=PH'/5

The current event -h%se is the c%-ture -h%se (9!

'T=T'RB5T 0100LINB=PH'/5

The current event is in the t%r$et -h%se" i+e+ it is bein$ ev% u%ted %t the event t%r$et (F! The current event -h%se is the bubb in$ -h%se (C!

C 9

Pro-erties
Property Description D M

bubb es c%nce %b e currentT%r$et eventPh%se t%r$et time/t%mt#-e

Returns *hether or not %n event is % bubb in$ event Returns *hether or not %n event c%n h%ve its def%u t %ction -revented Returns the e ement *hose event isteners tri$$ered the event Returns *hich -h%se of the event f o* is current # bein$ ev% u%ted Returns the e ement th%t tri$$ered the event Returns the time (in mi iseconds re %tive to the e-och! %t *hich the event *%s cre%ted Returns the n%me of the event

C C C C C C C

Methods
Method Description D M

init5vent(!

/-ecifies the event t#-e" *hether or not the event c%n bubb e" *hether or not the event:s def%u t %ction c%n be -revented

-reventDef%u t(!

To c%nce the event if it is c%nce %b e" me%nin$ th%t %n# def%u t %ction norm% # t%2en b# the C im- ement%tion %s % resu t of the event *i not occur To -revent further -ro-%$%tion of %n event durin$ event f o* C

sto-Pro-%$%tion(!

5ventT%r$et Object
Methods
Method Description D M

%dd5ventListener(! dis-%tch5vent(!

' o*s the re$istr%tion of event isteners on the event t%r$et (I5G H %tt%ch5vent(!! ' o*s to send the event to the subscribed event isteners (I5G H fire5vent(!!

C C C

remove5ventListener(! ' o*s the remov% of event isteners on the event t%r$et (I5G H det%ch5vent(!!

5ventListener Object
Methods
Method Description D M

h%nd e5vent(!

(% ed *henever %n event occurs of the event t#-e for *hich the 5ventListener interf%ce *%s C re$istered

Document5vent Object
Methods
Method Description D M

cre%te5vent(!

Mouse5vent3?e#bo%rd5vent Object
Pro-erties
Property Description D M

% t?e#

Returns *hether or not the ,'LT, 2e# *%s -ressed *hen %n event *%s tri$$ered

button c ientI

Returns *hich mouse button *%s c ic2ed *hen %n event *%s tri$$ered

Returns the hori6ont% coordin%te of the mouse -ointer" re %tive to the current *indo*" *hen C %n event *%s tri$$ered Returns the vertic% coordin%te of the mouse -ointer" re %tive to the current *indo*" *hen %n C event *%s tri$$ered Returns *hether or not the ,(TRL, 2e# *%s -ressed *hen %n event *%s tri$$ered Returns the identifier of % 2e# Returns the oc%tion of the 2e# on the device Returns *hether or not the ,met%, 2e# *%s -ressed *hen %n event *%s tri$$ered Returns the e ement re %ted to the e ement th%t tri$$ered the event C 9 9 C C

c ientJ

ctr ?e# 2e#Identifier 2e#Loc%tion met%?e# re %tedT%r$et screenI

Returns the hori6ont% coordin%te of the mouse -ointer" re %tive to the screen" *hen %n event C *%s tri$$ered Returns the vertic% coordin%te of the mouse -ointer" re %tive to the screen" *hen %n event *%s tri$$ered Returns *hether or not the ,/HI4T, 2e# *%s -ressed *hen %n event *%s tri$$ered C

screenJ

shift?e#

Methods
Method Description ()'

initMouse5vent(! init?e#bo%rd5vent(!

Initi% i6es the v% ue of % Mouse5vent object Initi% i6es the v% ue of % ?e#bo%rd5vent object

C 9

Previous

HTML DOM Anchor Object

Previous Next Reference

'nchor Object
The 'nchor object re-resents %n HTML h#-er in2+ 4or e%ch D%E t%$ in %n HTML document" %n 'nchor object is cre%ted+ 'n %nchor % o*s #ou to cre%te % in2 to %nother document (*ith the href %ttribute!" or to % different -oint in the s%me document (*ith the n%me %ttribute!+ Jou c%n %ccess %n %nchor b# usin$ $et5 ement0#Id(!" or b# se%rchin$ throu$h the %nchors co ection -ro-ert# of the Document object+

'nchor Object Pro-erties

Property Description

ch%rset

Not su--orted in HTMLK+ /ets or returns the v% ue of the ch%rset %ttribute of % in2 /ets or returns the v% ue of the href %ttribute of % in2 /ets or returns the v% ue of the href %n$ %ttribute of % in2 /ets or returns the v% ue of the id %ttribute of % in2

href href %n$ id

n%me

Not su--orted in HTMLK+ 1se id inste%d+ /ets or returns the v% ue of the n%me %ttribute of % in2 /ets or returns the v% ue of the re %ttribute of % in2 Not su--orted in HTMLK+ /ets or returns the v% ue of the rev %ttribute of % in2 /ets or returns the v% ue of the t%r$et %ttribute of % in2 /ets or returns the v% ue of the t#-e %ttribute of % in2

re rev

t%r$et t#-e

/t%nd%rd Pro-erties %nd 5vents

The 'nchor object % so su--orts the st%nd%rd -ro-erties %nd events+

HTML DOM Area Object

Previous Next Reference

're% Object
The 're% object re-resents %n %re% inside %n HTML im%$e7m%- (%n im%$e7m%- is %n im%$e *ith c ic2%b e %re%s!+ 4or e%ch D%re%E t%$ in %n HTML document" %n 're% object is cre%ted+

're% Object Pro-erties

Property Description

%t coords h%sh host hostn%me href noHref

/ets or returns the v% ue of the % t %ttribute of %n %re% /ets or returns the v% ue of the coords %ttribute of %n %re% /ets or returns the %nchor -%rt of the href %ttribute v% ue /ets or returns the hostn%me&-ort -%rt of the href %ttribute v% ue /ets or returns the hostn%me -%rt of the href %ttribute v% ue /ets or returns the v% ue of the href %ttribute of %n %re% Not su--orted in HTMLK+ /ets or returns the v% ue of the nohref %ttribute of %n %re% /ets or returns the -%thn%me -%rt of the href %ttribute v% ue /ets or returns the -ort -%rt of the href %ttribute v% ue /ets or returns the -rotoco -%rt of the href %ttribute v% ue /ets or returns the @uer#strin$ -%rt of the href %ttribute v% ue /ets or returns the v% ue of the sh%-e %ttribute of %n %re% /ets or returns the v% ue of the t%r$et %ttribute of %n %re%

-%thn%me -ort -rotoco se%rch sh%-e t%r$et

/t%nd%rd Pro-erties %nd 5ventsHTML

Previous

DOM *ase Object

Next Reference

0%se Object
The 0%se object re-resents %n HTML b%se e ement+ The b%se e ement is used to s-ecif# % def%u t %ddress or % def%u t t%r$et for % 4or e%ch Db%seE t%$ in %n HTML document" % 0%se object is cre%ted+ in2s on % -%$e+

0%se Object Pro-erties

Property Description

href t%r$et

/ets or returns the v% ue of the href %ttribute in % b%se e ement /ets or returns the v% ue of the t%r$et %ttribute in % b%se e ement

/t%nd%rd Pro-erties %nd 5vents

The 0%se object % so su--orts the st%nd%rd -ro-erties %nd events+

The 're% object % so su--orts the st%nd%rd -ro-erties %nd events+

Document get!"ement*y+d,- Method

Definition %nd 1s%$e
The $et5 ement0#Id(! method %ccesses the first e ement *ith the s-ecified id+

/#nt%x
document.getElementById("id")
Parameter Description

id

Re@uired+ The id of the e ement #ou *%nt to %ccess3m%ni-u %te

0ro*ser /u--ort

The $et5 ement0#Id(! method is su--orted in % m%jor bro*sers+

5x%m- e
5x%m- e
' ert innerHTML of %n e ement *ith % s-ecific ID&

<html> <head> <script> function getValue() { var !document.getElementById("my"eader")# alert( .inner"$%&)# ' <(script> <(head> <)ody> <h* id!"my"eader" onclic+!"getValue()">,lic+ me-<(h*> <()ody> <(html>
Try it yourse"f .