Understanding the Document Object Model - 13

Download this episode

Download Video

Description

In this video, we discuss the Document Object Model, explaining how the web browser parses and creates the DOM from HTML5 code, the purpose of the window and document objects, the built-in API functions for accessing parts of the DOM, and more.

Tag:

JavaScript

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      AdiTao

      Thanks for this video, it explains a lot. 

    • User profile image
      HonraoPrasad

      Bob, another option to window.onload event would be to declare the JS file at the bottom of the HTML page. In that case first DOM will get loaded and then JS. I'm not sure whether its a right approach, but I have seen many HTML pages with JS declared in the bottom half. Can you please clarify on this?

    • User profile image
      Suhail Ahmed

      HonraoPrasad, its good idea to put any other script or style below html, because to increase performance of the page loading, such that when page gets loaded it can then be configured to.

    • User profile image
      BobTabor

      Re-opening this closed thread ...

    • User profile image
      Yumikokk

      Thank you Bob,

      I have a question.

        document.getElementById('clickMe').onclick = runTheExample;

      //why is runTheExample, not runTheExample()?

      When should I put a (), and when I shouldn't put () ?

       

      Thank you!

      Best,

      Yumiko

    • User profile image
      BobTabor

      @Yumikokk: Great question.  The open-close parenthesis ( ) operator tells the JavaScript execution engine to EXECUTE THE FUNCTION NOW.  PULL THE TRIGGER!  However, without the parenthesis, we're merely pointing to a function.  So, in that code, we're saying WHEN someone performs a click on the element called clickMe, THEN pull the trigger.  

      If we put parenthesis on that line:

      document.getElementById('clickMe').onclick = runTheExample();

      ... then we will fire the function right away.  That's not what we want.  We want to fire it off when the clickMe is clicked.

      Does that help? 

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.