Javascript: Accessing and modifying DOM elements

This entry is part 24 of 27 in the series Javascript Tutorial

Below are some common methods that we use to access and modify HTML DOM elements.

Accessing HTML Elements

MethodDescription
document.getElementById()Finding an element by element id
document.getElementsByTagName()Finding elements by tag name
document.getElementsByClassName()Finding elements by class name
document.getElementsByName()Finding elements by name

Changing HTML Elements

MethodDescription
document.getElementById(id).innerHTML=Changing the inner HTML of an element
document.getElementById(id).attribute=Changing the attribute of an element
document.getElementById(id).style.attribute=Changing the style of an HTML element

Javascript: HTML DOM

This entry is part 23 of 27 in the series Javascript Tutorial

The Document Object Model (DOM) is a programming API for HTML.  It defines the logical structure of documents and the way a document is accessed and manipulated.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content.  And in this case, we are talking about modifying the content of the HTML elements.

In the earlier examples, there were 2 examples where we have used Javascript to find and access HTML elements.

  1. getElementById
  2. getElementsByName

We have used the above 2 methods to access a particular HTML element and make changes or updating the content in the element.

HTML Form: Creating a basic form

This entry is part 1 of 10 in the series HTML Form

A form can be placed anywhere in the body of an HTML document. A form is enclosed in a 2-sided <form> tag.

<form method='post'>

</form>

The method attribute specifies what will happen when the form is submitted.  We can use either post or get attribute.

Within the <form> tag, we can specify an action attribute.  This is typically an email or a script that will run when the user submits the form.

For an email delivery, it looks typically as below.

<form action='mailto: johndoe@yahoo.com'>

This will trigger the default email to be launched in your PC.

To collect data from the form using a CGI script such as a php script, we use the following.

<form action='https://codecrawl.com/code/form.php'>

You can refer to an earlier form that I have created using HTML and Javascript.

Try The Code

HTML: Applying superscript formatting

This entry is part 5 of 34 in the series HTML

Superscript formatting makes text smaller and raises it off the baseline.

We have typically used superscript to format exponents in math equations such as x2 +1.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Superscript Formatting</title>
</head>
<body>

<H3>Pub Happy Hours: 5pm to 9pm<sup>1</sup></H3>
<br>
<p><sup>1</sup>Closed on Monday.</p>

</body>
</html>

As you can see in the example, superscript is formatted by using <sup> tag.