08 - Document Object Model (DOM)

10/5/2009
THE DOCUMENT OBJECT MODEL (DOM)
Fall2009
CSCI3110AdvancedTopicsinWebDevelopment
WhatistheDocumentObjectModel(DOM)?
Modelsdocument(XHTML,XML,etc.)ina hierarchicalstructure. All Allows programmatic ti parsing i and dchanging h i of fth the document. Multiple"methodsofattack"ofvaryingcomplexity.
10/5/2009
DOMHTMLrepresentation
<html> <head> <title>Hello</hello> <body> <p>Hithere!</p> </body> </html>
Document Element:html El Element: t head h d Element:title Text:Hello Element:body Element:p Text:Hithere!
Nodes
Adocumentisacollectionofnodesofvaryingtype. Nodescancontainothernodes. <pstyle="special">This l " i l" hi is i text.</p> / ElementnodeXHTMLtag Textnodetextualcontentofdocument.Contained withinelementnodes. Attributenodeprovides providesmoreinformationabout anelement.
10/5/2009
documentmethods
document.getElementById(id) allowsreferenceto anyelementinapagebyusingtheIDassignedto theelement element.
ID'smustbeuniqueinXHTML. NotauniversalsolutionasunwieldytoIDeverything.
getElementsByTagName
document.getElementsByTagName(tag) returnsan array ofelementsthatuseaparticulartag.
E ifonly Even l oneelement, l t still tillreturned t dasanarray.
http://einstein.etsu.edu/~pittares/CSCI3110/examples/81.htm
getElementsByTagName canbecalledusingany elementobjecttojustlookwithinthatelement.

10/5/2009
Workingwithelements
element.getAttribute(attribute)returnsattribute valuefortheelement
http://einstein etsu edu/~pittares/CSCI3110/examples/83.htm http://einstein.etsu.edu/~pittares/CSCI3110/examples/8 3 htm
element.setAttribute(attribute,value)sets/resets theattributevaluefortheelement
http://einstein.etsu.edu/~pittares/CSCI3110/examples/84.htm http://einstein.etsu.edu/~pittares/CSCI3110/examples/85.htm
http://webbugtrack.blogspot.com/2007/08/bug242setattributedoesntalwayswork.html
Workingwithelements
Anelementnode'stextcanbereadandmodified usingtheinnerHTML property.
http://einstein etsu edu/~pittares/CSCI3110/examples/86.htm http://einstein.etsu.edu/~pittares/CSCI3110/examples/8 6 htm
innerHTML sees/setstheentirecontentsofthe specifiedelement,includingotherembedded tags/elements.

10/5/2009
Workingwithelements
InthecontextofDOM,anelementisanobject.It mayormaynothaveatoString methoddefined.
http://einstein.etsu.edu/~pittares/CSCI3110/examples/8 http://einstein etsu edu/~pittares/CSCI3110/examples/88.htm 8 htm http://einstein.etsu.edu/~pittares/CSCI3110/examples/89.htm
Noderelationships
Allnodesinadocumentarerelated. Relationshiptypes:
Child Parent Sibling
EachnodehasapropertychildNodes whichcontainan arraylike listofchildren.

Thislist Thi li tcontains t i all llt typesof fnodes, d not tjust j telement l t nodes.
10/5/2009
NodeProperties
EverynodehasapropertynamednodeType. nodeType isanintegerasfollows.
1for f element l tnodes d 2forattributenodes 3fortextnodes
Changingatextnodeproperty
nodeObject.nodeValue ="newtext";
Foratagthatcontainstext,thefirstchildofthattag's elementnodeisthetext. text
Toeasecoding,thenodepropertyfirstChild and lastChild areavailabletodirectlyreferencethose nodesinthenodearray. array

10/5/2009
Addingnewelements
Newelementscanbeaddedtoadocumentby creatinganewelements,buildingitscontents,and addingitwhereappropriateinthedocument hierarchy.
element.appendChild(element)
Events
DOMeventscanbeaddedtoelements:
http://en.wikipedia.org/wiki/DOM_events
Haveevent H thandler h dl return t false f l to t prevent tfurther f th defaulteventhandling.

10/5/2009
documentarrays
Thedocumentobjectcontainsarrays(asproperties) toeachaccesstocertainpageelements: d document.anchors t h all llnamed danchors h within ithi a document document.formsallformswithinadocument document.imagesallimageswithinadocument document.linksall allhyperlinkswithinadocument
documentproperties
Thedocumentobjectcontainspropertiestoeach accesstocertainpageelements: bodyreference e e e cetobodyelement ee e t cookiesets/readscookiesassociatedwithdocument domaindomainnameforcurrentdocument lastModifieddate/timedocumentlastmodified referrerURLthatreferredtocurrentdocument titletitleofcurrentdocument URLURLofcurrentdocument
10/5/2009
Copyrights
PresentationpreparedbyandcopyrightofDr.Tony Pittarese,EastTennesseeStateUniversity,Computerand InformationSciencesDept.(pittares@etsu.edu) Podcastlecturerelatedtothispresentationavailablevia ETSUiTunesU.
Microsoft,Windows,Excel,Outlook,andPowerPointareregisteredtrademarksofMicrosoftCorporation. IBM,DB2,DB2UniversalDatabase,Systemi,Systemi5,Systemp,Systemp5,Systemx,Systemz,Systemz10,Systemz9,z10,z9,iSeries,pSeries, xSeries,zSeries,eServer,z/VM,z/OS,i5/OS,S/390,OS/390,OS/400,AS/400,S/390ParallelEnterpriseServer,PowerVM,PowerArchitecture,POWER6+, POWER6,POWER5+,POWER5,POWER,OpenPower,PowerPC,BatchPipes,BladeCenter,SystemStorage,GPFS,HACMP,RETAIN,DB2Connect,RACF, Redbooks,OS/2,ParallelSysplex,MVS/ESA,AIX,IntelligentMiner,WebSphere,Netfinity,TivoliandInformixaretrademarksorregisteredtrademarksof IBMCorporation. LinuxistheregisteredtrademarkofLinus Torvalds intheU.S.andothercountries. OracleisaregisteredtrademarkofOracleCorporation. HTML,XML,XHTMLandW3CaretrademarksorregisteredtrademarksofW3C,WorldWideWebConsortium,MassachusettsInstituteofTechnology. JavaisaregisteredtrademarkofSunMicrosystems, Microsystems Inc Inc. JavaScriptisaregisteredtrademarkofSunMicrosystems,Inc.,usedunderlicensefortechnologyinventedandimplementedby Netscape. SAP,R/3,SAPNetWeaver,Duet,PartnerEdge,ByDesign,SAPBusinessByDesign,andotherSAPproductsandservicesmentionedhereinaswellastheir respectivelogosaretrademarksorregisteredtrademarksofSAPAGinGermanyandothercountries. BusinessObjectsandtheBusinessObjectslogo,BusinessObjects,CrystalReports,CrystalDecisions,WebIntelligence,Xcelsius,andotherBusiness ObjectsproductsandservicesmentionedhereinaswellastheirrespectivelogosaretrademarksorregisteredtrademarksofBusinessObjectsS.A.inthe UnitedStatesandinothercountries.BusinessObjectsisanSAPcompany. ERPsim isaregisteredcopyrightofERPsim Labs,HECMontreal. Otherproductsmentionedinthispresentationaretrademarksoftheirrespectiveowners.

08 - Document Object Model (DOM)

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

08 - Document Object Model (DOM)

Încărcat de

Drepturi de autor:

Formate disponibile

10/5/2009

THE DOCUMENT OBJECT MODEL (DOM)

getElementsByTagName canbecalledusingany elementobjecttojustlookwithinthatelement.

innerHTML sees/setstheentirecontentsofthe specifiedelement,includingotherembedded tags/elements.

EachnodehasapropertychildNodes whichcontainan arraylike listofchildren.

Toeasecoding,thenodepropertyfirstChild and lastChild areavailabletodirectlyreferencethose nodesinthenodearray. array

Haveevent H thandler h dl return t false f l to t prevent tfurther f th defaulteventhandling.

S-ar putea să vă placă și