Recently, my group at Flatiron School just finished our JavaScript mod. It was the first time, I truly worked with DOM manipulation. In this post, I will be going over common elements and attributes that I often worked with as I created cards, forms, etc with vanilla JavaScript.
I am writing this post a place of reference for myself. Hopefully this will be helpful to those of you that starting out with DOM manipulation and if you have less experience with CSS and/or HTML. Not all elements and attributes are included. I am only including the ones I worked with the most.
ATTRIBUTES
Attributes allow you to define characteristics of an HTML element. By defining its characteristics, we can select element more easily and also give it more functionality.
My most used attributes were ID and Class selectors.
ID and Class Attribute
Selectors are very important because they allow you to easily select elements and add style or functionality to them. You can have many p's or divs in one HTML file. Having ID's or classes will you to specifically select a certain div in the file, like so:
ID Selector
<p id="my-id"></p>
let myId = document.getElementById('my-id')
myId.innerText = "Hello World!"
ID Selectors are unique. They should only select one specific element.
Class Selector
<p class="sub-title">Movies</p>
<p class="sub-title">TV Shows</p>
let subTitles = document.querySelectorAll('.sub-title')
subTitles.style.color = 'blue'
Unlike ID selectors, classes can group certain elements. Classes are great for styling! In this example, we change the sub title colors to blue because they have the same class identifier.
Some things to remember....
Classes and IDs can be used in JS and CSS. Unless you use a specific selector like getElementById, you have to use a dot to identify class and a # to identify an id.
//JS
//Selecting a class
('#id')
//Selecting an id
('.class')
Style Attribute
This one's self explanatory. It allows you to add styling on an element. It sounds simple enough but this attribute can be quite powerful. Here are some examples of the style attribute both in JS and HTML
HTML
<p style="color:red">This is a paragraph.</p>
<p style="font-size:160%;">This is a paragraph.</p>
//JS
p.style.fontSize = "160%"
p.style.color = "red"
Src Attribute
When you want to display an image on the DOM, you will probably be using the img tag. Images need a source(ie: url, jpg file, png file) to be displayed on a page. This is where we use the source attribute or also known as src.
<img src="img_dessert.png">
dessertImage = document.createElement('img')
img.src = "img_dessert.png"
Display Attribute
Note! Display is an attribute of Style!
Display is a little different than the attributes listed above. However, I am giving an honorable mention because it was incredibly useful when hiding and displaying blocks on the DOM. Display, as mentioned is an attribute of Style. It allows you to hide certain elements on the page and also reveals them depending on your code. It is usually tied to a click listener to use the functionality of display. For example, if you need to implement an edit form, you may want to hide the edit form until the user hits the edit button. This is where the display attribute comes into play.
//CSS
#edit-form{
display: none //hide edit-form by default
}
In this block of code, edit-form is hidden by default by using the display property and setting it to none.
let editButton = document.getElementById('editButton')
editButton.onclick = () => {
let editForm = document.getElementById('edit-form')
editForm.style.display = "block"
}
As mentioned before, if a user hits the edit button, you would want the edit form to be displayed. In this case, we set up an event listener on the edit button, so when that button is clicked, the form is displayed. This is done by the last line in this code block. To display the form, you would use the style and display attribute and set it to "block" to display this form.
ELEMENTS
Elements consists of start and end tags. In DOM manipulation, use them to create stuff on the page and add to the current HTML page.
The div Element
In an easy explanation, the div element is a container. It groups content and puts them in div containers. In DOM manipulation, it common to create other elements and append them to the div.
let div = document.getElementById('text-container-div')
let p = document.createElement('p')
p.innerText = "Hello World!"
div.appendChild(p)
Assuming that the ID of "text-container-div" is a div element, we are grouping the "p" element with that div. The "text-container-div" now contains the text "Hello World".
The p Element
The "p" element is pretty straight forward. It defined as a paragraph element. Naturally, a paragraph will contain text and so will a "p" element.
//HTML
<p id="p-example">Hello World</p>
//JS
let p = document.getElementById('p-example')
The Heading Element
Heading elements are usually defined by an "h" followed by the header number like this:
HTML
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
In JS, you can create a new heading element like this:
//JS
document.createElement('h1')
The Button Element
A button element is clickable and can contain text to determine what this button does. In JS and DOM manipulation, buttons will usually have an event listener attached to them, to add functionality.
HTML
<button id="click-me-button">Click me!</button>
//JS
let button = document.getElementById('click-me-button')
button.onclick = () => {
doSomething();
}
Ul, Ol and Li Elements
In a simple explanation, these elements create lists. Li stands for list. Ul stands for Unordered List and Ol stands for Ordered List. Li is usually nested under either Ul or Ol.
Here is an example in HTML form:
<ul id="unordered-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
In JS, I often grabbed the "ul" element and appended the "li" element.
let ul = document.getElementById('unordered-list')
let listItem = document.createElement('li')
listItem.innerText = "Amazing Item";
ul.appendChild(listItem)
There are countless attributes and elements out there. However, these are the elements and attributes I found useful to learn when I started out with JS and DOM manipulation.
Top comments (0)