Useful JS Objects
Built-in Objects we get for free
Terminology
- Browser Objects
- Tools that are only available when Javascript is running in the browser. These are not available in Node. Examples:
windowanddocument. - Built-in Objects
- Tools that are always available in Javascript. Examples:
MathandDate. - Dot Notation
- Dots are used to access methods (functions) and properties (variables) inside a given object. Example: `document.querySelector()`.
Terminology
- Object Method
- Functions that are available inside an object using dot notation. Functions/methods end with parentheses. Examples:
Math.round(). - Object Property
- Non-function variables that are available inside an object using dot notation. Examples:
document.title(the title of the current page).
DOM methods and properties
Document Object Model
document.querySelector()
Creating a DOM variable
<body>
<h1 class="intro">Hello world!</h1>
</body>const headingElement = document.querySelector('h1');documentis the top-level DOM variable that represents the HTML element;.querySelector()finds the first HTML element that matches the provided CSS selector;
Any CSS selector is valid
<body>
<h1 class="intro">Hello world!</h1>
</body>All of these selectors will create the same DOM variable:
const headingElement = document.querySelector('h1');const headingElement = document.querySelector('.intro');const headingElement = document.querySelector('body > h1');Element.innerHTML
Accessing HTML Content
<body>
<h1 class="intro">Hello world!</h1>
</body>// Create DOM variable
const headingElement = document.querySelector('h1');
// Access element content with .innerHTML property
const h1Content = headingElement.innerHTML; // 'Hello world!'Element.innerHTML
Editing HTML Content
<body>
<h1 class="intro">Hello world!</h1>
</body>// Create DOM variable
const headingElement = document.querySelector('h1');
// Edit element content with .innerHTML property
headingElement.innerHTML = 'Hello Tony!';After:
<body>
<h1 class="intro">Hello Tony!</h1>
</body>Element.innerHTML
Creating new elements
// Edit element content with .innerHTML property
headingElement.innerHTML = 'Hello <em>Tony</em>!';<body>
<h1 class="intro">Hello <em>Tony</em>!</h1>
</body>prompt()
Quick and dirty inputs
const name = prompt("What's your name?");
const h1 = document.querySelector('h1');
const name = prompt("What's your name?");
h1.innerHTML = `Hello ${name}!`;
<body>
<h1 class="intro">Hello Tony!</h1>
</body>Key Takeaways
- All DOM variables will have the
.querySelector()method; .innerHTMLworks both ways when reading and writing content to and from HTML elements;.innerTextcan be used if you don't want HTML tags included;prompt()is rarely used professionally; we're using it as a short cut for now;
The Math Object
Math.round()
Rounds numbers inside the parentheses
Math.round(55.5) // 56Rounds .5 up to the nearest whole number.
Math.floor()
Math.floor(55.9) // 55Rounds all decimals down to the nearest whole number.
Math.ceil()
Math.floor(55.1) // 56Rounds all decimals up to the nearest whole number.
Further Reading
Useful JS Objects Built-in Objects we get for free