JavaScript - The Document Object Model

Question 1

The Document Object Model (DOM) provides a way to ____ and _____ the contents of a web page.

Answer 1

The Document Object Model (DOM) provides a way to access and alter the contents of a web page.

Question 2

The DOM allows us to ___/____ or ___ elements, attributes and structure.

Answer 2

The DOM allows us to add/modify or remove elements, attributes and structure.

Question 3

The _________ is the document that is referred to in “Document Object Model”. JavaScript uses specific terms to refer to parts (page objects) of the document.

Answer 3

The webpage is the document that is referred to in “Document Object Model”. JavaScript uses specific terms to refer to parts (page objects) of the document.

Question 4

The DOM represents a document with a ____ _____. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic _____ to the tree; with them you can change the document’s ______, ______, or ______. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.

Answer 4

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document’s structure, style, or content. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.

Question 5

Every document is made up of “_____”. There are different types of nodes, primarily, _____, ______ and _____.

Answer 5

Every document is made up of “nodes”. There are different types of nodes, primarily, element, attributes and text.

Question 6

We can use these nodes to _____ specific parts of the document

Answer 6

We can use these nodes to target specific parts of the document

Question 7

If you need to address the text of a paragraph, you need to target the _____ _____ of the paragraph NOT the _______ _______.

Answer 7

If you need to address the text of a paragraph, you need to target the text node of the paragraph NOT the paragraph itself.

Question 8

Targeting elements nodes is used often. JavaScript can target elements easily via ______ and _____.

Answer 8

Targeting elements nodes is used often. JavaScript can target elements easily via classes and ids.

Example:
//returns a node
var node = document.getElementById("id");

//returns an element list of nodes
var nodeList = document.getElementsByTagName("tagName"); 

//returns an element list of nodes (HTML5 only)
var nodeList = document.getElementsByClassName("className");

Question 9

With modern browsers, you are able to target elements using _____ _______.

Answer 9

With modern browsers, you are able to target elements using CSS selectors.

//returns the first node that matches the selector
var node = document.querySelector(selectors);

//Returns a list of nodes that match the specified group of selectors
var nodeList = document.querySelectorAll(selectors);

Question 10

The query selector will only work for CSS selectors that the browser _______.

Answer 10

The query selector will only work for CSS selectors that the browser recognizes.

Question 11

However, elements may be targeted relative to other elements;

Answer 11

//targets elements that are children of parentElement
var nodeList = parentElement.getElementsByTagName("tagName");

Question 12

Give an example of how to modify content:

Answer 12

//creates a new  element node
var newElement = document.createElement("elementType")

//creates a new  text node
var textNode = document.createTextNode("some text here"); 

//appends the node to the parent as its last child
parentElement.appendChild(node); 

//inserts a new element before the target element where both elements are children of parentElement
parentElement.insertBefore(newElement, targetElement);

Question 13

Creating all of your elements using JavaScript enables greater _______ of your application, including performance. Therefore, developers do not target elements as described above, they reference existing JavaScript variables. Effectively managing this technique leads into more advanced concepts. Modern frameworks apply this technique. More on that later.

Answer 13

Creating all of your elements using JavaScript enables greater control of your application, including performance. Therefore, developers do not target elements as described above, they reference existing JavaScript variables. Effectively managing this technique leads into more advanced concepts. Modern frameworks apply this technique. More on that later.

Question 14

Give an example of how to modify attributes:

Answer 14

document.getElementById(‘linkId’).href = “http://www.google.com”;
myEl.getAttribute(“src”); myElemnt.setAttribute(“src”,”images/image2.jpg”); //created if doesnt exist.

Question 15

Give an example of how to modify styles:

Answer 15

document.getElementById(“p2”).style.color=”blue”;

Question 16

Give an example of how to remove elements:

Answer 16

var targetP = document.getElementById("p2");
targetP.parentNode.removeChild(targetP);

//or use the convenience function
targetP.remove();

Question 17

Classes can be _____ or ______ as necessary.

Answer 17

Classes can be added or removed as necessary.

Question 18

Modifying the _____ or _____ attributes can affect the look and feel of the entire page.

Answer 18

Modifying the class or id attributes can affect the look and feel of the entire page.

Question 19

List some properties:

Answer 19

nodeType
nodeName
nodeValue
innerHTML
childNodes
id
style
firstChild
nextElementSibling

Question 20

List some methods:

Answer 20

appendChild(child);
getAttribute( name )
getElementsByClassName(name)
insertBefore( insertedNode, adjacentNode )
removeChild( removedNode )
setAttribute( name, value )

Question 21

Some elements may have unique properties and methods. e.g. The video element has a ._______ property and ._____() and ._____() methods.

Answer 21

Some elements may have unique properties and methods. e.g. The video element has a .currentTime property and .play() and .pause() methods.

Question 22

There a a few built-in arrays that allow us to access certain types of elements on the page:

Answer 22

• document.forms
• document.links
• document.images
• document.body

Question 23

document.forms

Answer 23

document.forms is an array containing references to all the forms on the page.

Question 24

document.links

Answer 24

document.links is an array containing references to all the links on the page.

Question 25

document.images

Answer 25

document.images is an array containing references to all the images on the page.

Question 26

document.body refers to the _____

Answer 26

document.body refers to the body

Question 27

The DOM is a subset of the_______, the _______. Apart from the document, JavaScript can be used to script other parts of the browser including the _____, ________, _______, ______ and ________.

Answer 27

The DOM is a subset of the BOM, the Browser Object Model. Apart from the document, JavaScript can be used to script other parts of the browser including the screen, location, history, status and navigator.

Question 28

When we refer to document.getElementById, it is actually window.document.getElementById. window is the _______ object.

Answer 28

When we refer to document.getElementById, it is actually window.document.getElementById. window is the global object.

Question 29

The window object represents an _____ ____ ___ _____ _______.

Answer 29

The window object represents an open window in a browser.

Question 30

If a document contain frames ( tags), the browser creates one _______ object for the HTML document, and one additional ______ object for each frame.

Answer 30

If a document contain frames ( tags), the browser creates one window object for the HTML document, and one additional window object for each frame.