Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using DOM elements in Javascript – Part 2

Saturday, February 9th, 2019 by Servage

Here we will discuss about some more id attributes syntaxes.

By id attribute value

getElementById()

This method returns a single element based on that element’s ID (the value of its id attribute), which we provide to the method as an argument. For example, to access this particular image:

<img src="photo.jpg" alt="" id="lead-photo">'

We include the id value as an argument for the getElementById() method:

var photo = document.getElementById("lead-photo");

By class attribute value

getElementsByClassName()

Just as it says on the tin, this allows you to access nodes in the document based on the value of a class attribute. This statement assigns any element with a class value of “column-a” to the variable firstColumn so it can be accessed easily from within a script.

var firstColumn = document.getElementsByClassName("column-a");

Like getElementsByTagName, this returns a nodeList that we can reference by index or loop through one at a time.

By selector

querySelectorAll()

querySelectorAll allows you to access nodes of the DOM based on a CSS-style selector. The syntax of the arguments in the following examples should look familiar to you. It can be as simple as accessing the child elements of a specific element:

var sidebarPara = document.querySelectorAll(".sidebar p");
or as complex as selecting an element based on an attribute:
var textInput = document.querySelectorAll("input[type='text']");

Like getElementsByTagName and getElementsByClassName, querySelectorAll returns a nodeList (even if the selector matches only a single element).

Accessing an attribute value

getAttribute()

As I mentioned earlier, elements aren’t the only thing you can access with the DOM. To get the value of an attribute attached to an element node, we call getAttribute() with a single argument: the attribute name. Let’s assume we have an image, source.jpg, marked up like this:

<img src="stratocaster.jpg" alt="electric guitar" id="lead-image">

In the following example, we access that specific image (getElementbyId) and save a reference to it in a variable (bigImage). At that point, we could access any of the element’s attributes (alt, src, or id) by specifying it as an argument in the getAttribute method. In the example, we get the value of the src attribute and use it as the content in an alert message. (I’m not sure why we would ever do that, but it does demonstrate the method.)

var bigImage = document.getElementById("lead-image");
alert( bigImage.getAttribute("src") ); // Alerts "stratocaster.jpg".

Manipulating nodes

Once we’ve accessed a node using one of the methods discussed previously, the DOM gives us several built-in methods for manipulating those elements, their attributes, and their contents.

setAttribute()

To continue with the previous example, we saw how we get the attribute value, but what if we wanted to set the value of that src attribute to a new pathname altogether? Use setAttribute()! This method requires two arguments: the attribute to be changed and the new value for that attribute.

In this example, we use a bit of JavaScript to swap out the image by changing the value of the src attribute.

var bigImage = document.getElementById("lead-image");
bigImage.setAttribute("src", "lespaul.jpg");

Just think of all the things you could do with a document by changing the values of attributes. Here we swapped out an image, but this same method could be used to make a number of changes throughout our document:

• Update the checked attributes of checkboxes and radio buttons based on user interaction elsewhere on the page

• Find the link element for our .css file and point the href value to a different style sheet, changing all the page’s styles

• Update a title attribute with information on an element’s state (“this element is currently selected,” for example)

Using DOM elements in Javascript - Part 2, 4.3 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.