Document Object Model
what are the characters that should be escaped so they appear as characters not processed as code?
& (&) < (<) > (>) ` (`) ' (') " (") / (/)
what are the disadvantages of using the *DOM manipulation* property?
1. slower to load than innerHTML if you have lots of changes to page content 2. you need to write more code to achieve the same results with innerHTML
when adding untrusted content to a page with JavaScript what properties should you not use?
innerHTML
what are the two methods for adding and removing content from the DOM tree?
innerHTML property and DOM manipulation
what is generally considered better to update values using? methods or properties?
it's considered better to use properties
what is data that you have no control over called?
untrusted data and any HTML from untrusted sources opens your site to XSS attack but only from certain characters
what is DOM manipulation?
using a set of methods and properties to access, create and update elements and text nodes
how does the browswer represent the page?
using the DOM tree
what is the most popular method to avoid difficulties traversing the DOM?
using the JavaScript library known as JQuery
what should you do with all ASCII characters will a value less than 256 that are not alpha numeric?
you should escape all the characters
what are the steps to removing content via innerHTML?
1. set innerHTML to an empty string to 2. remove one element from a DOM fragment, provide the entire fragment minus that element
what are the disadvantages of using the *innerHTML* property?
1. should not be used to add content from a user (username or blog comment) 2. difficult to isolate single lements to update withing larger DOM a Fragment 3. event handlers my no longer work as intended
what are the steps to adding new content via innerHTML?
1. store new content including markup as a string in a in a variable 2. select the element whose content you wish to replace. 3. set the elements innerHTML property to be the new string example: <p id = 'new'></p> <script> var newContent = document.getElementById('new'); newContent.innerHTML = 'this is where I\'m putting new content via <strong>innerHTML</strong> property';
to safely use innerHTML(JavaScript) and .html()(JQuery) what precautions must be made?
1. you must control all markup generated(no user content can container markup) 2. User content must be escaped and added as text via .text() and textContent or innerText (JQuery and JavaScript)
what should you never allow unstrusted users to do?
submit HTML markup or JavaScript
how is text accessed and updated?
text inside any element is stored in the text node, to access the text node: 1. select element: <li> 2. use firstChild property to get to text node 3. use text node's only property (*nodeValue*) which lets you access or updated contents on text node
when adding untrusted content to a page with JavaScript what properties should you use?
textContent or innerText
what is the only property of the text node?
the *nodeValue* property
when using previous/next first/last sibling properties to update content what will happen to any prior content
the content and markup will be overwritten in the case of the <body> element the entire page will be overwritten
what happens if you use the previous/next , first/last sibling properties where none exists?
the result will be *null*
what is the function of the attribute node?
they are part of an element not child of an element, it has methods and properties to read or change element attributes like changing the values of a class name to create new css rule
what do most browser with the exception of IE do when it comes to white space?
they treat whitespace as if it were a text node?
why do the comment section of many websites limit the amount of markup that can be used?
to prevent people from entering malicious code like <script> tags and other characters with an event handler attribute
what are the steps to adding new content via DOM manipulation?
use a DOM method to create a new node and store it in a variable, use another DOM method to attach it to the proper place in the DOM tree.
what should you do if you have links to user input like user profiles or search queries?
use the JavaScript method encodeURIComponent() to encode the characters (,)(/)(?)(:)(&)(=)(+)(#)
how do you update and access the contents of an element node?
using the properties textContent and innerHTML DOM manipulation
syntax for selecting an element from a NodeList
var elements = document.getElementsByClassName('list'); if (elements.length >=1){ var firstItem = elements.item(0); var getItem = document.getElementById('output'); getItem.textContent = firstItem; }
square bracket syntax for selecting an element from a NodeList
var elements = document.getElementsByClassName('list'); if (elements.length >=1){ var firstItem =* elements.item[0]*; var getItem = document.getElementById('output'); getItem.textContent = firstItem; }
syntax for creating attributes and changing values
var fifthItem = document.getElementById('five'); fifthItem.className = 'gray'; var fourthItem = document.getElementsByTagName('li').item(3); fourthItem.setAttribute('class','green');
syntax for checking and getting attribute nodes
var firstItem = document.getElementById('one'); if (firstItem.hasAttribute('class')){ var attr = firstItem.getAttribute('class') } var firstItem2 = document.getElementById('one') if (firstItem2.hasAttribute('id')){ var attr2 = firstItem2.getAttribute('id') } var getItem = document.getElementById('scriptResults').innerHTML = 'the first item has a class name of ' + attr + ' and an id name of ' + attr2;
syntax for using methods that select individual elements
var getOne = document.getElementById('one'); getOne.textContent = 'This is the text that I\'m placing in the paragraph tag using DOM manipulation';
syntax for looping through a NodeList
var hotItems = document.querySelectorAll('li.hot'); if (hotItems.length >0 ){ for (var i = 0; i < hotItems.length; i++){ hotItems[i].className = 'cool'; } }
syntax for adding element via DOM manipulation
var newEl = document.createElement('li'); var newText = document.createTextNode('quinoa'); newEl.appendChild(newText); var position = document.getElementsByTagName('ul')[0]; position.appendChild(newEl);
what is a live NodeList?
when your script updates the page and NodeList is updated as well.
what is a static NodeList?
when your script updates the page and the NodeList is note updated to reflected the changes
when an element contains a mix of text and other elements what are you more likely to do?
work with the containing element rather than individual nodes for each descendant
what precaution should be taken with content generated by users?
you should be the only one inserting content generated by user into certain parts of template files.
what are the 5 properties of traversing the DOM?
*parentNode*, *previousSibling*, *nextSibling*, *firstChild*, *lastChild*
when adding untrusted content to a page with JQuery what properties should you use?
.text()
what are 3 commons ways to select an individual node?
1. *getElementById()*: uses the value of an elements id attribute 2. *querySelector()*: uses CSS class selector returns only the first matching element 3. traversing between nodes
what are the 3 steps DOM manipulation uses to add content?
1. create the element- *createElement()*: this creates a new element node that can be stored in a variable 2. give it content- *createTextNode()*:creates a text node to be stored in a variable 3. add it to the DOM- *appendChild()*:allows you to specify which element you would like to add the node to as a child
how many node types the DOM Tree have?
4 types: document node, element node, attribute node, and text node
the DOM is also called?
an API
what is an API(Application Program Interface)?
an interface that let programs and scripts talk to each other
what is a *NodeList*?
an object called a *collection* which is a collection of element nodes, each with an idex number like an array, they are stored in the same order as they appear in the HTML page.
what is a node
an object with it's own properties and methods that represent an element on the page
how does the innerHTML property return HTML from an element?
as one long string including the markup of the element
why is it safe for a database to safely contain markup and script from trusted sources?
beause it does not try to process the code, it only stores it
why does the *getElementsByClassName()* method always return a NodeList?
because many elements can have the same class attribute value( name)
why is double checking validation on a server before displaying or storing user content on a database important?
because users can bypass validation in a browser by turning off JavaScript
what are the danger of using the innerHTML property?
it could make you site vulnerable to an *XSS*(*Cross-Site Scripting Attack*)
what would happen if you stripped all white space from your document?
the page size would be smaller and faster to load but it would also be harder to read the code
what is it called when you have an element node and you select another element in relation to it?
traversing the DOM
what should you do with DOM fragments created form untrusted sources?
you should not create them and it should only be added as text once it has been escaped using the escape character (backslash \)*
in addition to <script> tags what else can a malicious attacker use to create an XSS attack?
XSS can also be triggered by malicioius code in CSS or URLs
how attribute values are accessed and updated?
*className/id*: lets you get or update the values of a class or id attributes *hasAttribute()*: checks if attribute exists *getAttribute()*: get its value *setAttribute()*: updates the its value *removeAttribute()*: removes an attribute
how to work with HTML content?
*innerHTML*: allows you to access child elements and text content *textContent*: only allows access to text content several methods create and add new nodes to the DOM tree, called *DOM manipulation*: *createElement()* *createTextNode()* *appendChild()/removeChild()*
when adding untrusted content to a page with JQuery what properties should you not use?
.html()
what are 3 commons ways to select multiple nodes?
1. *getElementsByClassName()*: selects all elements with a specified class name value and Retuns a NodeList faster than querySelectorAll() 2. *getElementsByTagName()*: selects all elements by their tag name faster than querySelectorAll() and Retuns a NodeList 3. *querySelectorAll()*: Selects all CSS selectors with a specified name value and returns a NodeList
why should the innerText property be avoided?
1. Firefox doesn't support it because it not part of any standard 2. Will not show content hidden by CSS 3. It is slower to retrieve content than textContent property
what are the two steps to accessing and updating the DOM tree?
1. locate the node that represent the element to work with 2. use its text content, child elements and attributes.
what are the disadvantages of using the *document.write()* method?
1. only works when page initially loads 2. if you use it after page loads it can: a. overwrite the entire page b. fail to add content to the page c. create a new page 3. can cause problems with XHTML pages that are strictly validated
what options are possible when a DOM query returns a *NodeList*?
1. select an element from the NodeList 2. loop through each item on the NodeList and perform the same statements on each of the element nodes
what are the 3 steps for removing content form the DOM tree via DOM manipulation?
1. select and store the element to be removed in a variable: you can use any DOM query method 2. select and store the parent of that element in a variable: the *parentNode* property is the simplest way 3. remove the element from its containing element: the *removeChild()* method's parameter references the element you no longer want
what is the two step process to updating attributes?
1. select the element node with the attribute to be worked with by using a DOM query method followed by a member operator 2. use a method or property that work with element attributes: *className/id*: lets you get or update the values of a class or id attributes *hasAttribute()*: checks if attribute exists *getAttribute()*: get its value *setAttribute()*: updates the its value *removeAttribute()*: removes an attribute
what are the most notable property and method of the NodeList?
1.* length property*: tell how many items in the NodeList 2. *item() method*: returns specific node from NodeList when you supply an index number in parameters 3. you can also use square bracket syntax to get items from NodeList
what are the places you should never place user content?
1.<script>not here</script>:script tags 2.<!--not here--->:comments 3.<div>not here</div>:tag names 4.<div href = 'not here'></>:attributes 5.{color:not here}:css values
what does this code do? <li id= 'one'><em>fresh</em> figs</li> <script> var elContent = document.getElementById('one').innerHTML; document.getElementById('one').innerHTML = 'never had fresh figs'; </script>
1.collects the contents of the list item and add them to a variable called *elContent*, 2. elContent now holds '<em>fresh</em>figs' 3.adds new string 'never had fresh figs' overwrites previous content
what are the advantages of using the *innerHTML* property?
1.it can add lots of new markup with less code than DOM manipulation methods 2.it is faster than DOM manipulation when adding new elements to a page 3. Simple way to remove all content from an element by assigning it a blank string
what are the advantages of using the *DOM manipulation* property?
1.suite to changing one lement from a DOM fragment when there are many siblings 2.does not affect event handlers 3. easily allows a script to aqdd elements incrementally(when uo do not want to alter lots of code at once)
syntax for removing element from the DOM tree
<li>chicken</li> <li>pork</li> <li>beef</li> <li>fish</li> <li>ice cream</li> <script> var removeEl = document.getElementsByTagName('li')[4]; var elContainer = removeEl.parentNode; elContainer.removeChild(removeEl); </script>
syntax for accessing & changing a text node
<ul><li id="one" class="hot"><em>fresh</em> figs</li> <li id="two" class="hot">pine nuts </li> <li id="three" class="hot">honey</li> <li id="four">balsamic vinegar</li></ul> <script> var itemTwo = document.getElementById('two'); var elText = itemTwo.firstChild.nodeValue; elText = elText.replace('pine nuts','kale'); itemTwo.firstChild.nodeValue = elText; </script>
syntax for accessing text only
<ul><li id="one" class="hot"><em>fresh</em> figs</li> <li id="two" class="hot">pine nuts </li> <li id="three" class="hot">honey</li> <li id="four">balsamic vinegar</li></ul> <p id="scriptResults"></p> <script> var firstItem = document.getElementById('one'); var showTextContent = firstItem.*textContent*; var showInnerText = firstItem.innerText; var msg = '<p>textContent: ' + showTextContent + '</p>'; msg += '<p>innerText: ' + showInnerText + '</p>'; var el = document.getElementById('scriptResults'); el.innerHTML = msg; firstItem.textContent = 'sourdough bread'; </script>
what is the function of the element node?
represents elements on the page so that its content can be manipulated by the DOM via text or attribute nodes
what are the steps to removing content via DOM manipulation?
a single DOM method can remove all the content from a element node example: <ul> <li>chicken</li> <li>pork</li> <li>beek</li> <li>fish</li> <li>ice cream</li> </ul> <script> var removeEl = document.getElementsByTagName('li')[4]; var elContainer =* removeEl*.parentNode; elContainer.*removeChild*(removeEl); </script>
what should be done with all data that leaves your database?
all potentially dangerous charcters should be escaped
how does caching the selection work?
by storing the location of the elements in the DOM tree within a variable
how can you select element nodes?
by their id or class attribute, tag name, or CSS selector syntax
what is it called when you use a variable to store the results of a DOM query?
caching the selection or caching DOM queries
what do programmers do to keep from wasting resources when there are no elements to work with?
check that there is at least one item in the NodeList using the length property of the NodeList
what is the quickest way to access an element within your page?
evaluating the minimum number of nodes on the way to the element that you want to work with, like getElementById() which returns a specific element with a unique id attribute value
what does the parentNode property do?
find the element node for the containing or parent element in HTML (1)starting with first <li> parent is <ul>
what does the firstChild lastChild property do?
finds the first or last child or the current element (3)the first <li> is first child and last <li> is last child of the <ul> element
what does the previousSibling nextSibling property do?
finds the previous or next sibling of the node if one exists. (2)first <li> has no previous sibling it's next sibling is second <li>
what is the function of the text node?
it accesses the text within a an element. they cannot have children, are always a new branch and no further branch comes from it
what can the innerHTML property be used on and for
it can be used on any element node, to replace and retrieve content
what are some of the danger of an XSS ?
it could give the attacker access to user accounts which includes: 1. making purchases 2. posting defamatory content 3. spreading malicious code further and faster
what is an *XSS*?
it involves an attacker placing malicious code into your site that could grant them access to: 1. The DOM and it's data 2. The websites cookies 3. Session tokens: information that identifies your from other users when loging into a site
how is the content updated using innerHTML?
it is provided as a string and can also contain markup for descendant elements example: elExample.innerHTML = '<em>this is my example for innerHTML</em>';
what is validation?
it is when you restrict user from inputing certain characters?
what is the function of the document node?
it rest atop the DOM tree, it represent the entire page, corresponds to the document object and all other nodes in the DOM tree are accessed through it
When a DOM query can return more than one node, what will it do?
it will always return a node list even if it only finds one matching element
what happens with new content created via innerHTML
it's processed as a string, adding any elements to the DOM tree
what are the methods that return a static NodeList?
methods beginning with *querySelector*... which uses CSS syntax
what are the methods that return a live NodeList?
methods beginning with getElementsBy...
what are DOM queries?
methods that find elements in the DOM tree example: *getElementById()*, *getElementsByClassName()*
what is it and how do you traverse between element nodes?
moving from one element node to a related node 1. *parentNode*: selects the parent of the current element node and return just one element 2. *previousSibling/nextSibling*: selects previous or next sibling from DOM tree 3. *firstChild/lastChild*: selects the first or last child of the current element
what is the best course of action when an element contains only text?
navigate to the text nodes to be worked with
can the previous/next, first/last sibling properties update a node?
no, they are read-only, meaning they can only be used to select a new node, not manipulate, or update it
what are the advantages of using the *document.write()* method?
quick and easy way to show beginners how content can be added to a page