The Document Object Model

The Document Object Model is a means to describe a web page in Object terms. The Document Object consists of elements that have attributes, events and methods. An element is an Object in itself and I may have played fast and loose with the use of the words events and methods (both are the resulting actions of the Object)

The DOM is explained in detail in many places on the Internet including the W3C website. I am not attempting to give a full account here only how I am using the Model and I am trying to manipulate its elements, events and attributes/properties, using object methods.

JavaScript is used to manipulate the DOM to provide particular feastures in web design.

As I get further into this the pages that I wrote initially seem to mean lesa and less. Now that I have started to analyse things on a higher level and having re-discovered Mozilla and ECMAScript, things are making a lot more sense. The disection of how some of the code that I am using shows that I needed to know more about JavaScript Functions and Ojects in general.

Having somewhat jumped in at the deep end, there was no way that I could really understand methods such as preventDefault()

Earlier Analysis

My personal analysis starts with looking at Events and how these can be added to Elements and how JavaScripting is used to achieve the desired effect. One of the examples I used is the "accordian" taken from W3C pages which is an expanding and hidden section on a web page. Other examples of manipulation of the DOM can be found on my page on Contextual page design

To analyse the development of DOM code I find that viewing the output from manipulations on the iPad useful, the HTML is viewed using the code found on the appletools.com website.

jQuery vs. Plain JavaScript

The plainjs website gives me a good insight into the operation of the DOM. It also makes the case that you can do pretty much what you want without having to use an additional library of functions such as jQuery.

The jQuery website says:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Links

External Sources

The Document Object Model - September 2020