JS DOM Manipulation

What can you do with the document object?

1. Find elements 2. Make new elements 3. Update elements 4. Change properties on elements ( adding or removing attributes, classes, styles) 5. Listen for events (like clicks, scrolling, hovering and many more)

What are the differences between innerText and textContent?

1. innerText is aware of the rendered appearance of text while textContent is not. 2. textContent gets all the content of all elements, including script and style elements. In contrast, innerText only shows "human-readable" elements. 3. depending on the complexity of the content inside and element, innerText can be a bit less performant than textContent.

What is an html attribute?

An attribute either modifies the default functionality of an element type or provides functionality. Ex: src , href, class, id, type, value

How would you view the document object in the console?

By using "console.dir(document)" , you can view the document as an object with all of it's properties, instead of as viewing as the html like on the "elements" tab in the browser dev tools.

What is the setAttribute() method?

Element.setAttribute() Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value. To get the current value of an attribute, use getAttribute() ; to remove an attribute, call removeAttribute() .

What is the DOM?

The Document Object Model is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

What is append()?

The Element.append() method inserts a set of Node objects or string objects after the last child of the Element. String objects are inserted as equivalent Text nodes. Differences from Node.appendChild(): 1. Element.append() allows you to also append string objects, whereas Node.appendChild() only accepts Node objects. 2. Element.append() has no return value, whereas Node.appendChild() returns the appended Node object. 3. Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

What is prepend()?

The Element.prepend() method inserts a set of Node objects or string objects before the first child of the Element. String objects are inserted as equivalent Text nodes.

How would you remove HTML elements?

The Element.remove() method removes the element from the DOM.

What is the querySelectorAll() method?

It is an extension of the querySelector method. This method returns all the elements that match the passed selector.

How would you select elements in the DOM?

JS has quite a few different methods for selecting elements in the DOM. *These all start with " document. " 1. document.getElementById 2. document.getElementByTagName 3. document.getElementByClassName 4. document.querySelector 5. document.querySelectorAll

What is the getElementsByClassName() method?

Returns an HTMLCollection of elements that match the passed class name.

What is the getElementsByTagName() method?

Returns the HTMLCollection of elements that match the passed tag name.

What is the getElementsByName() method?

Returns the elements that match the value of the name attribute with the passed string. The return value is a live NodeList Collection.

What is the querySelector() method?

Returns the first element that matches the CSS selector passed to the function.

What is the getElementById() method?

Returns the first element whose id matches a passed string.

What is the first step to most other things you can do with the DOM with JS?

Selecting or finding is really the first step to most other things we can do.

How would you modify attributes of HTML Elements?

We can use the get the attributes by using getAttributes and modify them using setAttributes.

When you select an element with JS what do you get back?

We get back a special object called an HTMLElement. The exact kind of object we get back will depend on what we select ( HTMLDivElement vs HTMLParagraphElement). *look at it using console.dir( ) to see it as an object in the browser dev tools.

How does the DOM get created?

When a web page is loaded, the browser creates the DOM for that specific page. This allows for the creation of dynamic web pages where users can interact with the page.

Nodes vs Elements

With some of the finder methods, you will see that you don't always get back an HTML element, you sometimes get back what is called a text node. Everything in the DOM is a node, some nodes are not actually HTML elements, but text or even comments!

How can you modify styling with JS?

You can access any inline (and only inline!) CSS properties on an element using the style property. *With every element that we select on the DOM we have access to a property called style, which contains a lot of other properties within it displayed as an object with the css properties listed as key:value pairs that are empty strings.

How would you manipulate classes with JS?

There are a few methods we can use to manipulate the class attribute in Javascript: 1. setAttribute("class") - this will override the class 2. className - this will give you a string representation of the class 3. classList -this will give you an array-like object to add, remove or toggle classes (easier way to interact with classes)

What should you remember about when working with CSS properties within JS?

In JavaScript, all of the properties from CSS are camel cased! (dashes are not used between words)

What is createElement()?

In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

What is the root of the DOM?

The document object is known as the root of the tree, and is the top node. The document object represents the web page that has been loaded and acts as the starting point for access to the DOM.

What is the getAttribute() method?

The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string)

What is innerHTML?

The innerHTML property of an element is used to get or set HTML contained within the element. If you need to change any HTML, you can assign a new value to the innerHTML. *It is less common to use innerHTML because you need the string to be valid HTML for everything to work, which can be quite tedious to build.

What is innerText ?

The innerText property of the HTMLElement is used to get or set the text inside an HTML element and its descendants.

How is the DOM structured?

The structure of the DOM uses something called a tree, where the topmost node is the document object.

What is textContent?

The textContent property sets or returns the text content of the specified node, and all its descendants.

Direct attribute access

There are a few attributes that you can directly access and modify as well instead of having to use getAttribute or setAttribute. One of those id.

How would you access the DOM?

To access the DOM we would use the document object. This object has properties and functions that we can use to access our HTML elements which we can manipulate with JavaScript.

How would you create an element in JS?

To create an HTML element, we can use the createElement function and pass in the name of the element. This just makes an empty element, so we if you wan tot add any text, attributes or styling, it will need to be done on another line.

How would you change the text, style, or other properties of multiple elements?

To do this you can select all of the elements with querySelectorAll("") and then manually loop through the node list. *You can use for....of to do this.