NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • The DOM
  • Events
  • Next steps
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript

Working with the DOM

PreviousAdding Styles - Part 2NextQuerying the DOM - Selectors

Last updated 12 months ago

This section of the guide will cover how JavaScript can be integrated with HTML and CSS to add functionality and interactivity in a page. We'll take a look at the DOM(Document Object Model), events, how to query and manipulate the DOM, and end with fetch requests.

The DOM

DOM stands for Document Object Model and is a way of structuring an html document as a tree. This makes it easier for the browser to update the document's styling and when JS is applied.

Take the following html document:

<!DOCTYPE html>
<html>
   <head>
       <link rel="stylesheet" href="styles.css">
       <title>My web page</title>
   </head>
   <body>
       <h1>Hello world</h1>
       <button onclick="alert('Hello!')">Say hello</button>
   </body>
</html>

This html document is converted into a tree like the one below:

It is not important to know how this is done, but it is important to understand that every html document is converted into this model by the browser to allow for easy querying and updating of the elements.

Events

Events are, quite literally, "things that happen". In this context, they are "things that happen to element(s) on the page". Examples of events are "click", "hover" and "keyup" (when the user presses a key and lets go, letting the key come up).

Events attributes can be assigned to html elements to execute some JS code when the event occurs. Take an example from the above html:

<button onclick="alert('Hello!')">Say hello</button>

This sets an onclick attribute for the button; this means when the button is clicked, the JS code is executed. In this case, the code is alert('Hello!'), so when the button is clicked, the user gets a popup with the text "Hello!".

Next steps

Copy the above html into a separate html file and save it with a name of your choice. Then add some CSS of your choice, or reuse the styles.css file from the previous section. You can even go in with a combination of the two, and define some additonal styles in a separate CSS file, then import both files into the html file.

For the next few sections we'll look at querying the DOM from the Browser Console.

There is a full list of JS events .

here