JS Concepts Notes:
DOM:
Main DOM node properties are:
nodeType
We can use it to see if a node is a text or an element node. It has a
numeric value: 1 for elements,3 for text nodes, and a few others for
other node types. Read-only.
nodeName/tagName
For elements, tag name (uppercased unless XML-mode). For non-
element nodes nodeName describes what it is. Read-only.
innerHTML
The HTML content of the element. Can be modified.
outerHTML
The full HTML of the element. A write operation
into [Link] does not touch elem itself. Instead it gets replaced
with the new HTML in the outer context.
nodeValue/data
The content of a non-element node (text, comment). These two are
almost the same, usually we use data. Can be modified.
textContent
The text inside the element: HTML minus all <tags>. Writing into it
puts the text inside the element, with all special characters and tags
treated exactly as text. Can safely insert user-generated text and
protect from unwanted HTML insertions.
hidden
When set to true, does the same as CSS display:none.
DOM nodes also have other properties depending on their class. For
instance, <input> elements (HTMLInputElement) support value, type,
while <a> elements (HTMLAnchorElement) support href etc. Most standard
HTML attributes have a corresponding DOM property.
However, HTML attributes and DOM properties are not always the same,
as we’ll see in the next chapter.
Attributes – is what’s written in HTML.
Properties – is what’s in DOM objects.
A small comparison:
Properties Attributes
Any value, standard properties have types described in the
Type A string
spec
Name is not cas
Name Name is case-sensitive
sensitive
Methods to work with attributes are:
[Link](name) – to check for existence.
[Link](name) – to get the value.
[Link](name, value) – to set the value.
[Link](name) – to remove the attribute.
[Link] is a collection of all attributes.
For most situations using DOM properties is preferable. We should refer to
attributes only when DOM properties do not suit us, when we need exactly
attributes, for instance:
We need a non-standard attribute. But if it starts with data-, then we
should use dataset.
We want to read the value “as written” in HTML. The value of the
DOM property may be different, for instance the href property is
always a full URL, and we may want to get the “original” value.
<ol id="ol">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script>
[Link]('before'); // insert string "before" before <ol>
[Link]('after'); // insert string "after" after <ol>
let liFirst = [Link]('li');
[Link] = 'prepend';
[Link](liFirst); // insert liFirst at the beginning of <ol>
let liLast = [Link]('li');
[Link] = 'append';
[Link](liLast); // insert liLast at the end of <ol>
</script>
Methods to create new nodes:
o [Link](tag) – creates an element with the
given tag,
o [Link](value) – creates a text node (rarely
used),
o – clones the element, if deep==true then
[Link](deep)
with all descendants.
Insertion and removal:
o [Link](...nodes or strings) – insert into node, at the end,
o [Link](...nodes or strings) – insert into node, at the
beginning,
o [Link](...nodes or strings) –- insert right before node,
o [Link](...nodes or strings) –- insert right after node,
o [Link](...nodes or strings) –- replace node.
o [Link]() –- remove the node.
Text strings are inserted “as text”.
There are also “old school” methods:
o [Link](node)
o [Link](node, nextSibling)
o [Link](node)
o [Link](newElem, node)
All these methods return node.
Given some HTML in html, [Link](where,
html) inserts it depending on the value of where:
o "beforebegin" – insert html right before elem,
o "afterbegin" – insert html into elem, at the beginning,
o "beforeend" – insert html into elem, at the end,
o "afterend" – insert html right after elem.
Also there are similar
methods, [Link] and [Link],
that insert text strings and elements, but they are rarely used.
To append HTML to the page before it has finished loading:
o [Link](html)
After the page is loaded such a call erases the document.
Mostly seen in old scripts. Clear the element
importance: 5
Create a function clear(elem) that removes everything from the element.
<ol id="elem">
<li>Hello</li>
<li>World</li>
</ol>
<script>
function clear(elem) { /* your code */ }
clear(elem); // clears the list
</script>
solution
First, let’s see how not to do it:
function clear(elem) {
for (let i=0; i < [Link]; i++) {
[Link][i].remove();
}
}
That won’t work, because the call to remove() shifts the
collection [Link], so elements start from the index 0 every time.
But i increases, and some elements will be skipped.
The for..of loop also does the same.
The right variant could be:
function clear(elem) {
while ([Link]) {
[Link]();
}
}
And also there’s a simpler way to do the same:
function clear(elem) {
[Link] = '';
}
Why does "aaa" remain?
importance: 1
In the example below, the call [Link]() removes the table from the
document.
But if you run it, you can see that the text "aaa" is still visible.
Why does that happen?
<table id="table">
aaa
<tr>
<td>Test</td>
</tr>
</table>
<script>
alert(table); // the table, as it should be
[Link]();
// why there's still "aaa" in the document?
</script>
To manage classes, there are two DOM properties:
className – the string value, good to manage the whole set of
classes.
classList – the object with methods add/remove/toggle/contains, good
for individual classes.
To change the styles:
The style property is an object with camelCased styles. Reading and
writing to it has the same meaning as modifying individual
properties in the "style" attribute. To see how to apply important and
other rare stuff – there’s a list of methods at MDN.
The [Link] property corresponds to the
whole "style" attribute, the full string of styles.
To read the resolved styles (with respect to all classes, after all CSS is
applied and final values are calculated):
The getComputedStyle(elem, [pseudo]) returns the style-like object
with them. Read-only.