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
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
In this chapterDocument Access
The Document Object ModelThe DOM(Mapping your html)
The Document Object ModelEach element in html:
◦A node in DOM tree. The complete DOM tree
The Document Object ModelHow to handle the attributes of a
node?◦Make them child nodes.◦Call attribute nodes.
The Document Object ModelAccess the nodes you want
◦First step: identify the nodesBy Id
◦In CSS In JavaScript
The Document Object ModelAccess the nodes you wantBy tag names
◦In CSS
◦In JavaScript
The Document Object ModelAccess the child nodes from your
variable
Access the nodes by class names?◦document.getElementsByClassName
()
The Document Object ModelFind parent node
◦Use attribute “parentNode”;
Find children nodes
The Document Object ModelFind sibling nodes
The Document Object ModelGet attribute
◦Use “getAttribute()” or attribute name
◦E.g.
◦or
The Document Object ModelSet attribute
◦Use “setAttribute()”.
The Document Object ModelChange style
◦Use “style” to get CSS rules.◦E.g.,
The Document Object ModelJavaScript libraries
◦Provide different ways to access nodes.
◦JQuery By id By class
◦Dojo By id By class