• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / JavaScript / The Document Object Model

The Document Object Model

Learn how to use the DOM (Document Object Model), along with JavaScript, to manipulate Web page elements dynamically.

JavaScript Tabs – Create Tabbed Web Pages Easily

17 March 2009 / 307 Comments

This tutorial shows how to create a Web page containing JavaScript-driven tabs. Each tab displays a separate chunk of content when clicked — perfect if your page needs to hold a large amount of content. It’s also great for things such as multi-step (“wizard”-style) Web forms.

Click the link below to see a tabbed page in action:

JavaScript tabs screenshot
See JavaScript tabs in action

The JavaScript and markup are coded in such a way that the page degrades gracefully in browsers that don’t support JavaScript.

In this tutorial you learn how this tabbed page is put together. You can then use the code and ideas to build your own tabbed Web pages. Let’s get started!

[Read more…] about JavaScript Tabs – Create Tabbed Web Pages Easily

A JavaScript Accordion to Show and Hide HTML

19 January 2009 / 29 Comments

In this tutorial you learn how to create a JavaScript accordion script using the Document Object Model. What’s an accordion? Click the link below to find out!

JavaScript accordion screenshot
See the JavaScript accordion in action

As you can see, a JavaScript accordion is a useful way to squeeze lots of page content into a small space. It consists of a list of items, of which only one is expanded at any one time. When you click on another item’s heading, the first item collapses and the second item expands.

Let’s see how the accordion is put together.

[Read more…] about A JavaScript Accordion to Show and Hide HTML

Changing Page Elements with the DOM

28 November 2008 / 2 Comments

So far, you’ve looked at how to get hold of page elements using JavaScript and the DOM, and how to look inside those elements to retrieve their contents.

In this tutorial, you’ll take your skills a step further, and learn how to change elements. You’ll see how to:

  • Change the content inside an element
  • Add and remove elements in the page
  • Move an element to a different position in the page, and
  • Manipulate element attributes.

Once you know how to manipulate DOM elements you can start creating flexible, JavaScript-generated Web content.

[Read more…] about Changing Page Elements with the DOM

Looking Inside DOM Page Elements

7 November 2008 / Leave a Comment

In my last DOM tutorial, you learned how to access the elements inside your Web page as JavaScript objects. Once you’ve done that, how do you find out more about each element? This tutorial shows you how to delve deep into any DOM element object.

[Read more…] about Looking Inside DOM Page Elements

Retrieving Page Elements via the DOM

31 October 2008 / Leave a Comment

In the last DOM article, you learned that the DOM represents the contents of a Web page as a “tree” of JavaScript objects. By accessing the parts of the tree, called the nodes, you can read existing page content, alter content, and even add new content from scratch.

In this article you’ll learn how to locate and retrieve the elements of a Web page using JavaScript and the DOM.

[Read more…] about Retrieving Page Elements via the DOM

Introducing the JavaScript DOM

3 October 2008 / Leave a Comment

The Document Object Model lets you access and manipulate the contents of Web pages using JavaScript. By using the DOM, you can do wonderful things like:

  • Create tabbed Web pages
  • Create expandable/collapsible (“accordion”-style) Web page elements
  • Generate Web page content dynamically (on the fly)

In this introductory article, you learn about the concept of the DOM, and how it’s used to access Web page elements from within JavaScript.

[Read more…] about Introducing the JavaScript DOM

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits