# getElementById() vs querySelector() vs querySelectorAll()
When working with the Document Object Model (DOM) in JavaScript, you often need to access specific elements within an HTML document. Three commonly used methods for this purpose are `getElementById()`, `querySelector()`, and `querySelectorAll()`. While they all serve the same fundamental purpose of selecting elements, they have differences in their syntax, behavior, and use cases. Let's delve into each of them in detail.
**1. getElementById():**
`getElementById()` is a method that belongs to the Document object. It allows you to retrieve an element from the document by its unique ID.
**Syntax:**
```javascript
var element = document.getElementById(id);
```
* `id`: A string representing the unique ID of the element you want to retrieve.
**Example:**
```html
getElementById Example
This is an example div.
```
**2. querySelector():**
`querySelector()` is a more versatile method that allows you to select elements using CSS-style selectors. It returns the first element that matches the specified selector.
**Syntax:**
```javascript
var element = document.querySelector(selector);
```
* `selector`: A string containing a CSS selector that specifies the element(s) to be selected.
**Example:**
```html
querySelector Example
This is an example div.
```
**3. querySelectorAll():**
`querySelectorAll()` is similar to `querySelector()`, but it returns a NodeList containing all elements that match the specified selector.
**Syntax:**
```javascript
var elements = document.querySelectorAll(selector);
```
* `selector`: A string containing a CSS selector that specifies the element(s) to be selected.
**Example:**
```html
querySelectorAll Example
```
**Summary:**
* **getElementById()**: Used to select an element by its unique ID. Returns a single element.
* **querySelector()**: Allows selection based on CSS-style selectors. Returns the first matching element.
* **querySelectorAll()**: Similar to `querySelector()`, but returns a NodeList containing all matching elements.
Choose the method that best fits your use case based on the specificity of the selection and whether you need to select one or multiple elements.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://guvi.gitbook.io/fsd/docs/module-3-dom-manipulation/method-in-document-object/getelementbyid-vs-queryselector-vs-queryselectorall.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.