Section 1: DOM, Elements, Attributes, Properties, and Selection
Overview: We will be going over what the DOM is to Javascript, as well as how to interact with elements and their properties/attributes inside the DOM in both Javascript and jQuery. Today will be the most basic lesson by far.
What is the DOM?
DOM stands for Document Object Model, it is created by the browser, and is a tree of objects. It is always important to keep this in mind when working with JS; that all elements are essentially just objects that live in the DOM.Just like in any other programming, these "objects" have properties and attributes (such as "value" and "disabled"), and can be changed and manipulated.
Element attributes and properties are essentially the same thing for our purposes, and we will refer to them as properties, since our JS will be using the properties.
Initial document
Not much to say here other than we have a blank HTML document with jQuery loaded into it. This is where we will begin:Select an element from the DOM
There is a number of ways to select an element with Javascript and jQuery (which I am sure you are aware of). To select just a single element it is recommended you select by the elements ID, since ID's are (supposed to be) unique on the page. When selecting by something else, such as a CSS class, you will get back and array of elements that all have that CSS class. These are all valid ways to select elements:jQuery
- By ID -
$('#theId') - By class -
$('.theClass') - By name -
$('[name="theName"]')
Javascript
- By ID -
document.getElementById('theId') - By class -
document.getElementsByClassName('theClass') - By name -
document.getElementsByName("theName");
jQuery Note:
It is important to note when using jQuery, you should select an element by being as specific as you can. For example to select the element<button name="someButton">Click Me!</button>you should use
$('button[name="someButton"]'), note we are telling jQuery we are looking specifically for a button who's name is
'someButton' and not just anything with the name 'someButton'.
JS Pitfall
Selecting by class, name, or any other property will give you an array of elements that match. Select in this manner only when you need to select multiple elements.Elements as Objects?
To you, the code<button id="someButton">Click Me!</button>looks like just plain HTML. However Javascript sees this HTML element quite differently. Let's select this element with JS and also with jQuery and see what we get:
jQuery
- Select and log to the console using:
console.log($('#someButton'));
Javascript
- Select and log to the console using:
console.log(document.getElementById('someButton'));
Wait, my console.log is different for both!?
Not really. jQuery puts a wrapper around the element to expose all of its properties to you. You can see the properties of the object in regular JS by usingconsole.dir()rather than
console.log()
Ok, so what are these?
Upon console.log (or dir) of the element, you are going to see a pretty massive list. These are of course, your elements properties! Some will be familiar, some will not. It is most important to note that the element behaves according to its properties. If you want to update an element, simply update its properties.Take a moment and look through the result of
console.log()and identify some properties you might know already.
Now let's update some properties...
We need to give this button a little more style, let's make the text blue by modifying the 'color' property:jQuery
See the Pen ZaJgpE by Mike Parda (@mikeparda) on CodePen.
Javascript
See the Pen WXzyzY by Mike Parda (@mikeparda) on CodePen.
Ok so that was pretty easy... but styling with Javascript is not efficient, we need to add a CSS class to this button to really make it nice. Let's say I add a CSS class called "fancy-button" and want to apply it to my button with JS. My new HTML document will look like:
And my JS will look like this:
jQuery
See the Pen VrXdVz by Mike Parda (@mikeparda) on CodePen.
Javascript
See the Pen QOmxzo by Mike Parda (@mikeparda) on CodePen.
jQuery has less code! Let's use it for all the things!
Indeed jQuery does have less code in this instance. Using jQuery.addClass()is less code to write, however it is still going to execute the same JS code as if we did it manually. Always keep this in mind when using jQuery, just because you write less code, does not mean the browser executes less code. You could very easily take our JS code, put it into a function, and now it is reusable and just as easy to call as it's jQuery counterpart.
So do I use jQuery or not?
Well that really depends. If you already have jQuery loaded into your project, this would be an instance of "why not?". However, if you do not yet have jQuery, the.addClass()function would not really be grounds to import the jQuery library. Even if you do have jQuery loaded into your project, it is perfectly acceptable to use plain JS, and in fact much easier on the browser, so I would encourage using regular old JS whenever it is "almost as easy" as using jQuery to save your client some processing power.
Adding Elements
There is both a jQuery way, and a pure Javascript way to create a new element and place it into the DOM. Let's say I want to createspanthat says "i am the span". Let's say I want to add the
spanelement to a
divthat is already on the page:
jQuery
See the Pen pdLZPj by Mike Parda (@mikeparda) on CodePen.
Javascript
See the Pen bYvjrX by Mike Parda (@mikeparda) on CodePen.
A few things to notice...
One major takeaway is that notice when we are creating elements, we are able to adjust their properties right there. In jQuery, you simply pass and object with key: value pairs of property: value for the element. In Javascript, you simply create the new HTML element, then adjust its properties accordingly.The other thing to note is that we are doing this "by the book" and not simple typing out the HTML element as a string (as is often the case in many applications). We could have simply done this, however it is not technically correct and will only work with jQuery:
See the Pen jazpzW by Mike Parda (@mikeparda) on CodePen.
Selecting Dynamic Elements
Something to note and keep in mind, is that you cannot select elements until they have been put into the DOM. We will be going over this more in the next section when we start dealing with events, however please do always keep in mind that elements cannot be selected until they have been put into the DOM.Animations
Javascript used to be the "go to" for animations on the web. Since the rise of the modern browser and adoption of CSS3, there is no need for this anymore, CSS3 should be utilized for animations (see: keyframes). That being said, if we make a CSS class to animate an element, we will still likely have to use Javascript or jQuery to add that class to the element.However, there is going to be instances when you may need to use JS or jQuery to animate something. This is something that jQuery comes built in with, however it is really not that difficult to implement in plain Javascript, and not a reason to include the entire jQuery library. Let's take a look at a real world example; fading an element out.
jQuery
See the Pen WXJQyb by Mike Parda (@mikeparda) on CodePen.
Javascript
See the Pen jaxbwO by Mike Parda (@mikeparda) on CodePen.
This is an instance where we may want to use JS or jQuery to fade out then remove an element and set it to
display: none;. Even if we used CSS3 to fade then remove the element, we have no way to know when the element has finished fading. jQuery, as well as our function, both provide a callback function that will execute when the animation is complete.