DOM Properties & Methods

Question 1

document.activeElement

Answer 1

DOM property that returns the element that has focus (read only)

const focus = document.activeElement
                  .tagName;

Question 2

.baseURI

Answer 2

Property that returns the base URI of the document (read only)

let base = document.baseURI;

Question 3

.body

Answer 3

The body property sets or returns the body element.

const docBody = document.body.innerHTML;
//returns all the HTML content

document. body.style… //changes CSS
document. body.innerHTML = “whole new HTML content”;

Question 4

.cookie

Answer 4

Property that sets or returns a semi-colon-separated list of key value pairs

let cookieList = document.cookie;

document.cookie = “name=joe; surname=smith”;

Question 5

.documentURI

Answer 5

sets or returns a documents location

returns null if document was created in memory

Question 6

.domain

Answer 6

returns the domain name of the server

returns null if the document is created in memory

Question 7

.embeds

Answer 7

returns a collection of all ‘embed’ elements in the document (read only)

Question 8

.forms

Answer 8

returns a collection of all ‘form’ elements in the document (read only)

let formCount = document.forms.length;

let id = document.forms[0].id;

Question 9

.head

Answer 9

returns the head element of the document

Question 10

document.images

Answer 10

returns a collection of all ‘img’ elements in the document

Question 11

document.links

Answer 11

returns a collection of all ‘a’ and ‘area’ elements with href attributes

Question 12

document.URL

Answer 12

returns the full document URL

Question 13

What is an HTML collection? What are the three properties?

Answer 13

An HTMLCollection is a list of HTML elements.
The elements in a collection can be accessed by index (starts at 0).

.length; returns the number of elements
.item(); returns the element at a specified index
.namedItem(); returns the element with a specific id

Question 14

What are the differences between HTMLcollection and NodeList?

What methods create each?

Answer 14

HTMLcollection is live, if an element is added to the DOM, the list will also change. [getElementsByClassName(), getElementsByTagName()]

NodeList is a static collection, the list will not change if an element is added to the DOM. [querySelectorAll(), childNodes, getElementsByName()]

Question 15

What is a NodeList, what are its six properties?

Answer 15

A NodeList is a static collection (list) of Node Objects.
The nodes in a NodeList can be accessed by index (starts at 0).

.length; returns the number of nodes
.entries(); returns an iterator with key:value pairs
.forEach(); executes a callback function for each node
.item(); returns the node at the specified index
keys(); returns an iterator with the keys from the list
.values() returns an iterator with the values from the list

Question 16

What is a DOMTokenList? How is it created?

Answer 16

A DOMTokenList is a set of space separated tokens.
That can be accessed by index (starts at 0).

The set is created with the classList property of an HTML element.

Question 17

What are the properties and methods of a DOMTokenList?

Answer 17

.add() .remove() .replace() .contains() .length .forEach()

.entries(); returns an iterator key:value pairs
.keys() .values()

.item() returns the token at a specified index
.supports() returns true if a token is one of an attribute’s supported tokens
.toggle() toggles between tokens in the list

Question 18

What is a NamedNodeMap? How is one created?

What are its properties and methods?

Answer 18

A NamedNodeMap is an unordered collection of an element’s attributes.
In other words: a NamedNodeMap is a list of Attr objects (HTML attributes).

const nodeMap = document.getElementById(“id”).attributes;

.name; //returns an attribute's name
.value; //sets/returns an attribute's value
.specified; //boolean on if the attribute is specified
.length;
.getNamedItem() //returns a node by name
.item() // returns a node by index
.removeNamedItem()
.setNamedItem()

Question 19

.addEventListener()

.removeEventListener()

Answer 19

.addEventListener() //attaches an event handler

.removeEventListener() //removes

(also used on elements)

Question 20

document. querySelector()

document. querySelectorAll()

Answer 20

.querySelector() //returns the first element that matches the a specific CSS selector

.querySelectorAll() //returns a static NodeList of all elements that match the selector

(can also be used on elements)

Question 21

.getElementsByClassName()

.getElementsByTagName()

Answer 21

.getElementsByClassName() //returns an HTMLcollection containing all elements with the class name

.getElementsByTagName() //returns an HTMLcollection with all elements that have the specified tag name

(also used on elements)

Question 22

.open()

.write()

.close()

Answer 22

!!! replaces entire document !!!
document.open() //Opens an HTML output stream to collect output from .write()

document.write(“h1Hello World!/h1”) //does not add a new line

.writeln() //adds a new line

document.close() //Closes the output stream previously opened with .open()

Question 23

What are the methods to create nodes/events within the document?

Answer 23

.createAttribute()
.createDocumentFragment()
.createTextNode()

.createElement()
.createEvent()
.createTextNode()

.createComment()

Question 24

.adoptNode()

.importNode()

.cloneNode()

Answer 24

.adoptNode() // The adopted node can be of all types.
Any child nodes (descendants) of the adopted node, are also adopted.
The original node (with child nodes) is removed from the other document.

.importNode() // The imported node is not removed from the original document. The imported node is a copy of the original. Can use a 2nd parameter set to true to import child nodes.

.cloneNode() // creates a copy of a node, and returns the clone. (attributes and values too) use the deep parameter of true if you want descendants.

Question 25

.getElementById()

Answer 25

returns the element that has the specified id value

Question 26

.getElementsByName()

Answer 26

Returns a live Nodelist containing all elements with the specified name.

Question 27

document.normalize()

Answer 27

removes empty text nodes, and joins adjacent text nodes.

Question 28

document.hasFocus()

Answer 28

Returns a true if the document (or any element in the document) has focus.
Otherwise it returns false.

Question 29

document.title

Answer 29

sets or returns the title of the document (in the head)

Question 30

document.documentURI

Answer 30

property sets or returns a document’s location.

returns null if the document was created in memory.

Question 31

document.documentElement

Answer 31

returns the whole HTML element

Question 32

document.readyState

Answer 32

returns the loading status of the document

Question 33

What scope do DOM object have?

How does this impact your code?

Answer 33

DOM objects have global scope

This means that if we want to contain functionality in a local scope, we cannot contain the DOM functions or objects.