Browser: Document, Events, Interfaces

Question 1

What is DOM?

Answer 1

Document Object Model, or DOM for short, represents all page content as objects that can be modified. It is an interface that treats HTML or XML document as a tree structure, where each node is an object of the document.

The document object is the main “entry point” to the page. We can change or create anything on the page using it.

Question 2

What is a DOM element?

Answer 2

An element is a node of a specific type — element (Node.ELEMENT_NODE).

In simple words, an element is a node that’s written using a tag in the HTML document… ex. h2 & p are all elements because they are represented by tags.

The document type, the comment, the text nodes aren’t elements because they are not written with tags

Question 3

What is the topmost tree node?

Answer 3

The topmost document node is document.documentElement. That’s the DOM node of the html tag.

Question 4

How would you grab all child nodes of node?

Answer 4

The childNodes collection lists all child nodes, including text nodes

Would get children of document.body-
document.body.childNodes

Will return a collection- a special array-like iterable object that we can use for..of to iterate over, but not array methods (unless we use Array.from)

Question 5

What is a quick way to grab a first or last child node?

Answer 5

elem.firstChild and elem.lastChild

elem. childNodes[0] === elem.firstChild
elem. childNodes[elem.childNodes.length - 1] === elem.lastChild

Question 6

How would you grab the nearest siblings in both directions?

Answer 6

elem. previousSibling

elem. nextSibling

Question 7

How do you find the parent node?

Answer 7

elem.parentNode

Question 8

How would you grab all child element nodes? First and last element child?
Neighbor elements? Parent element?

This does not include things like text nodes or comment nodes.

Answer 8

elem. children
elem. firstElementChild
elem. lastElementChild
elem. previousElementSibling
elem. nextElementSibling
elem. parentElement

Question 9

What is the difference between innerHTML and textContent?

Answer 9

The innerHTML property allows to get the HTML inside the element as a string.

The textContent provides access to the text inside the element: only text, minus all .

In most cases, we expect the text from a user, and want to treat it as text. We don’t want unexpected HTML in our site. An assignment to textContent does exactly that.

Question 10

What does the hidden property do?

Answer 10

The “hidden” attribute and the DOM property specifies whether the element is visible or not. Technically, hidden works the same as style=”display:none”. But it’s shorter to write.

Question 11

How do you read the text from a text node?

Answer 11

nodeValue/data

Hello

    let text = document.body.firstChild;
    alert(text.data); // Hello

    let comment = text.nextSibling;
    alert(comment.data); // Comment

Question 12

If an attribute is non-standard, is there a way to access such attribute? If so, what are the methods to…

1) check existence
2) get value
3) set value
4) remove attribute

Answer 12

1) elem.hasAttribute(name) – checks for existence
2) elem.getAttribute(name) – gets the value
3) elem.setAttribute(name, value) – sets the value
4) elem.removeAttribute(name) – removes the attribute

Question 13

How can you read all attributes of an element with name and value properties?

Answer 13

elem.attributes

Returns a collection of objects that belong to a built-in Attr class, with name and value properties

Use example:
for (let attr of elem.attributes) {
alert( ${attr.name} = ${attr.value} );
}

Question 14

How do you select an element by an attribute?

Answer 14

Using brackets

Example:
document.querySelector(‘[data-widget-name]’)

Question 15

What are the differences between attributes and properties?

Answer 15

Properties can have any value, whereas attributes are strings
Properties are case-sensitive, whereas attributes are not

Question 16

When should we use DOM properties vs attributes?

Answer 16

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:

1) We need a non-standard attribute. But if it starts with data-, then we should use dataset.
2) 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.

Question 17

How do you create a DOM element node?

Answer 17

document.createElement(tag’)

Question 18

List methods for inserting and removing nodes/strings

Answer 18

node. append(…nodes or strings) – insert into node, at the end,
node. prepend(…nodes or strings) – insert into node, at the beginning,
node. before(…nodes or strings) –- insert right before node,
node. after(…nodes or strings) –- insert right after node,
node. replaceWith(…nodes or strings) –- replace node.
node. remove() –- remove the node.