• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Getting Started with DOM - Part 1/3
 

Getting Started with DOM - Part 1/3

on

  • 124 views

Talk's slide "Getting Started with DOM" given at MercadoLibre.

Talk's slide "Getting Started with DOM" given at MercadoLibre.

Statistics

Views

Total Views
124
Views on SlideShare
124
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Getting Started with DOM - Part 1/3 Getting Started with DOM - Part 1/3 Presentation Transcript

    • Getting Started with DOM
    • writing HTML documents 1. you encapsulate HTML inside other HTML 2. you set up a hierarchy 3. it is indicated visually by indenting 4. it can be expressed as a tree
    • browser’s job 1. when loads the HTML interrupts the process 2. to simulate the markup encapsulation 3. parsing this hierarchy to create a tree of objects
    • Node Node Type Interfaces / Constructors Inheritance Properties and Methods Collections type Traversing
    • HTML document <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • HTML document document
    • DOCUMENT_NODE === 9 <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • ELEMENT_NODE === 1 <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • ELEMENT_NODE === 1 document.body
    • <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • ATTRIBUTE_NODE === 2 <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • ATTRIBUTE_NODE === 2 document.createAttribute(‘class’);
    • TEXT_NODE === 3 <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • TEXT_NODE === 3 document.createTextNode(‘Hello World!’);
    • <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • DOCUMENT_TYPE_NODE === 10 <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • DOCUMENT_TYPE_NODE === 10 document.doctype
    • <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • DOCUMENT_FRAGMENT_NODE === 11 <!doctype html> <html> <head> <tittle></tittle> </head> <body class=“widget”> Hello World! </body> </html>
    • DOCUMENT_FRAGMENT_NODE === 11 document.createDocumentFragment()
    • Node Type 9 1 2 3 11 10 document.DOCUMENT_NODE document.ELEMENT_NODE document.ATTRIBUTE_NODE document.TEXT_NODE document.DOCUMENT_FRAGMENT_NODE document.DOCUMENT_TYPE_NODE
    • Interfaces / Constructors HTMLHtmlElement HTMLHeadElement HTMLLinkElement HTMLTitleElement HTMLStyleElement HTMLBodyElement HTMLFormElement
    • Inheritance document Node HTMLElement
    • Properties document.URL! document.location! document.referrer! document.lastModified! document.defaultView! document.plugins
    • Properties document.doctype document.documentElement document.head document.body document.activeElement document.title
    • HTMLElement / NODE_ELEMENT dataset attributes tagName children createElement() getAttribute() setAttribute() hasAttribute() removeAttribute() classList()
    • HTMLElement / NODE_ELEMENT innerHTML innerText outerHTML textContent insertAdjacentHTML()
    • HTMLElement / NODE_ELEMENT appendChild() removeChild() replaceChild() insertBefore() cloneNode()