Modifying Elements, Attributes, Classes & Styles in the DOM

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

The DOM, Document Object Model, is explained as a standard used by web browsers to interpret an HTML document. Various JavaScript methods which use the DOM to make modifications to the HTML document are demonstrated.

DOM - Document Object Model

The Document Object Model is a standard set by W3C, the World Wide Web Consortium. This standard defines how web browsers load and interpret HTML and XML documents. In this standard, HTML elements are interpreted as objects with specific attributes. In the DOM, these objects are referred to as nodes.

For example, let's say an HTML page contains an anchor link inside a paragraph:

<p>
<a href = "www.study.com">Click here to go to Study.com</a>
</p>

This anchor element is a node in DOM terms, and the URL of the website it points to is an attribute of the node, the href attribute. These nodes/elements in the DOM are linked to each other in a 'tree'-like structure. The relationship between these 'branches' of the tree is described as a 'parent-child' relationship. So, in the example code above, the <a> anchor node is a child of the <p> paragraph node.

Making Modifications

Why do we care about the DOM? Well, the DOM defines the structure with which the web browser interprets the HTML document and this allows us to use JavaScript to make changes to the page in a predictable way, without our code backfiring. This may be an obvious point, but it's worth noting that all the changes discussed in this lesson occur only in how the HTML document appears in the client web browser. No changes will affect the actual HTML document stored on the web server.

Modifying Styles

Changing an element's style (CSS) attributes is one of the ways in which the DOM can be used. For example, in the code below, the onfocus event handler method is used to change the <input> element's style when the user clicks inside it. When this event occurs, the element's background color will change to purple.

<!DOCTYPE html>
<html>
<body>
Email: <input type="text" id="outline" onfocus="background()">
<p>Click in the text input to focus the element.<br/>
This will trigger the 'background' function, which changes the element's background color to purple.</p>
<script>
function background() {
document.getElementById("outline").style.background = "purple";
}
</script>
</body>
</html>

All the modifications discussed in this lesson are achieved using the DOM. Notice the document.getElementById() part of the JavaScript function in the example. The document object refers to the entire HTML document, and the getElementById() method instructs the browser to isolate only the HTML element that has a specific ID, in this case outline. Once the desired element is targeted, the style method is used to specify the desired change.

Modifying Classes

Making changes to the elements' classes is another change that can be achieved using the DOM. Say, for example, that you're creating a website, and for some reason, you want to change the name of a particular class that you've been using. For instance, you are changing from the class name bodyText, to body. One way you could do this is through JavaScript, using code similar to the code below:

<!DOCTYPE html>
<html>
<body onload = "changeClass()">
<div class = "bodyText">
<p>This div has a class name of "bodyText", but when the JavaScript code runs, the class name will change to "body".</p>
</div>
<div class = "bodyText">
<p>The same will apply to this div, which has the same class name.</p>
</div>
<script>
function changeClass(){
var x = document.getElementsByClassName("bodyText");
xArray = Array.from(x);
xArray.forEach(function loop(item){
item.className="body";
});
}
</script>
</body>
</html>

The example above includes more complex script, which uses JavaScript features which are not the focus of this lesson: an array and a for each loop. Let's explain it as simply as possible. First of all, the script is called to run 'automatically' with the onload method inside the <body> tag. This means that as soon as the browser loads the <body> element of the HTML document, the JavaScript code will run without the user having to do anything, as in the previous example.

Next, the JavaScript changeClass() function uses the getElementsByClassName method to identify all elements with the class name bodyText. There are two div elements with that class in this example. Following that, the function uses an array and a loop to change the class name for all the identified elements to body with the className method.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support