title: Why getElementsByClassName is not working while getElementById works?
body: <p>This first code is not working</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>DN.onkeyup = DN.onkeypress = function(){
    var div = document.getElementById("DN").value
    document.document.getElementsByClassName("options-parameters-input").style.fontSize = div;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#one{
      height:100px;
      width:100px;
      background-color:#CCCCCC;
      border:none;
      margin:10px;
      float:left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="one"&gt;
    &lt;div class="options-parameters-input"&gt;
      gfdgd
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;table width="750" border="1" cellspacing="3" style="float:left;"&gt;
    &lt;tr&gt;
      &lt;td&gt;Test&lt;/td&gt;
      &lt;td&gt;&lt;textarea id="DN"&gt;&lt;/textarea&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/gxTuG/85/" rel="nofollow noreferrer">http://jsfiddle.net/gxTuG/85/</a></p>
  
  <p>and this one works</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>DN.onkeyup = DN.onkeypress = function(){
    var div = document.getElementById("DN").value
    document.getElementById("one").style.fontSize = div;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#one{
      height:100px;
      width:100px;
      background-color:#CCCCCC;
      border:none;
      margin:10px;
      float:left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="one"&gt;gfdgd&lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;table width="750" border="1" cellspacing="3" style="float:left;"&gt;
    &lt;tr&gt;
      &lt;td&gt;Test&lt;/td&gt;
      &lt;td&gt;&lt;textarea id="DN"&gt;&lt;/textarea&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/gxTuG/86/" rel="nofollow noreferrer">http://jsfiddle.net/gxTuG/86/</a></p>
  
  <p>in first code i am trying to use <code>getElementsByClassName</code> and it does not work...</p>
  
  <blockquote>
    <p>Error: Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined(…)</p>
  </blockquote>
  
  <p>So my question is how to get working when I want to target element like div class ?</p>
  
  <p>My goal is to make ability in options page panel that admin user can change / inject new css rules from textarea or input for certain elements. and there are elements like div class social-container-icons and other.</p>
  
  <p>Also is this good way to inject new css rules ?</p>
  
  <p>Thank you</p>