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"
