Scribd
Upload
98 views

Javascript & Dom

This document discusses the Document Object Model (DOM) and how to manipulate HTML documents using JavaScript. It covers DOM specifications, document properties, DOM structure and node types, traversing the DOM tree, manipulating nodes by creating, inserting, cloning, deleting, and altering text content. It also discusses modifying styles through inline styles, class names, style sheets, and the CSS Object Model. Finally, it provides references and suggests building an HTML page with interactive elements to practice DOM manipulation.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
98 views

Javascript & Dom

This document discusses the Document Object Model (DOM) and how to manipulate HTML documents using JavaScript. It covers DOM specifications, document properties, DOM structure and node types, traversing the DOM tree, manipulating nodes by creating, inserting, cloning, deleting, and altering text content. It also discusses modifying styles through inline styles, class names, style sheets, and the CSS Object Model. Finally, it provides references and suggests building an HTML page with interactive elements to practice DOM manipulation.

Uploaded by

Andrei Ursuleanu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like