Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Dom

    Hochgeladen von

    Anna Kallivayalil
    26 Ansichten2 Seiten
    The Document Object Model (DOM) represents an HTML document as a tree structure, allowing JavaScript to access and modify the content, structure, and style of the document. The DOM tree has all elements as nodes that can be traversed and manipulated. Elements can be selected by their tag name, ID, class, or with querySelector and querySelectorAll. This allows JavaScript to dynamically change content and add interactivity to web pages.

    Originalbeschreibung:

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    TXT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    The Document Object Model (DOM) represents an HTML document as a tree structure, allowing JavaScript to access and modify the content, structure, and style of the document. The DOM tree has all elements as nodes that can be traversed and manipulated. Elements can be selected by their tag name, ID, class, or with querySelector and querySelectorAll. This allows JavaScript to dynamically change content and add interactivity to web pages.

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    26 Ansichten2 Seiten

    Dom

    Hochgeladen von

    Anna Kallivayalil
    The Document Object Model (DOM) represents an HTML document as a tree structure, allowing JavaScript to access and modify the content, structure, and style of the document. The DOM tree has all elements as nodes that can be traversed and manipulated. Elements can be selected by their tag name, ID, class, or with querySelector and querySelectorAll. This allows JavaScript to dynamically change content and add interactivity to web pages.

    Copyright:

    © All Rights Reserved
    Als TXT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 2

    What is the Document Object Model?

    Prequistes: HTML,CSS,JS
    The Document Object Model is a W3C(World Wide Web Consortium) standrad. All the
    elements of a webpage is represented by the DOM tree in object hierachy. Each
    element(such as tables, headers,forms,etc) is represented as a node on a tree
    structure.For example:
    <pre><code>
    <body>
    <p>
    <h1>The Header</h1>
    </p>
    <ul>
    <li id="single">One</li>
    <li><h3>Two</h3></li>
    <ul>
    <h1>BOTTOM</h1>
    <body>
    </code></pre>
    Would be represented as:

    All the nodes together represent the DOM tree.

    What does DOM do?


    The Document Object Model helps the webpage become more interactive. It is a
    platform and language neutral interface that allows programs and scripts to
    dynamically access and update structure,style and content of elements on a webpage
    or document.This is done by representing the structure of a document—such as the
    HTML representing a web page—in memory.
    The DOM defines the HTML elements as objects along with their properties,methods of
    access and events associated with the HTML elements.Using DOM through JavaScript we
    can:
    1.Change,Add and Remove HTML elements as well as their attributes.
    2.Change CSS styles in the entire page
    3.React to all existing HTML events as well as adding new events.

    Accessing Elements
    1.DOM ADDRESS
    For example you want to access the H1 tag that says The Header.This element can
    be accessed through its DOM address :
    <pre><code><br><b>document.h1[0].</b><br></code></pre>
    All h1 tags can be accessed by document.h1 , where document.h1 reprsents an array
    of the h1 elements in the order they are written in the document. So if you want to
    access the 2nd H1 tag 'Bottom' you can do so by document.h1[1]
    This isnt the most efficient way to access elements since index numbers will change
    as the document changes. For example if you put another h1 tag above 'The Header',
    you can no longer call 'The Header' by document.h1[0]<br>
    2.BY ID
    An alternate way to access an element is through their ID.An ID is user-
    programmed and unique for each element.The difference between classes and IDs are
    that classes can be applied to various heterogenous objects where as IDs are for a
    single object.
    For example the point One in the unordered list has the id single. This can be
    accessed in JavaScript by :
    <pre><code>document.getElementById('Single')</code></pre>

    3.BY CLASS
    Classes are a good way to represent a group of jobs that you would like access
    together. For example if you have a section on your page where you would like all
    the content to be written in pink when hovering on top it. You can add a 'Pink'
    class to all the elements in this section and refer to this class in JavaScript by
    using the code:
    document.getElementsByClassName('Pink')
    This will return an array of the html elements.

    4.BY querySelector()
    By using this in-built js function you can select document elements by tag,ID or
    class.The function will return the first element in the document that is accepted
    by the query.To access an ID you must add a '#' symbol in front of the ID name and
    in the case of classes you must add a '.' before the class name. For example to
    access the 'One' point in the unordered list. This can be done by either:
    <pre><code>document.querySelector("#single");</code></pre>
    Or
    <pre><code>document.querySelector("li");</code></pre>

    5.BY querySelectorAll()
    This function is similar to querySelector() but instead or returning just the first
    element , it will return an array of all elemts matching the query.For example:
    <pre><code>document.querySelectorAll("h1");</code></pre>
    This will return both the 'The Header' and 'BOTTOM'from the previous example.

    If you want to know how to trigger Events by using DOM accesing methods -->CLICK
    HERE <--

    Refrences:
    https://www.w3.org/TR/WD-DOM/introduction.html
    https://www.w3schools.com/js/js_htmldom.asp
    https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
    Programming The World Wide Web (4th Edition)

    Das könnte Ihnen auch gefallen