THE STEP-BY-STEP GUIDE

Building An Application With Electron.js — Part 2

A detailed guide on various methods used for accessing the DOM elements in electron.js

In the previous article, we had an overview of what exactly is electron.js and how to set up the application to get started with the development process. Hence today we are going to explore the various methods of accessing the HTML DOM elements.

In a nutshell, DOM i.e document object model is a standard for changing, adding or deleting the HTML elements. There are mainly three methods for accessing the DOM elements which are as follows:

1. Using ipcRenderer and ipcMain module of electron.js
2. Using webContents.executeJavaScript(code, userGesture)
3. Using script tag in HTML file

Method 1: Using script tag

This is the easiest and simplest method in which one has to add the script tag in the HTML file itself. For instance, if you want to act as soon as an event occurs say on a button click then we can do it by using the following code snippet.

As per this snippet as soon as the click event is fired we are accessing the <p></p> tag to change its text. But this approach is not considered the best because it makes our code a bit messy and violates the standard of code segregation.

Method 2: Using webContents.executeJavaScript(code,[userGesture])

webContents is a type of EventEmitter which is responsible for rendering and controlling a web page. It is a property of the BrowserWindow module of the main process. It also contains the executeJavaScript function having two arguments namely:

1. code: which accepts the value in string format, and
2. userGesture: This is an optional argument which has its default value as false.

The argument code is the one which holds the value of a javascript code contained under the quotes to convert it into the string format.

Note: Common error faced by developers in this method is due to the string interpolation as sometimes we miss out the quotes i.e misplaced opening and closing quotes.

Let’s have a look at the following code snippet used for changing the values of DOM elements.

Here the variable code indicates the string format of the javascript code enclosed within the backtick or backquote (``). To use the value of a variable like ‘user’ we can interpolate the variable in the string using ${<variable name>}

Method 3: Using ipcRenderer and ipcMain module

IPC stands for Inter-Process Communication. As renderer process is responsible for displaying the UI so DOM can not be accessed in the main process but ipc module is present in both main and renderer process. This module allows communication between these two processes using sync/async messages.

• ipcMain: This help in communication from Main to Renderer process. It handles all synchronous and asynchronous messages being sent from the renderer process.
• ipcRenderer: This help in communication from Renderer to the Main Process. It is defined and used in the Renderer Processes. It provides the capability to send messages to and receive messages from the Main Process, synchronously and asynchronously.

Note: It is not prefered to perfrom heavy task or computations in renderer process because it makes the application slow.

So let’s have a look at the code snippet for using ipcRenderer module

First of all, we have to load the ipcRenderer module from the electron and via send(channel, …args) function we will pass the information where the channel is an argument having string format and next is the different parameter values we want to send. This function can be executed when an event is fired.

To receive the message from the main process we use ipcRenderer.on(channel, listener(event,…args)) function where channel is a string variable and event indicates some ipcRendererEvent and args indicates parameters.

We can include this directly into the index file or can create a separate javascript file (say renderer.js) and add the script tag at the bottom in the HTML (say index.html) file.

Now given below is the code snippet for ipcMain module

This is a sample code for performing the task obtained from the renderer process and once the task is completed the information is sent back to the renderer process.

To sum up we gained the knowledge of accessing DOM elements using various methods along with their implementations.

If you have gotten this far into the blog pat yourself on the back because guess what? You’re awesome. The whole working repository is available on GitHub.

Hit me up on LinkedIn for any collaborations on the topic or edits of this article.