DONATE  
MENU
JSON
JAVASCRIPT
AJAX
HTML

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Html / Js Dom » DOM Attributes
Share Tweet WhatsApp

DOM Attributes

With the document object model, you can access all attributes of various HTML elements and change same. Some elements' properties are: id With the id property, you can get an element's id attribute and change it to whatever value.
<style>
#p{
color:red;
}
#newp{
color:blue;
}
</style>
<p id='p'>James, how are you?</p>
<button onclick='change()'>CHANGE ID</button>
<script>
function change(){
var p = document.getElementById("p");
alert("Before change, the id was "+p.id);
p.id = "newp"; //changing id
alert("After changing, the id is "+p.id);
}
</script>

Copy PRACTICE IT

Notice how the CSS stylings already defined for the new id were applied to the element immediately. className & classList With the element's className and classList properties, you can get the class attribute of an element, add other classes or change it totally. CHANGE CLASS ATTRIBUTE VALUE
<style>
.size1{
font-size:2em;
}
.size2{
font-size:4em;
}
</style>
<p id='myEl' class='size1'>Hello World</p>
<button onclick='change()'>CHANGE CLASS</button>

<script>
function change(){
var myEl = document.getElementById("myEl");
alert("Before changing class, the class was "+myEl.className);
myEl.className = "size2"; //changes class
alert("After changing class, the class was "+myEl.className);
}
</script>

Copy PRACTICE IT

classList
<style>
.size1{
font-size:2em;
}
.size2{
font-size:4em;
}
</style>
<p id='myEl' class='size1'>Hello World</p>
<button onclick='change()'>CHANGE CLASS</button>

<script>
function change(){
var myEl = document.getElementById("myEl");
alert("Before changing class, the class was "+myEl.classList);
myEl.classList = "size2"; //changes class
alert("After changing class, the class was "+myEl.classList);
}
</script>

Copy PRACTICE IT

ADD NEW CLASS TO CLASS ATTRIBUTE VALUE
<style>
.class1{
font-size:2em;
}
.class2{
color:red;
}
</style>
<p id='myEl' class='class1 hello'>Hello World</p>
<button onclick='change()'>ADD CLASS</button>

<script>
function change(){
var myEl = document.getElementById("myEl");
alert("Before adding class, the existing classes were "+myEl.className);
myEl.className += " class2"; //adds a class
alert("After adding class, the classes are now "+myEl.className);
}
</script>

Copy PRACTICE IT

Above, we added another class to the already existing class of an HTML element. Noticed how we gave a space before assigning the new class name (" class2"). That spacing is to separate it from other class names because HTML elements can belong to multiples classes provided the class names are separated with a space. src With the src property of elements' object, you can get and change the src attribute of media elements such as images, videos and audios and elements that do has the HTML src attribute.
<p><img src='../media/garden.jpg' width='100%' height='340px'/></p>

<button onclick='change("garden.jpg")'>GARDEN 1</button><button onclick='change("garden1.jpg")'>GARDEN 2</button><button onclick='change("garden2.jpg")'>GARDEN 3</button>

<script>
function change (image){
var img = document.querySelectorAll("img");
img = img[0];
img.src = "../media/"+image;
}
</script>

Copy PRACTICE IT

Just as demonstrated with few attributes above, so can you do with a whole lot of other HTML attributes like the href, name, value, height, width & others in the HTML document object model (DOM). setAttribute() The setAttribute() method is a method that every HTML element possesses which can be used in assigning attributes to HTML elements on a webpage or changing their attributes' value. The method has two parameters which are the attribute name and the attribute value.
<a id='link'>Click link</a>

<p><button onclick='setLink()'>ACTIVATE LINK</button></p>
<script>
function setLink(){
var link = document.getElementById("link");
link.setAttribute("href","/");
}
</script>

Copy PRACTICE IT

In the above, we used the setAttribute() method to assign an attribute(href) with value of "/" to an hyperlink element. getAttribute() The getAttribute() method is a method that every HTML element possesses which can be used in getting the value of any of its attributes. The parameter of the method should be the name of the attribute you are trying to get its value.
<div id='myDiv' class='bigDiv boldDiv' style='color:red;'>Hello World</div>

<p><button onclick='getAtr()'>GET ATTRIBUTES</button></p>

<script>
function getAtr(){
var div = document.getElementById("myDiv");

alert("The ID of the div element is "+div.getAttribute("id"));

alert("The class list of the div element is "+div.getAttribute("class"));

alert("The styles of the div element is "+div.getAttribute("style"));
}
</script>

Copy PRACTICE IT

removeAttribute() The elements' removeAttribute() method helps us to easily remove attributes from HTML elements. The parameter should be the attribute to remove from the element.
<button onclick='remove(this)' style='color:white; background-color:red; font-weight:bold;'>REMOVE STYLE</button>

<script>
function remove(el){
el.removeAttribute("style");
}
</script>

Copy PRACTICE IT

SUMMARY
  1. With the document object, you can access all the attributes available for an HTML element.
  2. We can get elements' attributes' values, change the values, add new attributes, remove any attribute and a whole lot others.
  3. The id property helps get or change an element id.
  4. The class property helps get or change an element class.
  5. The src property helps get or change an element src.
  6. Same applies to a lot of other attributes.
  7. The setAttribute() is a method that allows us set attributes on HTML elements.
  8. The getAttribute() method helps get the value for an element's attribute.
  9. The removeAttribute() method allows us remove any attribute from an HTML element.
Take a short quiz on DOM Attributes.
Ask a question or tell us if DOM Attributes is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode