JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)
Chapter 12. HTML and CSS Editing Using JavaScript and DOM
Now, you are familiar with HTML DOM. You have now the power to change almost anything in your page using scripts. Aside from that, you can create simple functions that can allow you to perform checks on your forms. You can now create email text boxes that automatically checks if the email address format is correct, among other things.
The getElementById method and innerHTML Property
Just like with CSS, JavaScript and HTML DOM also have selectors. However, it is more proper to call them methods of the document object since there are other methods that are referred to selectors (CSS selectors to be precise — i.e., querySelector() and querySelectorAll()).
Primarily, the method that you will be using most of the time is the getElementById() method of the document object. This method allows you to “select” the specific element that you want to access or manipulate in your web document. For example:
<html>
<head>
<title>Another Sample Page</title>
</head>
<body>
<p id="sampleParagraph1" >This is an example paragraph</p>
<p id="sampleParagraph2" >This is another example paragraph</p>
</body>
</html>
If you want to access the text of the paragraph element with the id sampleParagraph1, you will need to code:
> document.getElementById("sampleParagraph1").innerHTML
< "This is an example paragraph"
> _
By the way, to access strings that are placed between an opening tag and closing tag, you can use that object’s innerHTML property. You can also change its value by assigning another string to it. For example:
> document.getElementById("sampleParagraph1").innerHTML = "Yay. I changed it!"
< " Yay. I changed it!"
> _
Of course, elements that have empty tags, such as input and br, will always return an empty or "" innerHTML property.
What will happen if there are multiple elements that have the same id? Of course, standard practice dictates you should not create elements with same IDs; however, if you have intended or accidentally created elements like that, the first element that was parsed or read in the document will be selected. For example:
<html>
<head>
<title>Another Sample Page</title>
</head>
<body>
<p id="sampleParagraph1" >This is an example paragraph</p>
<p id="sampleParagraph1" >This is another example paragraph</p>
<p id="sampleParagraph1" >This is another example paragasdasdraph</p>
</body>
</html>
If you try to access the element with the ID "sampleParagraph1", this will happen:
> document.getElementById("sampleParagraph1").innerHTML
< "This is an example paragraph"
> _
innerHTML versus innerText versus textContent
Some of you might have been already researching about JavaScript, and you might have already encountered the innerText property. And you might question why use innerHTML to retrieve strings instead of innerText when it basically does the same thing?
Unfortunately, they do not do the same thing. First of all, innerHTML retrieves the string between the opening and closing tags. It does not perform any alteration and space trimming (removal of trailing or consecutive spaces).
On the other hand, innerText perform trimming and remove any line break, carriage return, tabs, or new line characters in the string. For example:
<html>
<head>
<title>Another Sample Page</title>
</head>
<body>
<p id="sampleParagraph1" >
This is an example paragraph
</p>
</body>
</html>
When you access the text using innerHTML:
> document.getElementById("sampleParagraph1").innerHTML
< "
This is an example paragraph
"
> _
When you access the text using innerText:
> document.getElementById("sampleParagraph1").innerText
< "This is an example paragraph"
> _
As you can see, the linebreaks and trailing spaces are removed in the innerText property while it was retained on the innerHTML property.
Another major difference between them is that innerText removes all the tags contained inside the elements — innerHTML returns everything. For example:
<html>
<head>
<title>Another Sample Page</title>
</head>
<body>
<p id="sampleParagraph1" >
This is an <b>example</b> paragraph
</p>
</body>
</html>
When you access the text using innerHTML:
> document.getElementById("sampleParagraph1").innerHTML
< "
This is an <b>example</b> paragraph
"
> _
When you access the text using innerText:
> document.getElementById("sampleParagraph1").innerText
< "This is an example paragraph"
> _
As you can see, the <b> opening and closing tags and the non-breaking space are shown in innerHTML while both were not provided in innerText.
How about textContent? The property is similar to innerHTML. There are performance related technicalities about their difference, but primarily, developer networks, such as MDN or Mozilla Developers’ Network, recommend the use of textContent instead of innerHTML. They recommend the former than the latter because it performs faster and is more secure. Even though it is more recommended, most web developers and scripters use innerHTML.
So, what’s the point of learning all of these? Firstly, the innerText property is considered not a W3C standard, which means that some browsers do not support this property. One of those browsers is Mozilla Firefox. Other browsers do not have problems with the innerText property, such as Internet Explorer and Google Chrome, despite its status.
On the other hand, you should know when or where you should use these properties. For example, unlike innerHTML and textContent, innerText cannot retrieve HTML or “hidden text” placed on meta elements like script and style. Alternatively, if you want to alter the HTML content of an element with HTML code, you might want to use innerHTML or textContent instead.
JavaScript and CSS
Aside from manipulating HTML content, you can handle your page’s CSS properties using JavaScript. With proper use of JavaScript and HTML DOM, you can change themes on the go, perform animations, and even create cool effects in your page.
Just like with the previous sections, the key here is HTML DOM. The concept of manipulating CSS entries can be done by accessing your elements’ properties/attributes. To be frank, in changing and reading CSS properties, you will spend a lot of time tinkering with your elements’ style attributes. Nevertheless, there are other ways to do that, too.
This is an example on how you can change an elements CSS properties.
<html>
<head>
<title>Sample Web Page</title>
</head>
<body>
<h1 id="header1" >This is a sample header</h1>
</body>
Example script:
> document.getElementById("header1").style.color = "yellow";
< "yellow"
> document.getElementById("header1").style.backgroundColor = "red";
< "red"
> document.getElementById("header1").style.paddingLeft = "35px";
< "35px"
> _
When manipulating CSS properties, you need to remember a few simple:
· First of all, you can change almost any CSS property of an element through its style property.
· Second, the name of the CSS property is relatively the same when you access it through JavaScript. The main difference is that, all spaces or dashes in a property’s name is removed, and on its stead is an uppercase letter of the next word. For example, changing the left padding on CSS will require you to set a value on padding-left. In JavaScript, the property name is paddingLeft.
· Third, all values that you will place must be in string form. Meaning, you will need to place quotation marks in every value you will assign to a CSS property.