# Accessing Elements

In this chapter we will learn most commonly used properties and methods to accessing element of DOM . There are several properties and methods you can use to access and manipulate HTML elements in JavaScript. Here is a list of some commonly used ones:

1. `getElementById()`: This method allows you to access an HTML element using its `id` attribute.
2. `getElementsByClassName()`: This method returns a collection of HTML elements that have the same class name.
3. `getElementsByTagName()`: This method returns a collection of HTML elements that have the specified tag name.
4. `querySelector()`: This method returns the first HTML element that matches the specified CSS selector.
5. `querySelectorAll()`: This method returns a list of HTML elements that match the specified CSS selector.
6. `innerHTML`: This property allows you to get or set the HTML content inside an element.
7. `textContent`: This property allows you to get or set the text content inside an element.
8. `setAttribute()`: This method allows you to set the value of an attribute on an HTML element.
9. `getAttribute()`: This method allows you to get the value of an attribute on an HTML element.
10. `classList`: This property returns a list of the classes for an HTML element and provides methods to add, remove, and toggle classes.
11. `style`: This property allows you to get or set the style of an HTML element.
12. `parentNode`: This property allows you to access the parent node of an HTML element.
13. `childNodes`: This property allows you to access the child nodes of an HTML element.
14. `children`: This property allows you to access the child elements of an HTML element.
15. `nextSibling`: This property allows you to access the next sibling of an HTML element.
16. `previousSibling`: This property allows you to access the previous sibling of an HTML element.

Now, here are examples for each of the properties related to accessing elements in JavaScript:

1. getElementById():

```html
<div id="example">Hello, world!</div>
<script>
  const element = document.getElementById('example');
  console.log(element.innerHTML); // outputs "Hello, world!"
</script>
```

2. getElementsByClassName():

```html
<ul>
  <li class="fruit">Apple</li>
  <li class="fruit">Banana</li>
  <li class="vegetable">Carrot</li>
</ul>
<script>
  const elements = document.getElementsByClassName('fruit');
  console.log(elements.length); // outputs 2
  console.log(elements[0].innerHTML); // outputs "Apple"
</script>
```

3. getElementsByTagName():

```html
<div>
  <h1>Heading 1</h1>
  <p>Paragraph 1</p>
  <h2>Heading 2</h2>
  <p>Paragraph 2</p>
</div>
<script>
  const elements = document.getElementsByTagName('p');
  console.log(elements.length); // outputs 2
  console.log(elements[1].innerHTML); // outputs "Paragraph 2"
</script>
```

4. getElementsByName():

```html
<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" />
</form>
<script>
  const elements = document.getElementsByName('email');
  console.log(elements[0].value); // outputs the value of the email input field
</script>
```

5. querySelector():

```html
<div>
  <p class="example">Hello, world!</p>
  <p>Hello again!</p>
</div>
<script>
  const element = document.querySelector('.example');
  console.log(element.innerHTML); // outputs "Hello, world!"
</script>
```

6. querySelectorAll():

```html
<div>
  <p class="example">Hello, world!</p>
  <p>Hello again!</p>
</div>
<script>
  const elements = document.querySelectorAll('p');
  console.log(elements.length); // outputs 2
  console.log(elements[1].innerHTML); // outputs "Hello again!"
</script>
```

7. children:

```html
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Carrot</li>
</ul>
<script>
  const list = document.querySelector('ul');
  console.log(list.children.length); // outputs 3
  console.log(list.children[1].innerHTML); // outputs "Banana"
</script>
```

8. firstChild:

```html
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Carrot</li>
</ul>
<script>
  const list = document.querySelector('ul');
  console.log(list.firstChild.nodeName); // outputs "#text"
  console.log(list.firstChild.nextSibling.nodeName); // outputs "LI"
</script>
```

9. lastChild:

```html
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Carrot</li>
</ul>
<script>
  const list = document.querySelector('ul');
  console.log(list.lastChild.nodeName); // outputs "#text"
  console.log(list.lastChild.previousSibling.nodeName); // outputs "LI"
</script>
```

10. `children`: Returns a live HTMLCollection of child elements of the selected element. Example:

```html
<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <p>Child 3</p>
</div>

<script>
  const parent = document.querySelector('#parent');
  const children = parent.children;
  console.log(children); // Output: [p, p, p]
</script>
```

11. `firstChild`: Returns the first child node of the selected element, or `null` if the element has no children. Example:

```html
<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <p>Child 3</p>
</div>

<script>
  const parent = document.querySelector('#parent');
  const firstChild = parent.firstChild;
  console.log(firstChild); // Output: <p>Child 1</p>
</script>
```

12. `lastChild`: Returns the last child node of the selected element, or `null` if the element has no children. Example:

```html
<div id="parent">
  <p>Child 1</p>
  <p>Child 2</p>
  <p>Child 3</p>
</div>

<script>
  const parent = document.querySelector('#parent');
  const lastChild = parent.lastChild;
  console.log(lastChild); // Output: <p>Child 3</p>
</script>
```

13. `nextSibling`: Returns the next sibling node of the selected element, or `null` if there is no next sibling. Example:

```html
<div id="parent">
  <p>Child 1</p>
  <p id="middle">Child 2</p>
  <p>Child 3</p>
</div>

<script>
  const middle = document.querySelector('#middle');
  const nextSibling = middle.nextSibling;
  console.log(nextSibling); // Output: <p>Child 3</p>
</script>
```

14. `previousSibling`: Returns the previous sibling node of the selected element, or `null` if there is no previous sibling. Example:

```html
<div id="parent">
  <p>Child 1</p>
  <p id="middle">Child 2</p>
  <p>Child 3</p>
</div>

<script>
  const middle = document.querySelector('#middle');
  const previousSibling = middle.previousSibling;
  console.log(previousSibling); // Output: <p>Child 1</p>
</script>
```

15. `parentNode`: Returns the parent node of the selected element, or `null` if the element has no parent. Example:

```html
<div id="parent">
  <p>Child</p>
</div>

<script>
  const child = document.querySelector('p');
  const parent = child.parentNode;
  console.log(parent); // Output: <div id="parent">...</div>
</script>
```

16. `parentElement`: Returns the parent element node of the selected element, or `null` if the element has no parent element. Example:

```html
<div id="parent">
  <p>Child</p>
</div>

<script>
  const child = dobcument.querySelector('p');
  const parentElement = child.parentElement;
  console.log(parentElement); // Output: <div id="parent">...</div>
</script>
```

17. innerHTML:&#x20;

The innerHTML property is used to get or set the HTML content of an element.

Example:

```html
<div id="example">This is an example element</div>
```

```javascript
const exampleElement = document.getElementById("example");

// Get the current HTML content of the element
const currentHTML = exampleElement.innerHTML;
console.log(currentHTML); // Output: "This is an example element"

// Set new HTML content for the element
exampleElement.innerHTML = "<p>This is new HTML content</p>";
```

18. &#x20;textContent:

The textContent property is used to get or set the text content of an element.

Example:

```html
<div id="example">This is an example element</div>
```

```javascript
const exampleElement = document.getElementById("example");

// Get the current text content of the element
const currentText = exampleElement.textContent;
console.log(currentText); // Output: "This is an example element"

// Set new text content for the element
exampleElement.textContent = "This is new text content";
```

19. &#x20;style:

The style property is used to get or set the CSS style of an element.

Example:

```html
htmlCopy code<div id="example" style="background-color: red; width: 100px; height: 100px;"></div>
```

```javascript
javascriptCopy codeconst exampleElement = document.getElementById("example");

// Get the current style of the element
const currentStyle = exampleElement.style;
console.log(currentStyle.backgroundColor); // Output: "red"

// Set new style for the element
exampleElement.style.backgroundColor = "blue";
exampleElement.style.width = "200px";
exampleElement.style.height = "200px";
```

20. &#x20;classList:

The classList property is used to get or set the classes of an element.

Example:

```html
htmlCopy code<div id="example" class="box"></div>
```

```javascript
javascriptCopy codeconst exampleElement = document.getElementById("example");

// Get the current classes of the element
const currentClasses = exampleElement.classList;
console.log(currentClasses); // Output: ["box"]

// Add a new class to the element
exampleElement.classList.add("red");
```


---

# 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://dhrubo.gitbook.io/programming-with-js/dom/accessing-elements.md?ask=<question>
```

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.