DOM Properties & Methods Flashcards
document.activeElement
DOM property that returns the element that has focus (read only)
const focus = document.activeElement
.tagName;
.baseURI
Property that returns the base URI of the document (read only)
let base = document.baseURI;
.body
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”;
.cookie
Property that sets or returns a semi-colon-separated list of key value pairs
let cookieList = document.cookie;
document.cookie = “name=joe; surname=smith”;
.documentURI
sets or returns a documents location
returns null if document was created in memory
.domain
returns the domain name of the server
returns null if the document is created in memory
.embeds
returns a collection of all ‘embed’ elements in the document (read only)
.forms
returns a collection of all ‘form’ elements in the document (read only)
let formCount = document.forms.length;
let id = document.forms[0].id;
.head
returns the head element of the document
document.images
returns a collection of all ‘img’ elements in the document
document.links
returns a collection of all ‘a’ and ‘area’ elements with href attributes
document.URL
returns the full document URL
What is an HTML collection? What are the three properties?
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
What are the differences between HTMLcollection and NodeList?
What methods create each?
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()]
What is a NodeList, what are its six properties?
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
What is a DOMTokenList? How is it created?
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.
What are the properties and methods of a DOMTokenList?
.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
What is a NamedNodeMap? How is one created?
What are its properties and methods?
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()
.addEventListener()
.removeEventListener()
.addEventListener() //attaches an event handler
.removeEventListener() //removes
(also used on elements)
document. querySelector()
document. querySelectorAll()
.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)
.getElementsByClassName()
.getElementsByTagName()
.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)
.open()
.write()
.close()
!!! 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()
What are the methods to create nodes/events within the document?
.createAttribute()
.createDocumentFragment()
.createTextNode()
.createElement()
.createEvent()
.createTextNode()
.createComment()
.adoptNode()
.importNode()
.cloneNode()
.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.
.getElementById()
returns the element that has the specified id value
.getElementsByName()
Returns a live Nodelist containing all elements with the specified name.
document.normalize()
removes empty text nodes, and joins adjacent text nodes.
document.hasFocus()
Returns a true if the document (or any element in the document) has focus.
Otherwise it returns false.
document.title
sets or returns the title of the document (in the head)
document.documentURI
property sets or returns a document’s location.
returns null if the document was created in memory.
document.documentElement
returns the whole HTML element
document.readyState
returns the loading status of the document
What scope do DOM object have?
How does this impact your code?
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.
