Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Javascript & Dom

    Încărcat de

    Andrei Ursuleanu
    61 vizualizări9 pagini
    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.

    Descriere originală:

    Titlu original

    07-JavaScriptDOM

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PPT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    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.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    61 vizualizări9 pagini

    Javascript & Dom

    Încărcat de

    Andrei Ursuleanu
    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.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 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

    S-ar putea să vă placă și