The DOM Flashcards
How would you check whether a variable or property references a jQuery object?
console.log($content.jquery);
Finally in a try catch statement has which value when arguments are passed in?
finally takes no arguments so even if one is passed it will be set to undefined.
What is the value of this within a function expression in the context of the Event object
The event.currentTarget
Can you create a clone from an element with an id attribute?
Cannot create a clone where there’s an id attribute anywhere on the cloned element.
What does textContent return?
It grabs all the text within an element, not just up to the next tag and combines it into a single string. It also includes all the whitespace which leads to excess whitespace.
What does nodeValue return?
null for elements and the text for text nodes.
For text nodes it returns text up to the next tag it encounters, whether a closing or opening one.
DOM nodes have different types. Mention two
Elements (HTML tags) and Text Nodes
What is the property ‘nodeName’ ?
A property that contains a string with the name of the type of the node. For Elements (anything that represents an HTML tag), this is the name of the corresponding tag in uppercase. The use of uppercase is a historical throwback to a time when standard practice was to write uppercase HTML tags; contemporary HTML uses lowercase tags, but this method still returns uppercase names.
let p = document.querySelector(‘p’);
> p.nodeName
= “P”
For text nodes – even empty nodes – the nodeName is “#text”. For comments, it’s “#comment”.
What does the node property ‘nodeType’ contain?
A number that represents the type of node. The number corresponds to a constant
let p = document.querySelector(‘p’);
> p.nodeType
= 1
> p.nodeType === Node.ELEMENT_NODE = true > 1 === Node.ELEMENT_NODE = true > document.nodeType === Node.DOCUMENT_NODE = true
What does the node property ‘nodeValue’ contain?
A text node returns a string with the value of a node up to next closing or opening tag. Elements don’t have any values and return null
What does the node property ‘textContent’ contain?
The text content of all the children of an element. It’s all concatenated into a single string and includes all the whitespace
What does ‘eventTarget’ do?
It provides event handling behaviour to interact with the page
What does calling toString() on an anchor element do and what should we use instead?
It returns the url of the anchor.
let a = document.querySelector('a');
a
<a href="http://domain.com/page">Page</a>
a.toString();
=> "http://domain.com/page"
We should instead call the constructor on the anchor element.
let a = document.querySelector('a').constructor;
=> function HTMLAnchorElement() { [native code] }
it references a function that creates Objects of the appropriate Element type. The value is browser-dependent, though, which adds some clumsiness when using it.
Chrome:
> document.querySelector(‘a’).constructor;
= function HTMLAnchorElement() { [native code] }
Firefox:
> document.querySelector(‘a’).constructor;
= function()
> document.querySelector(‘a’).constructor.name; /* Note use of .name property! */
= “HTMLAnchorElement”
SafariCopy:
> document.querySelector('a').constructor;
= function HTMLAnchorElement() {
[native code]
} = $1
Edge:
> document.querySelector(‘a’).constructor;
= function HTMLAnchorElement() { [native code] }
On determining the node type which technique should you use in which environment?
In the console use String or toString(). In the code file itself use the instanceof operator or the tagName property.
With element nodes, tagName returns the same value as nodeName.
> let p = document.querySelector('p');
> p instanceof HTMLParagraphElement;
= true
> p instanceof HTMLAnchorElement;
= false
> p instanceof Element;
= true
The downside here is that you have to test against a particular Element type. If all you need to know, though, is whether a node is an Element, you can test it with instanceof Element:
> p instanceof HTMLElement; = true > p instanceof Element; = true > p instanceof Node; = true > p instanceof SVGElement; = false
How would we extract the string referenced by ‘class’?
Ex:
class=“btn btn-lg btn-primary”
let button = document.querySelector('button');
button.className // => "btn btn-lg btn-primary"classList references a special array-like DOMTokenList object that has these properties and methods:
Name Description add(name) Add class name to element remove(name) Remove class name from element toggle(name) Add class name to element if it doesn't exist, remove if it does exist contains(name) Return true or false depending on whether element has class name length The number of classes to which element belongs
What are DOM levels?
Specifications by the W3C that say which features should be supported by browsers
All DOM objects are ___
They inherit from ___
The two most common types are ___ and ___
Nodes
Node
Element and Text
What is the difference between EventTarget and Node?
EventTarget provides the event handling behaviour to interact with the page. Node provides behaviour shared by all nodes
Text and Element are subtypes of ___
Node
Elements represent ___
HTML tags
Warning for when using setAttribute
Using setAttribute to modify certain attributes, most notably ‘value’ in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use Element.value instead of Element.setAttribute.
The Browser Object Model (BOM) lets you access components beyond what is displayed on the page. What are they?
The windows used to display web pages
The browser’s history
Sensors, including location
Set the class attribute ‘heading’ to primaryHeading with setAttribute()
primaryHeading.setAttribute(‘class’, ‘heading’)
If you create a clone with p.cloneNode(true)
and you go one to change the original after the copy was made is the change reflected in the copy and vice versa?
No. They are independent objects
What is the best strategy for updating text with JavaScript?
It is to place the text you need to update within an element; the element type doesn’t matter – even a bare span or div element will suffice. This approach makes using textContent simpler and safer to use.
What is a side effect of replacing the value of an element’s text-content?
It removes all child nodes from the element and replaces them with a text node that contains the value:
Can you use child and parent Element properties in all browsers by calling them on document?
No. Most browsers include these properties in document, which has type Document. Internet Explorer does not, though; it provides them in document.body instead. You can use document.body with them all and get the expected results.
Is the childNodes property live or not?
It’s live
Clicking cancel on a prompt returns…
null
What is the value of ‘this’ within the event handler when using a function declaration?
It’s the element to which the event handler was attached
this === event.currentTarget
What’s the difference between event.target and event.currentTarget?
event.target is the element that triggered the event. even.currentTarget is the element that the event handler was attached to
Aside from OOP what is another meaning of Execution Context?
An Execution Context is an abstract concept of an environment where the JavaScript code is evaluated and executed. Whenever any code is run in JavaScript, it’s run inside an execution context.
Define “single page application”
An application that relies solely on js and the XHR API to build the DOM
