title: Avoid using document.getElementById with Backbone.js
body: <p>I am making an application using Backbone.js, but I'm new to the Backbone.js. I need to change style property of HTML element. Is there way of using something from Backbone.js to change style of HTML element? </p>
  
  <p>Inside index.html I put paragraph which is hidden:</p>
  
  <pre><code>&lt;input type="text" id="name" placeholder="Enter name"&gt;
  &lt;p id="error_msg_name1" style="display: none;"&gt;
      Please, enter the name of the configuration.
  &lt;/p&gt;
  </code></pre>
  
  <p>And when someone tries to save empty "name" inside the model, this paragraph should be shown, which I handled this way:</p>
  
  <pre><code>var nameValue = document.getElementById("name").value;
  if (nameValue == '') {
      document.getElementById("error_msg_name1").style.display = 'inline';
  }
  </code></pre>
  
  <p>My mentor told me that I shouldn't use <code>document.getElementById</code>, that I should use something from Backbone.js. I googled this for days, but I haven't found anything helpful.</p>
  
  <p>This is my model:</p>
  
  <pre><code>var Configuration = Backbone.Model.extend({
  
    defaults: function() {
        return {
            name: '',
            description: '',
            version: ''
        };
    }
  
  });
  </code></pre>
  
  <p>And here is the View:</p>
  
  <pre><code>var ConfigurationView = Backbone.View.extend({
  
      events: {
          'click #ok': 'createConf',
          'click #cancel': 'cancelConf',
          'click #preview': 'showJSON',
          'click #readFile': 'readFile'
      },
  
      readFile: function() {
          var files = document.getElementById('fileInput').files;
  
          if (!files.length) {
              alert('Please select a file!');
              return;
          }
  
          var file = files[0];
          var reader = new FileReader();
  
          reader.onloadend = function(evt) {
              if (evt.target.readyState == FileReader.DONE) {
                  var fileContent = evt.target.result;
                  document.getElementById('previewFile').textContent = fileContent;
                  importedConfiguration = new Configuration(JSON.parse(fileContent));
  
                  $('&lt;div class="col-sm-offset-2 col-sm-10"&gt;\
                          &lt;button type="button" class="btn btn-default btn-sm" id="update"&gt;Update&lt;/button&gt;').appendTo('#for_button');
              }
          };
  
          reader.readAsBinaryString(file);
      },
  
      remove: function() {
          $(this.el).empty().detach();
          return this;
      },
  
      cancelConf: function() {
          this.render();
      },
  
      createConf: function() {
  
          document.getElementById("error_msg_name1").style.display = 'none';
          document.getElementById("error_msg_name2").style.display = 'none';
          document.getElementById("error_msg_description").style.display = 'none';
          document.getElementById("error_msg_version").style.display = 'none';
  
          var nameRegex = /^[A-Za-z]+$/;
  
          var nameValue = document.getElementById("name").value;
          var descriptionValue = document.getElementById("description").value;
          var versionValue = document.getElementById("version").value;
  
          if (descriptionValue != ''  &amp;&amp; versionValue != '' &amp;&amp; nameRegex.test(nameValue)) {
              configuration.set({name: nameValue, description: descriptionValue, version: versionValue});
  
              document.getElementById("for_preview_JSON").innerHTML = JSON.stringify(configuration);
              document.getElementById("for_preview_JSON").disabled = true;
  
              var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(configuration));
              $('&lt;a href="data:' + data + '" download="data.json"&gt;download JSON&lt;/a&gt;').appendTo('#for_download_link_JSON');
  
              document.getElementById("ok").disabled = true;
              document.getElementById("preview").disabled = true;
              document.getElementById("name").disabled = true;
              document.getElementById("description").disabled = true;
              document.getElementById("version").disabled = true;
          }
          else {
              if (nameValue == '') {
                  document.getElementById("error_msg_name1").style.display = 'inline';
              }else if(!nameRegex.test(nameValue)) {
                  document.getElementById("error_msg_name2").style.display = 'inline';
              }
  
              if (descriptionValue == '') {
                  document.getElementById("error_msg_description").style.display = 'inline';
              }
              if (versionValue == '') {
                  document.getElementById("error_msg_version").style.display = 'inline';
              }
          }
      },
  
      showJSON: function() {
          var preview_conf = new Configuration({
              name: document.getElementById("name").value, 
              description: document.getElementById("description").value, 
              version: document.getElementById("version").value
          });
          document.getElementById("for_preview_JSON").innerHTML = JSON.stringify(preview_conf);
          document.getElementById("for_preview_JSON").disabled = true;
      },
  
      initialize: function(options){
          this.template = options.template;
      },
  
      render: function(){
          var content = $(this.template).html();
          $(this.el).html(content);
          return this;
      }
  });
  </code></pre>