Animations
API
Arrays
- Array Methods
- Array Add Using length()
- Array Properties
- Basics
- Get values examples
- concat()
- destructuring
- fill()
- filter()
- find()
- foreach()
- includes()
- indexOf()
- isArray()
- join()
- map()
- pop()
- push()
- reduce()
- reverse()
- shift()
- slice()
- some()
- sort()
- splice()
- Spread
- toString()
- valueOf()
Async
Basics
- Basics
- Best Practices
- Break Reference Label
- Common DOM Properties
- Constructor Property
- Defer
- Escape Characters
- Keywords
- Operators
- Regions
- Scopes
- Ternary Operator
- Truthy & Falsy
- Value Of
- VS Code
Challenges
Classes
Console
Dates
- Date Formats
- Date Get Methods
- Date Methods
- Date Set Methods
- Instantiating New Date
- Time Zones
- Converting UTC to Local
Debugging
DOM Elements
DOM Methods
- common methods
- document ready
- getElementByClassName()
- getElementById()
- getElementByTagName()
- querySelectorAll()
- setAttribute()
DOM Properties
Event Listeners
- addEventListener
- addEventListener to multiple tags
- onchange
- onclick
- Events
- onmouseover - onmouseout
- onmouseup - onmousedown
- onclick vs click
- onblur - onfocus
- onload
- onunload
- preventDefault
Flow Control
Forms
Functions
- Anonymous Functions
- Arguments
- Arrow Functions
- Functions are objects
- Function Expressions
- "IIFE" Functions
- Invoking vs Calling
- Reference Example
- Recursive vs Non Recursive
- Scope of Arrow Functions
- Self Invoking Functions
Global Functions
- Boolean()
- Common Global Functions
- encodeUri() - decodeUri()
- eval()
- IsNan()
- Number()
- parseFloat()
- parseInt()
- Type conversions
JSON
Keywords
Libraries (3rd party)
Math
Modules
Objects
- Adding / Deleting Object Properties
- Assign (cloning)
- Built In Constructors
- Creating a new Object
- Comparing Objects
- Constructors
- Delete A Property
- Destructuring and Spreading
- Functions in Objects
- Looping Thru Properties
- Object Literals
- Properties
Snippets
String
- charAt() / charCodeAt()
- indexOf()
- lastIndexOf()
- length
- RegEx Basics
- RegEx Example
- RegEx Patterns
- match()
- replace()
- search()
- slice()
- split()
- String Template Literals
- substring()
- toString()
- toUpperCase() / toLowerCase()
Types
Widgets
Window Object
JavaScript - Get Element By Id
The getElementById() is a popular DOM method to get an HTML element object. It is a method of the document object.
You don't necessarily need to assign the results of the method to a variable (as I commonly do). You can simply find it and manipulate it.
Demo 1
let demo1 = document.getElementById("demo1");
demo1.style.color = "red";
//or
document.getElementById("demo2").style.color = "blue";
document.getElementById("demo2").innerHTML = "blue!";
document.getElementById("img1").src = "/assets/images/javascript-logo.png";