> For the complete documentation index, see [llms.txt](https://dhrubo.gitbook.io/programming-with-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dhrubo.gitbook.io/programming-with-js/dom/accessing-elements.md).

# 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");
```