2. 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
3. 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
4. Contents
1. Node Types
2. Interfaces
3. Inheritance
4. Element Node
5. Text Node
6. Events
7. Document Fragment
25. 4. Element Node
Working with string
innerHTML!
innerText!
outerHTML!
textContent!
insertAdjacentHTML()
26. 4. Element Node
Working with nodes
appendChild()!
removeChild()!
replaceChild()!
insertBefore()!
cloneNode()
27. 4. Element Node
Node selection
single element
multiple elements
preconfigured
collections
28. 4. Element Node
Node selection
single element
multiple elements
preconfigured
collections
querySelector()!
getElementById()
29. 4. Element Node
Node selection
single element
multiple elements
preconfigured
collections
querySelector()!
getElementById()
querySelectorAll()!
getElementsByTagName()!
getElementsByClassName()
30. 4. Element Node
Node selection
single element
multiple elements
preconfigured
collections
querySelector()!
getElementById()
querySelectorAll()!
getElementsByTagName()!
getElementsByClassName()
document.all!
document.forms!
document.links!
document.images
47. 5. Text Node
Text nodes
<p>This is <code>TEXT_NODE</code>.</p>
48. 6. Events
It is a predefined or a custom moment in time that
occurs in relationship to an element in the DOM, de
document object or the window object.
77. 7. Document Fragment
It is a empty document template
It acts just like the live DOM tree
It only lives in memory
It can’t contain <body> and <html> node
It’s not added to the DOM when a fragment is
appended
78. 7. Document Fragment
innerHTML hack
var div = document.createElement(‘div’);!
var frag = document.createDocumentFragment();!
div.innerHTML = ‘<p>It is <strong>better</strong>.</p>’;!
!
frag.appendChild(div);!
document.body.appendChild(frag);