What is a DOM in Jquery? I am so confused


#1



Replace this line with your code.


#2

@jay8978,
If you mention the course/lesson-nr i could give the DOM representation....

In mean time......
It all start's with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of


<!DOCTYPE html>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
       <!-- here you insert your HTML-code -->
     </body>
  </html>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
and
methods ( giving you the functionality to manipulate the Elements )
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


#3

hi @leonhard.wettengmx.n thanks for your reply This is the link of the lesson that I couldnt understand DOM
https://www.codecademy.com/en/courses/web-beginner-en-v6phg/0/4?curriculum_id=50a3fad8c7a770b5fd0007a1


#4

@jay8978

<!DOCTYPE html>
<html>
	<head>
		<title>Result</title>
        <script type='text/javascript' src='script.js'></script>
	</head>
	<body>
        <div class="container">
            <h2>Greetings</h2>
            <div id="one">Div #1</div>
            <div id="two">Div #2</div>
        </div>   
	</body>
</html>

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

                html
                 |
           +-----+------------+
           |                  |
         head                body
           |                  |
       +---+---+             div (.container)
       |       |              |
     title   script           |
                          +---+----+---------+
                          |        |         |
                         h3       div       div
                                    #one      #two

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
but is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'head'-Element is parent to the 'title'-Element...
the 'title'-Element is a child of the 'head'-Element
the 'title'-Element is also a descendant of the 'html'-Element.

The DOM has several interface's
over which you can access the data**/**information
held by the DOM.

One of the interface's is the Element-interface
you can divide the interface into
properties ( consisting of a property-key and it's associated VALUE )
and
methods ( giving you the functionality to manipulate the Elements )

In 3 Before and After
http://api.jquery.com/after/
With the jQuery after() Method
you have a facility with which you either

  • Create Content "< p>New paragraph< /p>"and then inserted after an HTML-element $("#one") within in the DOM
    $("#one").after("< p>New paragraph< /p>");

( the interpretation of the DOM )

                html
                 |
           +-----+------------+
           |                  |
         head                body
           |                  |
       +---+---+             div (.container)
       |       |              |
     title   script           |
                          +---+----+---------+
                          |        |         |
                         h3       div       div
                                   |#one      #two
                                   |
                                   p

In 4 Moving Elements Around
They ask you to move the paragraph-Tag from the div-Tag which is carrying the id-attribute "one"
to the div-Tag which is carrying the id-attribute "two"
using

$(document).ready(function(){
   $('div #one').after('<p>Any text you like</p>');
   $('div #two').after($("p"));
});

( the interpretation of the DOM )

                html
                 |
           +-----+------------+
           |                  |
         head                body
           |                  |
       +---+---+             div (.container)
       |       |              |
     title   script           |
                          +---+----+---------+
                          |        |         |
                         h3       div       div
                                    #one     | #two
                                             |
                                             p