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
  • document.querySelector
  • document.querySelectorAll
  • document.getElementById
  • document.getElementsbyClassName
  • document.getElementsByTagName
  • Next steps
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript
  3. Working with the DOM

Querying the DOM - Selectors

PreviousWorking with the DOMNextQuerying the DOM - Element Attributes

Last updated 12 months ago

Querying the DOM involves searching for elements in the html document. This is done by the way of (remember them?)

There are a few ways to search for elements in an html document using JS. We'll take a look at some of them here.

document in JS is a global reference to the html document that is the target of the script.

document.querySelector

Usage: document.querySelector(query);

This function allows us to select elements based on a selector:

document.querySelector("button"); // searches for the first <button> tag
document.querySelector(".vintage"); // searches for the first tag with the "vintage" class
document.querySelector("#nexus"); // searches for the first tag with the id "nexus"

As before, selectors can search for tag names, classes or ids. It is important to note that querySelector returns the first match it finds.

The function takes in a string with the selector as an argument, and returns the element as a Node object. If there is no element that matches the query, it returns null.

For the html page we've opened up, navigate to the Browser console and lets run some queries.

document.querySelectorAll

This functions similarly to document.querySelector but this time returns an array of all the elements that match the query. If there are no matches, it returns an empty array.

Usage: document.querySelectorAll(query);

document.getElementById

This is a specific way to query the DOM for an element with a given id. It takes in a string with the expected id (omit the # prefix) and return the element if it exists (otherwise it returns null).

Usage: document.getElementById(id);

document.getElementsbyClassName

This returns an array of all the elements that belong to a given class.

Usage: document.getElementsByClassName(className);

document.getElementsByTagName

This returns an array of all the elements in the document that have a given tag.

Usage: document.getElementsByTagName(tagName);

Next steps

We'll look at how to access the attributes and other properties of elements in the next section, as well as how we can change them using JS.

selectors