cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Javascript &amp; JQuery for DOM manipultion</h1>
<h2>Javascript and JQuery Brief Introduction/Primer</h2>
<p>Using Vanilla JS (Javascript), there are multiple ways to target elements via the DOM (Document Object Model). One of the simplest ways to target a single, unique element (class or id) is to use document.getElementById():<p>
<pre><code>
    document.getElementById('mydiv')
</pre></code>
<p>So long as you do not need to support older browsers, you are better off using querySelector or querySelectorAll:<p>
<pre><code>
    document.querySelector('#mydiv')
    document.querySelectorAll('.myclass')
</pre></code>
<p>Jquery makes this even easier:<p>
<pre><code>
    $('#mydiv')
    $('.myclass')
</pre></code>
<p>If you plan on scripting with JQuery, you'll need to add a link to the JQuery class library (via a script tag in your html). I suggest using a CDN (hosted link) and placing all scripts at the bottom of your html page before the closing body tag</p>
<pre><code>
  <!-- JQUERY -->
  &#60;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&#62;&#60;/script&#62;
</pre></code>
<p>Javascript and Jquery use variables, statements (single lines of code/instructions), event handlers ("on click do something") and functions (resuable sets capable of grouping multiple statements).</p>
<pre><code>
//Javascript Example
document.addEventListener('DOMContentLoaded', function() {

    var element = document.querySelector('#mydiv');
    element.addEventListener('click', function() {
      // do something
    });
    
})
    
//JQuery Example
$( document ).ready(function() {

    $("#mydiv").click(function() {
      // do something
    });

});
</pre></code>
<hr />
<h2>Example: Toggle (add/remove) a Class</h2>

<h3>Using Javascript:</h3>
<!--<a href="#" class="js button" onclick="makeRed();">Javascript</a>-->
<p>To target a single, unique element (class or id) using vanilla JS, you can use document.querySelector():<p>
<a href="#" class="mybutton">Unique Button</a>
<pre><code>
    &#60;a href="#" class="mybutton"&#62;Unique Button&#60;/a&#62;

</pre></code>
<p>You then need to add an event listener to handle a click event and a function to do something once an event is triggered.<p>
<pre><code>
    document.querySelector('.mybutton').addEventListener('click', function(e) {
      this.classList.toggle('red');
      e.preventDefault();
    });

</pre></code>

<p>To target multiple elements (that share the same class) using vanilla JS, you can use document.querySelectorAll() and you'll need to loop through an array of elements:<p>
<a href="#" class="button">Regular Button</a>
<a href="#" class="button">Regular Button</a>
<pre><code>
    &#60;a href="#" class="button"&#62;Regular Button&#60;/a&#62;
    &#60;a href="#" class="button"&#62;Regular Button&#60;/a&#62;

</pre></code>
<pre><code>
    var elements = document.querySelectorAll('.button');
    for ( var i = 0, len = elements.length; i &#60; len; i++ ) {
        elements[i].addEventListener('click', function(e) {
          this.classList.toggle('red');
          e.preventDefault();
        });
    }

</pre></code>

<h4>Vanilla JS Notes:</h4>
<ul>
  <li>document.querySelector('.classname') gets the first matching element</li>
  <li>document.querySelectorAll('.classname') returns a node list of all matching elements.</li>
  <li>These will only work on IE 9+. If you require support for older browsers, you can use a polyfill or use different methods, such as:
      <ul>
        <li><a href="https://github.com/eligrey/classList.js">Eli Grey's classList.js polyfill</a>. - works in all browsers IE8+</li>
        <li>document.getElementById('#idname') - works in all browsers back to IE6+</li>
      </ul>
  </li>
  <li>Helpful Vanilla JS Resource: <a href="https://gomakethings.com/ditching-jquery/">Chris Ferdinandi's Ditching JQuery Article</a></li>
</ul>

<h3>Using JQuery</h3>
<p>JQuery makes it super easy, you can target single or multiple elements the same way with less code. Plus it will work with on older browsers. The cost: JQuery library K size.<p>
<a href="#" class="jq-mybutton">Unique Button</a>
<a href="#" class="jq-button">Regular Button</a>
<a href="#" class="jq-button">Regular Button</a>
<pre><code>
    &#60;a href="#" class="jq-mybutton"&#62;Unique Button&#60;/a&#62;
    &#60;a href="#" class="jq-button"&#62;Regular Button&#60;/a&#62;
    &#60;a href="#" class="jq-button"&#62;Regular Button&#60;/a&#62;

</pre></code>
<pre><code>
    $(".jq-button, .jq-mybutton").click(function(){
        $(this).toggleClass("red");
        return false;
    });

</pre></code>

            
          
!
            
              .button,
.mybutton,
.jq-button,
.jq-mybutton{
  background-color: #ccc;
  color: #333;
  display: inline-block;
  padding: 1em;
  text-decoration: none;
}

.red {
  background-color: red;
}
            
          
!
            
              	// VANILLA JS EVENT LISTENER FOR ONE ELEMENT
var element = document.querySelector('.mybutton');
element.addEventListener('click', function(e) {
  this.classList.toggle('red');
  e.preventDefault();
});

// VANILLA JS EVENT LISTENER FOR MULTIPLE ELEMENTS
var elements = document.querySelectorAll('.button');
for ( var i = 0, len = elements.length; i < len; i++ ) {
  elements[i].addEventListener('click', function(e) {
    this.classList.toggle('red');
    e.preventDefault();
  });
}

// QUERY EVENT LISTENER AND FUNCTION FOR MULTIPLE ELEMENTS
$(".jq-button, .jq-mybutton").click(function(){
  $(this).toggleClass("red");
  return false;
});
            
          
!
999px
Loading ..................

Console