title: How to access DOM elements in electron?
body: <p>I am trying to add functionality to a button in <code>index.html</code> file is as follows:
  I have a button element in <code>index.html</code></p>
  
  <pre><code>&lt;button id="auth-button"&gt;Authorize&lt;/button&gt;
  </code></pre>
  
  <p>In <code>main.js</code> of the app, I have</p>
  
  <pre><code>require('crash-reporter').start();
  console.log("oh yaeh!");
  var mainWindow = null;
  
  app.on('window-all-closed', function(){
      if(process.platform != 'darwin'){
          app.quit();
      }
  });
  
  app.on('ready',function(){
      mainWindow = new BrowserWindow({width:800, height : 600});
      mainWindow.loadUrl('file://' + __dirname + '/index.html');
  
      var authButton = document.getElementById("auth-button");
      authButton.addEventListener("click",function(){alert("clicked!");});
  
      mainWindow.openDevTools();
  
      mainWindow.on('closed',function(){
          mainWindow = null;
      });
  });
  </code></pre>
  
  <p>But an error occurs as follows:
  <code>Uncaught Exception: ReferenceError: document is not defined</code></p>
  
  <p>Can the DOM objects be accessed while building electron apps? or is there any other alternative way that can give me the required functionality?</p>