DOM

querySelector()

The footer on this page is created using querySelector.

var ele = document.querySelector(selector);

querySelectorAll()

All links in this website are styled using querySelectorAll.

var links = document.querySelectorAll("a");
    for (var i = 0; i < links.length; i++) {
        links[i].style.color = "#2477CA";
    }

addEventListener()

Adding an addEventListener() enables you to have code that runs only when the event happens. Multiple functions can be assigned to the same id and event action. The event type and function are required parameters.

document.getElementById("myBtn")
    .addEventListener("click", firstFunction);
document.getElementById("myBtn")
    .addEventListener("click", secondFunction);

removeEventListener()

The removeEventListener simply removes an addEventListener.

document.getElementById("myBtn")
    .removeEventListener("click", firstFunction);

createElement

This statement in the nav was created using createElement.

Syntax: document.createElement(tagName);
var statement = document.createElement("p");

appendChild()

parent.appendChild(child)

Example:

removeChild()

We can remove an item from a list with parent.removeChild(child);

Example:

removeEL.removeChild(removeEL.childNodes[3]);

• Item 1
• Item 2
• Item 3

replaceChild()

We can replace an item on a list with something different with parent.replaceChild(newChild, oldChild);

Example:

• Item 1
• Item 2
• Item 3

var em = document.createElement('em');
var strong = document.querySelector('strong');
var div = document.querySelector('div');
em.textContent = 'hi';
div.replaceChild(em, strong);

cloneNode()

The clone node is used when you want to copy an already existing element. The item in the array is a boolean value. If it is true, the clone will have all the child elements the parent element does. var duplicateElement = parent.cloneNode([deep]);

Example:

• Item 1
• Item 2
• Item 3

var strong = document.querySelector('strong');
var copy = strong.cloneNode(true);
var cloneEL = document.getElementById('cloneEL');
cloneEL.appendChild(copy);

insertBefore()

Adds a specified element before another child element. The method is called by the parent method.

parent.insertBefore(newEle, refEle);

Example:

var em = document.createElement('em');
var strong = document.querySelector('strong');
var div = document.querySelector('div');
em.textContent = 'hi';
div.insertBefore(em, strong);

createDocumentFragment()

Creating document fragments allows you to add multiple elements in bulk. This saves on power and the possiblity of layout change problems.document.createDocumentFragment();

getComputedStyle()

This method checks for any CSS styling for an element before you make any changes. It returns the read-only values off all properties of an element. The pseudo element is optional and is for :before, :visited, etc.

var style = getComputedStyle(element, [pseudoEle])

Example:

var style = getComputedStyle(document.querySelector('div'));
alert(style.width);

setAttribute()

The setAttribute either adds to or changes the attribute of an element.

element.setAttribute(name, value);

Example:

getAttribute()

ele.getAttribute(name);
Example:
var div = document.querySelector('div'); alert(div.getAttribute('contenteditable'))

removeAttribute()

ele.removeAttribute(name);
Example:
var div = document.querySelector('div');
div.removeAttribute('contenteditable');