document object model csc 2320 fall 2014 disclaimer: all words, pictures are adopted from “simple...
DESCRIPTION
The Document Object Model The DOM(Mapping your html)TRANSCRIPT
![Page 1: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/1.jpg)
Document Object ModelCSc 2320Fall 2014
Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from W3schools.Edited by Guoliang Liu, Only for Course CSc2320 at GSU CS Department
![Page 2: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/2.jpg)
In this chapterDocument Access
![Page 3: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/3.jpg)
The Document Object ModelThe DOM(Mapping your html)
![Page 4: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/4.jpg)
The Document Object ModelEach element in html:
◦A node in DOM tree. The complete DOM tree
![Page 5: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/5.jpg)
The Document Object ModelHow to handle the attributes of a
node?◦Make them child nodes.◦Call attribute nodes.
![Page 6: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/6.jpg)
The Document Object ModelAccess the nodes you want
◦First step: identify the nodesBy Id
◦In CSS In JavaScript
![Page 7: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/7.jpg)
The Document Object ModelAccess the nodes you wantBy tag names
◦In CSS
◦In JavaScript
![Page 8: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/8.jpg)
The Document Object ModelAccess the child nodes from your
variable
Access the nodes by class names?◦document.getElementsByClassName
()
![Page 9: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/9.jpg)
The Document Object ModelFind parent node
◦Use attribute “parentNode”;
Find children nodes
![Page 10: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/10.jpg)
The Document Object ModelFind sibling nodes
![Page 11: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/11.jpg)
The Document Object ModelGet attribute
◦Use “getAttribute()” or attribute name
◦E.g.
◦or
![Page 12: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/12.jpg)
The Document Object ModelSet attribute
◦Use “setAttribute()”.
![Page 13: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/13.jpg)
The Document Object ModelChange style
◦Use “style” to get CSS rules.◦E.g.,
![Page 14: Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5a4d1b4c7f8b9ab0599a5d1b/html5/thumbnails/14.jpg)
The Document Object ModelJavaScript libraries
◦Provide different ways to access nodes.
◦JQuery By id By class
◦Dojo By id By class