JS Cheat Sheet
A quick reference list to JavaScript functions, allowing for interaction with HTML and CS files.
Using Scripts
An external JS file
<script src="*.js"></script>Inline in the HTML
<script>
Javascript code
</script>DOM Interaction
Click code snippets to see examples
| document | Keyword granting access to the root of the DOM in JS |
| element.innerHTML | Modifies the contents of an element |
| element.querySelector(<selector>) |
Select the first element with CSS selectors, eg. h1, p, div
|
| element.getElementById(#id) | Keyword granting access to the root of the DOM in JS |
| element.style['CSS property'] = '...' | Provides access to the inline style of HTML tag |
| parent.createElement('<selector>') | Creates new element based on given selector, adds under parent element |
| parent.appendChild(element) | Adds element as child to parent element |
| parent.removeChild(element) | Removes targeted element from parent element |
| element.hidden | Set to boolean value, follows selected element, hides element |
| element.onclick = function | Assigns a function to run on a click event of element |
| element.parentNode | Returns the parent node of the selected element |
| element.firstChild | Returns first child of the selected element |
| element.children |
REturns a list of the element's children, null if no children
|
DOM Examples
.innerHTML
document.body.innerHTML = 'This is the text of the body element';This changes the innerHTML of the document's body.
.querySelector
document.querySelector('p').innerHTML = 'This is the first paragraph';This will select the first <p> element in the document and changes the innerHTML.
let element = document.querySelector('header');
element.querySelector('h1').innerHTML = 'This is the <h1> inside the <header>';This will select the first h1 element in the first <header> element and changes the innerHTML.
.getElementById
document.getElementById('bio').innerHTML = 'This is the element with id 'bio'";This will select the element with id of 'bio' and changes the innerHTML.
.style
let button = document.getElementById('redButton');
button.style.backgroundColor = 'red';
button.style['font-size'] = '32px';Makes the element with id 'redButton' red and with fontsize 32px.
.createElement
let paragraph = document.createElement('p');
paragraph.id = 'info';
paragraph.class = 'pText';
paragraph.innerHTML = 'The text inside the paragraph';
document.body.appendChild(paragraph);Creates <p> element with id 'info', class 'pText', and innerHTML. Adds to the end of the <body>.
.appendChild
let newDestination = document.createElement('li');
newDestination.innerHTML = 'Oaxaca, Mexico';
document.getElementById('destinations').appendChild(newDestination);Creates new <li> element and adds to the element with id 'destinations'.
.removeChild
let paragraph = document.body.querySelector('p');
document.body.removeChild(paragraph);Selects the first <p> in <body> and deletes it.
.hidden
Hides element with id 'sign'.
.onclick
let element = document.getElementById('interact');
element.onclick = function(){
element.style.backgroundColor = 'blue';
}The element with id 'interact' will change to blue background color.
.parentNode
let child = document.getElementById('child');
child.parentNode.innerHTML = "I have killed my children!"Gets element id 'child' and changes its parent's innerHTML to text, effectively erasing all of the children.
.firstChild
let first = document.body.firstChild;
first.innerHTML = 'I am the child!';Changes the first child's innerHTML
.children
let destinationList = document.getElementById('destinations').children;
console.log(destinationList[i].innerHTML);Gets list of children for element id 'destinations', prints out first child's innerHTML