Chapter 5: Document Object Model Flashcards
What programming concept is the DOM an example of?
An API (Application Programming Interface)
What type of Nodes exist in the DOM?
document
element
Attribute
text
Each node is not an object. True or false?
False. Each node is an object with its own properties and methods
What methods can select an individual element node
getElementById()
querySelector()
What methods select multiple elements (novelist)?
getElemenetsByClassName()
getElementsByTagName()
querySelectorAll()
What methods allow you to traverse the DOM?
parentNode
previousSibling / nextSibling
firstChild lastChild
What methods allow you to access/update text nodes?
nodeValue
What methods allow you to work with HTML content?
innerHTML textContent createElement() createTextNode(); appendChild(); removeChild();
What methods or properties allow you to access to update attribute nodes?
className / id
hasAttribute();
getAttribute();
setAttribute();
removeAttribute();
What do the following terms mean?
DOM query
caching the selection
stores a reference
DOM query is a method to find elemtns in the dom
caching refers to assigning result of a dom query to variable. Saves resources if we need ro keep working with an element
Reference means that it stores the location of the node (not the actual node)
What is a Nodelist
A query that returns a collection of Nodes (at least 1. so if it only finds 1 match its still stored in a Nodelist, that’s different from get ing an individual element).
To access an element in a list we use a Array syntax (either [] or item();
What determines if a Nodelist is static or live?
It depends on the DOM query method
a live novelist is always run fresh and grabs matching elements. These are methods beginning getElementsBy…
A statici nodelist is run once and does not update subsequent times (so won’t pick up changes in the DOm). querySelector methods create static lists
Why’s it a good idea to check a novelist has at least 1 results before running the code?
It wastes resources otherwise nothing to update
if()elements.length >= 1 {
//do these cool changes
}
Why is Array syntax preferred over item method
It’s faster
What’s the DOM method to select elements by className?
getElementsByClassName(‘className’)
e.g. getElementsByClassName(‘hot’)
This method returns a Nodelist
It’s a newer DOM method so some browsers (IE8 -) don’t support it
What’s the DOM method to select elements by their tag?
getElementsByTagName(‘tagName’)
e.g. getElementsByTagName(‘a’)
What DOM method finds the first matching css selector
querySelector(‘selector’)
e.g. querySelector(‘li.hot’)
What DOM method finds all matching css selctors
querySelectorAll(‘selector’)
e.g. querySelector(‘li.cool’)
How do we update elements in a novelist?
We need to loop through them
for (var = 0; i
Is the following valid:
groceriesList.parentNode();
No.
When traversing the DOM, using parentNode, previous/next sibling and first/last child, these are properties of an element (They are not a method).
What happens if you call next sibling on an element and their isn’t one?
If there’s no matching element the result will be null.
True or false: Traversing the DOM properties are read only
True. They can only be used to select and element, not change them.
How do some browsers treat white space between nodes?
All but IE treat white space between nodes as an empty text node. White space means spaces and carriage returns.
How many nodes does the following markup create:
<li>Six <em>fresh</em> figs</li>
6
there’s an li, plus an attribute node for it
Since there’s extra markup in the contents of li that changes how it’s created. There’s two nodes for the li; one contains six the other fig
There’s another node for the em tag which has it’s own node containing fresh
What two ways can we work with the contents of elements
Navigate to the text node - works best when only text
Work with the containing element - works better when there’s mix of text and child elements
How do we access and update a text node using Node value?
Select the containing element, then traverse down and use nodeValue
e.g.
var el = document.getElementById(‘two’).firstChild.nodeValue = “Changed”;
How can we see the content of a text node?
select the text node and use the property nodeValue
Why should we avoid innerText
Support - Not by Firefox
Obeys CSS
Performance - slower than textContent
What possible issue exists with using the textContent property
IE8 and lower - No support
How can we add or remove HTML content
innerHTML property
DOM manipulation methods
How can we set the contents of an li with an id of one. We want to update its contents to include <span>Important</span>Out of stock
use innerHTML
document.getElementById(‘one’).innerHTML = ‘‘<span>Important!</span> Out of stock”;
How does DOM manipulation work
We create an element
We then create a text node
We append the tented to the element
We then append the element to the DOM
e.g var newEl = document.createElement('p');
var newElText = document.createTextNode('Buyers beware!');
newEl.appendChild(newElText);
document.getElementById('main').appendChild(newEl);
How would you remove an element.
Store the desired element in a variable.
var goodbye = document.getElementsByTagName(‘li’)[3];
Navigate to it’s parent.
var gbParent = goodbye.parentNode;
Then use the removeChild method on the parent element using the variable as an argument
gbParent.removeChild(goodbye);
What are pros and cons of inner HTML
Pros
- Add a lot of code using less markup than DOM manipulation
- Can be faster than DOM manipulation
- SImple way of removing content
Cons
- never use it to add user content to a page!(XSS risk)
- Can be difficult to isolate elements in a large DOM fragment
- Event handlers may not work as intended
What are the Pros and Cons of DOM manipulation
Pros
- Suited to changing DOM fragment where oe element has many siblings
- It does not affect event handlers
- easily allows script to add items incrementally
Cons
- If adding a lot, it can be slower than innerHTML
- More code
What is XSS
Cross Site Scripting Attacks
Malicious code trying to be passed into your system. Data you don’t have complete control over is untrusted data
How do you defend against cross site scripting?
- Validate data + don’t let untrusted users upload html js
- Also validate data on the server
- Whend data is sent to a client escape all potentially dangerous characters
- Only add user generated content to certain parts of template files
- Don’t create DOM fragments with untrusted HTML. Only added as text once escaped
How can you check if an element has an attribute?
How can you set an attribute?
hasAttribute takes an attribute name as an argument
var example = document.getElementById('one');
example.hasAttribute('class');
seAttribute takes two arguments, attribute plus value
example.setAttribute(‘class’, ‘complete’);
How can you add a class or id
use the setAttribute()
use id() or className() method
These will overwrite what’s there Important for classes (won’t add to it if there’s any existing ones)
How do you remove an Attribute
notALink.removeAttribute(‘href’);
