Getting Started with DOM
Getting Started with DOM - Part 1/3
Aug 19, 2014
Talk's slide "Getting Started with DOM" given at MercadoLibre.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
NodeNode 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 Type9
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 / ConstructorsHTMLHtmlElement
HTMLHeadElement
HTMLLinkElement
HTMLTitleElement
HTMLStyleElement
HTMLBodyElement
HTMLFormElement
Inheritance
document
Node
HTMLElement
Propertiesdocument.URL!
document.location!
document.referrer!
document.lastModified!
document.defaultView!
document.plugins
Propertiesdocument.doctype
document.documentElement
document.head
document.body
document.activeElement
document.title
HTMLElement / NODE_ELEMENTdataset
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()
Related Documents
![Skaffold - storage.googleapis.com · [getting-started getting-started] Hello world! [getting-started getting-started] Hello world! [getting-started getting-started] Hello world! 5.](https://static.cupdf.com/doc/110x72/5ec939f2a76a033f091c5ac7/skaffold-getting-started-getting-started-hello-world-getting-started-getting-started.jpg)
