How do I access DOM objects from the new browserWindow?


Hi all,
I am new to electron so I was wandering around the world for now.
I was wondering if there exist anyways around for me to access the DOM objects from the new window opened.
Here’s the structure:
main.js : calls index.html, where index.html has foo.js to fill in it’s page content.
Then if a user clicks a button, it opens up a new browser window by calling a function in bar.js

function openEditor(dt){
  const {BrowserWindow} = require('electron').remote
  var editdictWin = new BrowserWindow({width: 400, height: 800, frame:true});
  var editButtontoggle = document.getElementById("editDict");
  editdictWin.loadURL('file://' + __dirname + '/app/dictEditor.html');
  if (dt){
    populateTable(editdictWin, dt);

As you can see, this function loads the dictEditor.html page which has an empty

So I was going to fill in the content of the table within populateTable function.
Now, the problem is when I try to modify and insert contents using

‘document.getElementbyID(“table”)’ ,

it is null because the ‘document’ refer to the index.html, which was opened in the main window.

Here are my questions in short:

  1. Am I using a wrong structure to open up a new window
    (the new window doesn’t need to disable the main, so I didn’t put as a child)

  2. How can I access DOM so that my document.getElementbyID can scope on the dictEditor.html in the new browserwindow?