Code has been added to clipboard!

Tips and Tricks on JavaScript DOM Methods With Real Examples

Reading time 2 min
Published Aug 8, 2017
Updated Oct 2, 2019

One of the most important things you should know about if you want to use JavaScript in web development is Document Object Model, or simply DOM. Understanding what is DOM, how it works, and how you can access it allows you to have more control over your code.

In this lesson, you will learn about JavaScript DOM methods, how to target elements in the HTML with JavaScript, and how to manipulate them.

JavaScript DOM Methods: Main Tips

  • A JavaScript DOM method exists as an action that can be executed on HTML elements.
  • HTML elements have properties that are basically changeable values.
  • In DOM HTML elements are classified as objects.
  • innerHTML property is the simplest way to display something inside an element.
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Using Javascript DOM

In the DOM JavaScript example below, we target the <p> element using the getElementById method and grabbing the <p> element's id id="demoz". The <p> element's content is manipulated using the innerHTML property:

Example
document.getElementById("example").innerHTML = "Hi there!";

Note: you can use the innerHTML property to change all of the HTML elements' content. This works for <html> and <body> tags, too.

JavaScript DOM Methods: Summary

  • One of the simplest ways of targeting an HTML element often used in JavaScript is the getElementById method.
  • Displaying content in an element is most easily and commonly performed by using the innerHTML property. You can learn more about using it here.
  • To get a better understanding on what is DOM, check out our JavaScript HTML DOM navigation tutorial.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 08/03/2021
3176 People Used
Only 97 Left
Rating
5.0