Get Element By Id In JavaScript Explained

There are two methods that you can use to get element by id in JavaScript.

1. getElementById()
2. querySelector()

Create an HTML Div Element With an ID attribute.

The value of the ID attribute is set to box.

<div id="box"></div>

Get Element By ID Using GetElementById()

Get a DOM reference of the HTML Element in JavaScript.

Invoke getElementById() method on the document object.

The getElementById() method takes one argument which is string.

The string value must match the value of ID attribute specified in the HTML Markup.

<div id="box"></div>

In this case: box.

Once it’s matched, it will return HTMLDivElement object.

const box = document.getElementById("box");

Assign it to a constant called box.

If there is no match, the getElementById() method will return null.

The getElementByID() method will only be available in the global document object.

Because, the value of the ID attribute must be unique to the entire HTML page.

Get Element By Id Using querySelector()

Alternatively, querySelector() method also gets an element by id in JavaScript

Invoke querySelector() method on the document object.

The querySelector() method takes one argument which is string as well.

const box = document.querySelector("#box");

The string value must match the value of ID attribute specified in the HTML Markup along with CSS Selector symbol.

For Example: # sign for ID.

So the string value will be #box

Get Element By ID InnerHTML

Get Child Element By ID

You can also get child element by id using .children property.

The div with an Id box element has a child div element with an id.

<div id="box">
  <div id="inner-box">
  </div>
</div>

Get a DOM reference to the box div element which is the parent.

Assign it to a constant box.

The .children property gets all elements inside the box div element.

The element we want to get is the div with an id box-inner.

Invoke item() method on the box.children.

Pass the value of ID attribute of the child element.

In this case: box-inner.

const box = document.getElementById("box");
const boxInner = box.children.item("box-inner");

Get Element By ID InnerHTML

Learn how to set / get text or HTML Elements using a property called innerHTML.

const box = document.getElementById("box");
box.innerHTML = "Box";

You can also add HTML Elements using innerHTML.

const box = document.getElementById("box");
box.innerHTML = "<p>Box</p>";

Get Element By ID Value

Learn how to get a value of any HTML form elements using getElementById() method.

To do that, invoke getElementById() method on the document object passing the value of ID attribute as an argument.

Assign it to the constant name.

Then, get the input value by accessing a property called value from the name object.

<input type="text" id="name" value="Raja Tamil">

<script>
  const name = document.getElementById("name");
  console.log(name.value);
</script>