getting started with dom - part 1/3
DESCRIPTION
Talk's slide "Getting Started with DOM" given at MercadoLibre.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()