2. CHAPTER 5 DOCUMENT OBJECT MODEL

3. The DOM specifies how:

4. Browsers create a model of an HTML page
The DOM specifies how: 1
Browsers create a model of an HTML page

5. 1 2 The DOM specifies how: Browsers create a model of an HTML page
JavaScript accesses / updates an HTML page

6. THE DOM TREE

7. <ul> <li></li> <li></li> <li></li> <li></li> </ul>

8. ELEMENT NODES
<ul> <li></li> <li></li> <li></li> <li></li> </ul> ul li

9. TEXT NODES
<ul> <li>fresh figs</li> <li>pine nuts</li> <li>honey</li> <li>balsamic vinegar</li> </ul> ul li
text

10. ATTRIBUTE NODES
<ul> <li id=“one” class=“hot”>fresh figs</li> <li id=“two” class=“hot”>pine nuts</li> <li id=“three” class=“hot”>honey</li> <li id=“four”>balsamic vinegar</li> </ul> ul li
attribute
text

11. To access and update the HTML, first you select the element(s) you want to work with.

12. Here are some of the ways ways to select element nodes
Here are some of the ways ways to select element nodes. They are known as DOM queries.

13. DOM QUERIES

14. getElementById(‘one’);
<ul>
<li id=“one” class=“hot”>fresh figs</li>
<li id=“two” class=“hot”>pine nuts</li>
<li id=“three” class=“hot”>honey</li>
<li id=“four”>balsamic vinegar</li>
</ul> ul li
getElementById(‘one’);

15. getElementsByClassName(‘hot’);
<ul>
<li id=“one” class=“hot”>fresh figs</li>
<li id=“two” class=“hot”>pine nuts</li>
<li id=“three” class=“hot”>honey</li>
<li id=“four”>balsamic vinegar</li>
</ul> ul li
getElementsByClassName(‘hot’);

16. getElementsByTagName(‘li’);
<ul>
<li id=“one” class=“hot”>fresh figs</li>
<li id=“two” class=“hot”>pine nuts</li>
<li id=“three” class=“hot”>honey</li>
<li id=“four”>balsamic vinegar</li>
</ul> ul li
getElementsByTagName(‘li’);

17. querySelector(‘#two’);
<ul>
<li id=“one” class=“hot”>fresh figs</li>
<li id=“two” class=“hot”>pine nuts</li>
<li id=“three” class=“hot”>honey</li>
<li id=“four”>balsamic vinegar</li>
</ul> ul li
querySelector(‘#two’);

18. querySelectorAll(‘li.hot’);
<ul>
<li id=“one” class=“hot”>fresh figs</li>
<li id=“two” class=“hot”>pine nuts</li>
<li id=“three” class=“hot”>honey</li>
<li id=“four”>balsamic vinegar</li>
</ul> ul li
querySelectorAll(‘li.hot’);

19. NODELISTS

20. If a DOM query returns more than one element, it is known as a NodeList.

21. Items in a NodeList are numbered and selected like an array:
var elements;
elements = getElementsByClassName(‘hot’);
var firstItem = elements[0];
Items in a NodeList are numbered and selected like an array:

22. You can check if there are elements before using a NodeList:
if (elements.length >= 1) {
var firstItem = elements[0]; }
You can check if there are elements before using a NodeList:

23. TRAVERSING THE DOM

24. You can move from one node to another if it is a relation of it
You can move from one node to another if it is a relation of it. This is known as traversing the DOM.

25. STARTING ELEMENT ul li li

26. ul li li
parentNode

27. ul li li
previousSibling

28. ul li
nextSibling

29. STARTING ELEMENT ul li li

30. ul li
firstChild

31. ul li
lastChild

32. WORKING WITH ELEMENTS

33. Elements can contain: Text nodes Element content Attributes

34. <li id=“one”>figs</li>
attribute
text:
figs
<li id=“one”>figs</li>

35. <li id=“one”><em>fresh</em> figs</li>
attribute
text:
figs em
fresh
<li id=“one”><em>fresh</em> figs</li>

36. <li id=“one”>six <em>fresh</em> figs</li>
attribute
text:
figs em
fresh
six
<li id=“one”>six <em>fresh</em> figs</li>

37. To access their content you can use: nodeValue on text nodes textContent for text content of elements innerHTML for text and markup

38. nodeValue works on text nodesli
attribute
text:
figs em
fresh
var el = document.getElementById(‘one’); el.firstChild.nextSibling.nodeValue; returns: figs

39. document.getElementById(‘one’).textContent; returns: fresh figs
textContent just collects text content li
attribute
text:
figs em
fresh
document.getElementById(‘one’).textContent; returns: fresh figs

40. innerHTML gets text and markupli
attribute
text:
figs em
fresh
document.getElementById(‘one’).innerHTML; returns: <em>fresh</em> figs

41. DOM MANIPULATION createElement() createTextNode() appendChild()
innerHTML
Builds up a string
Contains markup
Updates elements vs

42. CROSS-SITE SCRIPTING (XSS) ATTACKS

43. Untrusted data is content you do not have complete control over
Untrusted data is content you do not have complete control over. It can contain malicious content.

44. Sources of untrusted data: User creates a profile Multiple contributors Data from third-party sites Files such as images / videos are uploaded

45. Validate all input that is sent to the server
DEFENDING AGAINST XSS
Validate all input that is sent to the server
Escape data coming from the server

46. WORKING WITH ATTRIBUTES

47. ACCESSING AN ATTRIBUTE
1. Use a DOM query to select an element: var el = document.getElementById(‘one’); 2. Method gets attribute from element: el.getAttribute(‘class’);
ACCESSING AN ATTRIBUTE

48. Check for attribute and update it: var el = document
Check for attribute and update it: var el = document.getElementById(‘one’); if (el.hasAttribute(‘class’) { el.setAttribute(‘class’, ‘cool’); }
UPDATING AN ATTRIBUTE