Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    Module 5 DOM

    Uploaded by

    shefaligupta0408

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Module 5 DOM

    Uploaded by

    shefaligupta0408
    3 views16 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    3 views16 pages

    Module 5 DOM

    Uploaded by

    shefaligupta0408

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 16

    Document Object

    Model
    Module 5
    Document Object Model
    The components of web pages are represented by objects that are organized in a
    hierarchical structure called Document Object Model (DOM)
    DOM is a programming interface for HTML and XML documents.
    It defines the logical structure of documents and the way a document is accessed
    and manipulated
    The hierarchical structure is represented as a parent-child relationship
    Child objects are basically properties of their parent objects
    These objects have properties and methods that can be used to work with web page
    Document Object
    The document object contains information about the current HTML document
    displayed on the window.
    An HTML document is represented as a DOM tree by the browser.
    The browser traverses the DOM tree and renders the document on the screen
    The document object has many properties like bgcolor, fgcolor, forms, title, URL etc.
    It has methods like getElementById, createElement, createAttribute etc.
    DOM: Example
    <html>
    <head>
    <title>My title</title>
    </head>
    <body>
    <a href=“abc.html”>My link</a>
    <h1>My header</h1>
    </body>
    </html>
    JavaScript has the capability to access and manipulate elements from the window and
    document.
    The top level object window and all the direct child objects (E.g. document,
    navigator, history etc.) can be accessed directly
    Any other object is referenced by its name prefixed by names of all parent objects in
    order separated by dots(.)
    For example:
    document.body.p
    Methods to access HTML elements:
    document.getElementById(ID): returns reference to the element with given ID
    document.getElementsByTagName(name): returns collection of all element of the
    given tag name
    Image Object
    The Image Object in HTML DOM is used to represent the HTML < image > element
    Creating image
    The Image() constructor creates a new HTML image element instance.
    Example:
    const myImage = new Image(100, 200); //Image(width, height)
    myImage.src = "picture.jpg";
    document.body.appendChild(myImage);
    The above code is equivalent to
    <img src= “picture.jpg” width=100 height=200>
    The image element can be accessed by using the getElementById() method
    var x = document.getElementById(“myImg”);

    The major properties of an image object are


    • Width
    • Height
    • Src
    Event Handling
    The basic purpose of JavaScript is to provide interactivity to the web page.
    This interactivity is provided by responding to user actions.
    The events represent that some activity is performed by the user or by the browser.
    The events caused by users are called interactive events and others are called non-interactive
    events.
    A JavaScript code can be included in HTML to react to these events by executing a set of
    statements.
    This process of reacting to the events is called Event Handling.
    Some examples of HTML events:
    • An HTML web page has finished loading
    • An HTML input field was changed
    • An HTML button was clicked
    To assign events to HTML elements you can use event attributes.
    Some event attributes are
    Type Event Performed Event Handler Description

    click onclick When mouse click on an element


    Mouse
    mouseover onmouseover When the cursor of the mouse comes over the element

    Keyboard Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

    focus onfocus When the user focuses on an element

    submit onsubmit When the user submits the form


    Form
    blur onblur When the focus is away from a form element
    When the user modifies or changes the value of a form
    change onchange
    element

    load onload When the browser finishes the loading of the page

    When the visitor leaves the current webpage, the browser


    Window unload onunload
    unloads it

    resize onresize When the visitor resizes the window of the browser
    Example (focus event):
    Form Data Validation
    When you enter data, the browser and/or the web server will check to see that the
    data is in the correct format and within the constraints set by the application.
    If the information is correctly formatted, the application allows the data to be
    submitted to the server and (usually) saved in a database;
    If the information isn't correctly formatted, it gives the user an error message
    explaining what needs to be corrected and lets them try again.
    This is called form validation
    JavaScript provides the facility to validate the form in the browser on the client side.
    Submit event
    The onSubmit event is typically associated with HTML forms.
    It is triggered when a user submits a form by clicking the submit button or pressing
    the Enter key while focusing on a form field.
    The onSubmit event is crucial for form validation, data submission, and other form-
    related functionalities.
    Example:

    Here, we are validating the form on the form submit event.


    The user will not be forwarded to the next page until the given values are correct.
    Browser Object/ Window Object
    The browser’s window is represented by the Window Object in all types of browsers.
    The window object is the top-level object in the DOM.
    It represents the entire browser window that displays the document.
    All objects are direct or indirect children of the window object.
    It has many useful properties like document, event, history, name, screen etc.
    It provides many useful methods that may perform specific tasks; like open, close,
    blur, close, focus, print, resize etc.
    Example:
    window.open("https://google.com");
    Some major methods of window object are:

    •window.open() - open a new window


    •window.close() - close the current window
    •window.moveTo() - move the current window
    •window.resizeTo() - resize the current window

    You might also like