Accessing the DOM elements in React

Juhi Sinha
Last Updated: May 13, 2022

Introduction

Accessing DOM elements and their current values is a key problem for us when working in web apps. For efficiency and cross-browser compatibility, React uses a browser-independent DOM framework. 

 

In this article, we are going to discuss how we can access DOM elements in react. But before that let’s understand the concept of virtual DOM in react.

 

The virtual DOM in React

Most JavaScript operations are much faster than DOM manipulation. To a web browser, rebuilding a list is not a tough job, but modern websites can use a lot of DOM manipulation. Ineffective updating has become a major issue. 

 

To solve this problem, the React team popularised a concept known as virtual DOM.

 

In declarative web frameworks like Vue.js, React, and Elm, a virtual DOM is a lightweight JavaScript representation of the DOM. Because nothing has to be rendered onto the screen, updating the virtual DOM is faster than updating the actual DOM. 

 

As a result, the system is free to make ineffective changes to the virtual DOM. The framework then compares the previous virtual DOM to the current one only to make the changes required to the actual DOM.

 

Following are the steps that take place when we update the DOM in React:

  1. It updates the complete virtual.
  2. The virtual DOM is then compared with the previous look it had before the update. 
  3. React figures out the changed objects.
  4. The changed objects, and the changed objects only, get updated on the real DOM.
  5. Changes in the real DOM leads to change in the screen.

How to access a DOM element in React?

 

Web applications contain various HTML elements rendered into the DOM, and any of the specific DOM elements can be accessed through code based on user interaction. You can use DOM elements to get HTML content, child elements, and sometimes the value of a specific element to process it. 

 

In react, there are several ways to access the DOM elements. The following are a few of them:

 

  1. Using Ref
  2. Using ReactDOM.findDOMNode

Using Ref

In React, we can access the DOM element using Refs. Refs provide a method to get DOM nodes or React elements created in the render method.

 

The ref is suitable for:

The basic syntax for creating the ref is shown below.

 

this.ref_name =  React.createRef();

 

Any DOM element can be attached to the ref created with createRef() and the variable ref name.

 

Example: In the code below a simple form with an input control and a button is shown. The input value can be accessed through the ref once the user clicks the button.

 

 

constructor(props) {
    super(props);
    this.myInputRef = React.createRef();
    this.getInputValue = this.getInputValue.bind(this); 
    }
render() {
  return (
      <>
      <div>
      <input type="text" ref={this.myInputRef} />
      <button onClick={this.getInputValue}>Submit</button>
      </div>
    </>
    );
}

 

The created ref gets the input value, creates the form, and assigns ref to the input element.

 

The function that gets the value of the input is listed below.

getInputValue() {

    const x = this.myInputRef.current.value;

    console.log(x)

}

 

The input value can be accessed directly using the statement this.myInputRef.current.value.

If you want to access the entire HTML element, follow the syntax below:

const inputElement = this.myInputRef.current;

 

We can't use ref with a function as it doesn't have any instance to the current component.

 

Using ReactDOM.findDOMNode

You've seen how to use ref to access a DOM element and its value. There are, however, other methods that can be useful, one of which is ReactDOM.findDOMNode ().

 

The findDOMNode() function is used to find a particular node in the DOM tree and retrieve information about it, such as its inner child elements, HTML, type of element, etc. In other words, it can return all of the supported DOM measurements for the element type.
 

In React, the syntax for findingDOMNode() is as follows:

ReactDOM.findDOMNode(component_name);

 

You may pass the name of the component or element you want to access from the DOM to findDOMNode()
 

Let's take an example of input control and a button to demonstrate the concept. Input control should be focused with a click on the button.

 

Step 1: Create the input control reference as shown below.
 

constructor(props) {

   super(props);

   this.myInputRef = React.createRef();

   this.state = {};

   this.onFocusInput = this.onFocusInput.bind(this);

}

 

Step 2: Create one input control and add additional ref props after you've finished with the ref. The input will be accessed from findDOMNode once the user clicks the button ().

render() {

    return (

      <>

        <div>

          <input type="text" ref={this.myInputRef} />

          <button onClick={this.onFocusInput}>FOCUS</button>

        </div>

      </>

    );

}

 

When the user clicks the focus button, the onFocusInput function attempts to locate the DOM element based on the ref. It then uses the focus() method to focus the selected input control.

onFocusInput() {

    ReactDOM.findDOMNode(this.myInputRef.current).focus();

}

 

When you click the button, the input control is auto-focused, which is accomplished with the help of the findDOMNode() and the focus() method.
 

Now, let’s move on to some of the frequently asked questions on this topic.

 

Frequently Asked Questions

 

What does DOM stand for?

Ans: DOM stands for Document Object Model.

How can we use DOM elements in react?

Ans: In React, we can use the DOM element by using RefsRefs provide a method to access React elements. React is used for creating Refs.  

What is ReactDOM?

Ans: ReactDOM is a package that provides DOM-specific methods used at the top level of a web app. It enables us to manage the DOM elements of the web page more efficiently.

 

Key Takeaways

 

In this article, we've learned about DOM elements in react and various ways to access them.

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here

Thank you for reading!

Was this article helpful ?
0 upvotes