JavaScript & DOM
What is DOM ?
Document Object Model API for accessing objects that compose a Document DOM0 images, links, anchors, frames, forms Netscape (1996) DOM1 XML, HTML manipulation W3C (1998) DOM2 getElementById, namespaces, event model W3C (2000) DOM3 XPath, serializing XML documents W3C (2004) All standard-compliant modern browsers implement World Wide Web Consortium (W3C) DOM specifications
Document properties
write, writeln, open, close document.cookie - cookies: format and limitation (4KB) domain, title, URL, lastModified, referrer document.getElementsById document.getElementsByTagName window.getSelection() / document.getSelection() / document.selection
DOM Structure and Types
<html> <head> <title>Sample Document</title> </head> <body> <h1>An HTML Document</h1> <p>This is a <i>simple</i> document.</p> </body> </html>
DOM Structure and Types
DOM has a tree structure and contains Nodes
Nodes have different types specified by nodeType Most common node types:
Element (1)
Text (3) Attribute (2)
Document (9)
Comment (8)
Element nodes represent common tags: A, P, DIV, etc
Text nodes represent character data content of an element
Attribute nodes represent element attributes (name/value) HTMLElement common attributes: id,
style, className, title
DOM Traversing
Tree structure => parent, children, siblings document.documentElement root HTML
Every node has properties that help traversing the tree structure: parentNode, childNodes, firstChild, lastChild, nextSibling, previousSibling
Attributes specific methods: getAttribute / setAttribute or getAttributeNode / setAttributeNode / createAttribute Difference between childNodes and children Difference between parentNode and offsetParent Nodes have nodeName, nodeType, nodeValue
DOM Manipulating
Creating new nodes using document's methods:
createElement, createTextNode, createAttribute, createDocument, createDocumentFragment
Inserting nodes in the tree with appendChild, insertBefore
Cloning nodes with cloneNode(true | false) Deleting nodes with removeChild and replaceChild Using documentFragment as a temporary workspace Altering text content with textNode's property: data and methods: insertData, deleteData, replaceData
Changing attributes with: setAttribute, removeAttribute innerHTML versus manipulating child nodes
DOM CSS
Modifying inline style through style attribute : object or string
CSS properties can be written directly: style.fontFamily Using className attribute
Accessing style applied on element (W3C / IE):
document.defaultView.getComputedStyle(x,null).color x.currentStyle.color
Accessing style sheets: document.styleSheets[]
Style sheets contain rules: cssRules[] / rules[] and imports: imports[] (e.g. document.styleSheets[1].cssRules[3])
Modifying style sheets with insertRule / deleteRule (W3C) or addRule / removeRule (IE)
CSS Object Model and its usage (e.g. offsetWidth)
References & Homework
http://www.quirksmode.org/dom/w3c_core.html http://www.quirksmode.org/dom/w3c_html.html http://www.quirksmode.org/dom/w3c_css.html
http://www.quirksmode.org/dom/w3c_cssom.html
http://www.javascriptkit.com/domref/index.shtml
Build an HTML page with a few interactive links / buttons that create new elements and insert them in the document tree, change the order of the elements existing in a parent, replace or remove elements and/or their content from the document tree
