HTML DOM Manipulation

The only tags you need to know

HTML ElementDescription
<!DOCTYPE html>Tells the browser it is an HTML document, using the most recent version of HTML.
<html>Creates the "root" of the document. Everything other than the <!DOCTYPE html> goes inside of the <html></html> tags.
<head>Contains extra information for the browser that doesn't appear on the page itself.
<title>The title of the page, which will appear in the browser tab and in search results.
<style>Used for adding CSS to your page. The <style> allows you to write CSS directly within that HTML file.
<link>Used to link to a separate (external) CSS file. The <link> requires an href attribute that points to the CSS file, and a rel="stylesheet".
<body>Any content inside the body is the content that will be on the page itself.
<h1> ... <h6>Heading levels. These create hierarchy within your page. Think of them as creating a table of contents.
<p>Paragraph.
<strong>Strong importance (bold by default). This is an inline element, used inside of paragraphs and headings to put more importance on some of the text.
<em>Emphasis (italic by default). This is an inline element, used inside of paragraphs and headings to put emphasis on certain words within the text.
<a>Anchor. Used is to create links - think of it as anchoring to another location. This is an inline element, and can be used inside of paragraphs and headings.
<ul> & <ol>Unordered & ordered lists.
<li>List item. Used inside of <ul> and <ol> elements.
<span>Similar to <strong> and <em> but with no default styling and no semantic meaning. You would use CSS to style it how you want.
<img>An image. Must have an alt attribute, which describes the image.
<header>Denotes a heading within the document. Often used for the logo and navigation area on a page.
<main>The main content of your page (only one per page).
<footer>Denotes a footer within a document. Like <header>, it is often used as the primary footer for an entire page.
<nav>Used for major navigational elements (not all links, or lists of links must be in a nav).
<article>A piece of content on your page that can stand on it's own.
<section>A section of content.
<div>A division (or box) - no semantic meaning. These are used to organize your content, generally so you can style layouts with CSS.

Getting Started with HTML, and JavaScript

Creating HTML File

Start by creating a new index.html HTML file.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>
    <!-- Linking CSS file -->
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- Your HTML content goes here -->

    <!-- Linking JavaScript file -->
    <script src="script.js"></script>
</body>
</html>

DOM

The Document Object Model (DOM) is a tree-like representation of an HTML document. JavaScript can be used to manipulate the DOM to change the appearance, structure, and content of a web page.

Select an element by its id attribute:

jsx
const element = document.getElementById('element-id');

Select all elements with a specific class:

jsx
const elements = document.getElementsByClassName('class-name');

Select all elements with a specific tag:

jsx
const elements = document.getElementsByTagName('tag-name');

Select the first element that matches a CSS selector:

jsx
const element = document.querySelector('.class-name');

Select all elements that match a CSS selector:

jsx
const elements = document.querySelectorAll('.class-name');

Changing Content

Change the text content of an element:

jsx
element.textContent = 'New text content';

Change the HTML content of an element:

jsx
element.innerHTML = '<strong>New HTML content</strong>';

Changing Attributes

Set an attribute:

jsx
element.setAttribute('attribute-name', 'value');

Get an attribute:

jsx
const attributeValue = element.getAttribute('attribute-name');

Remove an attribute:

jsx
element.removeAttribute('attribute-name');

Changing Styles

Change an element's style:

jsx
element.style.propertyName = 'value';
```  <br/>
Add or remove a class:
```jsx
element.classList.add('class-name');
element.classList.remove('class-name');

Toggle a class:

jsx
element.classList.toggle('class-name');

Check if an element has a class:

jsx
const hasClass = element.classList.contains('class-name');

Create a new element:

jsx
const newElement = document.createElement('tag-name');

Add a new child element:

jsx
parentElement.appendChild(newElement);

Insert a new element before an existing one:

jsx
parentElement.insertBefore(newElement, existingElement);

Remove a child element:

jsx
parentElement.removeChild(childElement);

Replace an existing child element:

jsx
parentElement.replaceChild(newElement, existingElement);

addEventListener

Attach an event listener to an element:

jsx
element.addEventListener('event-name', eventHandlerFunction);

removeEventListener

Remove an event listener from an element:

jsx
element.removeEventListener('event-name', eventHandlerFunction);

Event Object

The event object provides information about the event:

jsx
function eventHandlerFunction(event) {
  console.log(event.type); // event name
  console.log(event.target); // element that triggered the event
  // ... other properties and methods
}

Prevent Default Behavior

Cancel the default behavior of an event:

jsx
function eventHandlerFunction(event) {
event.preventDefault();
}

Stop Event Propagation

Stop the event from bubbling up the DOM tree:

jsx
function eventHandlerFunction(event) {
  event.stopPropagation();
}

Access an element's parent node:

jsx
const parent = element.parentNode;

Access all child nodes of an element:

jsx
const children = element.childNodes;

Access the first and last child nodes of an element:

jsx
const firstChild = element.firstChild;
const lastChild = element.lastChild;

Access the next and previous sibling nodes of an element:

jsx
const nextSibling = element.nextSibling;
const previousSibling = element.previousSibling;

Find the closest ancestor that matches a CSS selector:

jsx
const closestAncestor = element.closest('selector');

Check if an element matches a CSS selector:

jsx
const isMatch = element.matches('selector');