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():

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

  1. getElementsByClassName():

<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>

  1. getElementsByTagName():

<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>

  1. getElementsByName():

<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>

  1. querySelector():

<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>

  1. querySelectorAll():

<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>

  1. children:

<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>

  1. firstChild:

<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>

  1. lastChild:

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

  1. innerHTML:

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

Example:

<div id="example">This is an example element</div>
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>";

  1. textContent:

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

Example:

<div id="example">This is an example element</div>
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";

  1. style:

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

Example:

htmlCopy code<div id="example" style="background-color: red; width: 100px; height: 100px;"></div>
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";

  1. classList:

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

Example:

htmlCopy code<div id="example" class="box"></div>
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");

PreviousBrief explanation about some termsNextModifying elements

Last updated