Chapter 5: Document Object Model

Question 1

What programming concept is the DOM an example of?

Answer 1

An API (Application Programming Interface)

Question 2

What type of Nodes exist in the DOM?

Answer 2

document
element
Attribute
text

Question 3

Each node is not an object. True or false?

Answer 3

False. Each node is an object with its own properties and methods

Question 4

What methods can select an individual element node

Answer 4

getElementById()

querySelector()

Question 5

What methods select multiple elements (novelist)?

Answer 5

getElemenetsByClassName()
getElementsByTagName()
querySelectorAll()

Question 6

What methods allow you to traverse the DOM?

Answer 6

parentNode
previousSibling / nextSibling
firstChild lastChild

Question 7

What methods allow you to access/update text nodes?

Answer 7

nodeValue

Question 8

What methods allow you to work with HTML content?

Answer 8

innerHTML
textContent
createElement()
createTextNode();
appendChild();
removeChild();

Question 9

What methods or properties allow you to access to update attribute nodes?

Answer 9

className / id

hasAttribute();
getAttribute();
setAttribute();
removeAttribute();

Question 10

What do the following terms mean?
DOM query
caching the selection
stores a reference

Answer 10

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)

Question 11

What is a Nodelist

Answer 11

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();

Question 12

What determines if a Nodelist is static or live?

Answer 12

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

Question 13

Why’s it a good idea to check a novelist has at least 1 results before running the code?

Answer 13

It wastes resources otherwise nothing to update

if()elements.length >= 1 {
//do these cool changes
}

Question 14

Why is Array syntax preferred over item method

Answer 14

It’s faster

Question 15

What’s the DOM method to select elements by className?

Answer 15

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

Question 16

What’s the DOM method to select elements by their tag?

Answer 16

getElementsByTagName(‘tagName’)

e.g. getElementsByTagName(‘a’)

Question 17

What DOM method finds the first matching css selector

Answer 17

querySelector(‘selector’)

e.g. querySelector(‘li.hot’)

Question 18

What DOM method finds all matching css selctors

Answer 18

querySelectorAll(‘selector’)

e.g. querySelector(‘li.cool’)

Question 19

How do we update elements in a novelist?

Answer 19

We need to loop through them

for (var = 0; i

Question 20

Is the following valid:

groceriesList.parentNode();

Answer 20

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).

Question 21

What happens if you call next sibling on an element and their isn’t one?

Answer 21

If there’s no matching element the result will be null.

Question 22

True or false: Traversing the DOM properties are read only

Answer 22

True. They can only be used to select and element, not change them.

Question 23

How do some browsers treat white space between nodes?

Answer 23

All but IE treat white space between nodes as an empty text node. White space means spaces and carriage returns.

Question 24

How many nodes does the following markup create:

<li>Six <em>fresh</em> figs</li>

Answer 24

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

Question 25

What two ways can we work with the contents of elements

Answer 25

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

Question 26

How do we access and update a text node using Node value?

Answer 26

Select the containing element, then traverse down and use nodeValue

e.g.

var el = document.getElementById(‘two’).firstChild.nodeValue = “Changed”;

Question 27

How can we see the content of a text node?

Answer 27

select the text node and use the property nodeValue

Question 28

Why should we avoid innerText

Answer 28

Support - Not by Firefox
Obeys CSS
Performance - slower than textContent

Question 29

What possible issue exists with using the textContent property

Answer 29

IE8 and lower - No support

Question 30

How can we add or remove HTML content

Answer 30

innerHTML property

DOM manipulation methods

Question 31

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

Answer 31

use innerHTML

document.getElementById(‘one’).innerHTML = ‘‘<span>Important!</span> Out of stock”;

Question 32

How does DOM manipulation work

Answer 32

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);

Question 33

How would you remove an element.

Answer 33

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);

Question 34

What are pros and cons of inner HTML

Answer 34

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

Question 35

What are the Pros and Cons of DOM manipulation

Answer 35

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

Question 36

What is XSS

Answer 36

Cross Site Scripting Attacks

Malicious code trying to be passed into your system. Data you don’t have complete control over is untrusted data

Question 37

How do you defend against cross site scripting?

Answer 37

• 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

Question 38

How can you check if an element has an attribute?

How can you set an attribute?

Answer 38

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’);

Question 39

How can you add a class or id

Answer 39

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)

Question 40

How do you remove an Attribute

Answer 40

notALink.removeAttribute(‘href’);