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