Scribd Logo
Upload

Welcome to Scribd!

  • CSE326 Lec13

    Uploaded by

    Anurag Basuri
    4 views13 pages
    This document provides an overview of the Document Object Model (DOM) including the DOM tree, DOM methods for node creation and manipulation, and accessing elements. It discusses how the DOM represents an HTML document as nodes that can be manipulated with JavaScript. Key points covered include using the DOM to select elements, create new nodes, add and remove child nodes, and access elements by id, class, tag name and CSS selectors. Links to external references and examples are also provided.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an overview of the Document Object Model (DOM) including the DOM tree, DOM methods for node creation and manipulation, and accessing elements. It discusses how the DOM represents an HTML document as nodes that can be manipulated with JavaScript. Key points covered include using the DOM to select elements, create new nodes, add and remove child nodes, and access elements by id, class, tag name and CSS selectors. Links to external references and examples are also provided.

    Copyright:

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

    CSE326 Lec13

    Uploaded by

    Anurag Basuri
    This document provides an overview of the Document Object Model (DOM) including the DOM tree, DOM methods for node creation and manipulation, and accessing elements. It discusses how the DOM represents an HTML document as nodes that can be manipulated with JavaScript. Key points covered include using the DOM to select elements, create new nodes, add and remove child nodes, and access elements by id, class, tag name and CSS selectors. Links to external references and examples are also provided.

    Copyright:

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

    1

    Dr. Navneet Kaur, Lovely Profession


    al University

    CSE326
    Internet Programming Laboratory
    Lecture #13
    Dr. Navneet Kaur
    2
    Dr. Navneet Kaur, Lovely
    Professional University

    Outline
     Introduction to DOM
     DOM tree
     DOM methods
     Node Creation and Manipulation
     Accessing Elements
    3
    Dr. Navneet Kaur, Lovely
    Professional University

    Introduction to DOM
     The Document Object Model (DOM) is the data
    representation of the objects that comprise the structure and
    content of a document on the web.
     A web page is a document that can be either displayed in the
    browser window or as the HTML source. The document as a
    whole and all other elements in a document are parts of the
    document object model for that document.
     They can all be accessed and manipulated using the DOM
    and a scripting language like JavaScript.
    4
    Dr. Navneet Kaur, Lovely
    Professional University

    DOM tree
     A DOM tree is a tree structure whose nodes represent an
    HTML document's contents. Each HTML document has a
    DOM tree representation.
    5
    Dr. Navneet Kaur, Lovely
    Professional University

    DOM tree
    <html lang="en">
    <head>
    <title>My Document</title>
    </head>
    <body>
    <h1>Header</h1>
    <p>Paragraph</p>
    </body>
    </html>
    6
    Dr. Navneet Kaur, Lovely
    Professional University

    DOM methods
     DOM Methods are the actions that you can perform on
    objects (elements) of DOM.
     DOM methods include selecting an element, creating a new
    element, changing the content of the element, changing
    CSS, removing element etc.
    7
    Dr. Navneet Kaur, Lovely
    Professional University

    Node Creation and Manipulation


     Node creation and manipulation refer to the process of
    creating new nodes (elements or text) in the Document
    Object Model (DOM) and modifying the existing nodes to
    change the structure or content of a web page.
     document.createElement(tagName): Creates a new HTML
    element with the specified tag name.
     document.createTextNode(text): Creates a new text node with
    the specified text.
     parentNode.appendChild(node): Adds a new child node to the
    end of the list of children of a specified parent node.
    8
    Dr. Navneet Kaur, Lovely
    Professional University

    Node Creation and Manipulation


     parentNode.removeChild(node): Removes a child node from
    the DOM.
    9
    Dr. Navneet Kaur, Lovely
    Professional University

    Accessing elements
     Accessing elements refers to the process of targeting and
    retrieving specific HTML elements within a web document
    using various methods provided by the DOM.
     document.getElementById(id): Returns the element that has
    the ID attribute with the specified value.
     document.getElementsByClassName(className): Returns a
    collection of all elements in the document with the specified class
    name.
     document.getElementsByTagName(tagName): Returns a live
    HTMLCollection of elements with the given tag name.
    10
    Dr. Navneet Kaur, Lovely
    Professional University

    Accessing elements
     document.querySelector(selector): Returns the first element
    that matches a specified CSS selector.
     document.querySelectorAll(selector): Returns a static
    NodeList representing a list of elements that match the specified
    group of selectors.
    11
    Dr. Navneet Kaur, Lovely
    Professional University

    References
     https://www.w3schools.com/js/js_htmldom.asp
     https://www.w3schools.com/js/js_htmldom_methods.asp
     https://www.w3schools.com/js/js_htmldom_document.asp
     https://www.w3schools.com/js/js_htmldom_elements.asp
     https://www.w3schools.com/js/js_htmldom_html.asp
    12
    Dr. Navneet Kaur, Lovely
    Professional University

    Program link
     https://onlinegdb.com/VQtxAJKTr
     https://onlinegdb.com/-HsZpxeS0_
    13
    Dr. Navneet Kaur, Lovely Profession
    al University

    Thank you

    You might also like