What is DOM | Document Object Model | Beginner Tutorial
Aug 15, 2023
What is DOM | Document Object Model | Beginner Tutorial
website - https://automationstepbystep.com/ https://docs.microsoft.com/en-us/dotn …https://www.w3schools.com/xml/xml_dom …https://software.hixie.ch/utilities/j …https://www.youtube.com/automationste …https://automationstepbystep.com/udem …https://automationstepbystep.com/onli …https://github.com/Raghav-Pal/ https://www.udemy.com/user/raghav-pal-3/ [email protected] https://automationstepbystep.com/trai …https://bit.ly/2MGRS8K https://bit.ly/2N9xvR6 https://bit.ly/2oyMp5x https://bit.ly/2owxc50 https://bit.ly/2MKNtlq https://bit.ly/2wARFdi https://bit.ly/2Px6Ue9 http://bit.ly/2N8DZxb http://bit.ly/2KtqVkU http://bit.ly/2DRNJYE https://bit.ly/2MGafL7 https://bit.ly/2MGahmd https://bit.ly/2wz8LrW https://bit.ly/2PYdwmV https://bit.ly/2BwuCTN https://bit.ly/2ZHFSGX https://bit.ly/2PxpeUv https://bit.ly/2MIn8EC https://bit.ly/2LRt6xC https://bit.ly/2MInnzx http://bit.ly/2MJIlMK http://bit.ly/2SItIL9 https://bit.ly/2Q1pagY http://bit.ly/2kQPGyQ https://bit.ly/2oBbtIU https://bit.ly/2oziNVB https://bit.ly/2Q22Y6a https://bit.ly/2NOfWD2 https://bit.ly/2wEXbLS https://bit.ly/2PVUcXs https://bit.ly/2CdcDnJ https://bit.ly/2FvWV5C http://bit.ly/2KJDZ8o http://bit.ly/2Z4iRye https://bit.ly/2V15yvt https://bit.ly/2NJdDRS http://bit.ly/30l3h1B https://bit.ly/2N9jyCG https://bit.ly/2Q2q5xQ https://bit.ly/2oBfwoR https://bit.ly/2NgwGpw https://bit.ly/2wB23BO https://bit.ly/2CoJGWf https://bit.ly/2NIPPxk https://bit.ly/2LSiezA https://automationstepbystep.com/ http://lifecharger.org/ https://www.udemy.com/user/raghav-pal-3/ https://www.facebook.com/automationst …https://twitter.com/LearnWithRaghav
Content
1.01 -> Hello and welcome to this session I'm Raghav
And in this session, we are going to learn
7.22 -> Document Object model, This is going to be
very easy and very interesting And do not
11.77 -> worry if you have heard this term for the
first time, I will go very basic, step by
17.29 -> step and start from scratch And we are going
to learn what is Document Object model, why
23.41 -> do we need it?
24.48 -> How do we use it?
25.82 -> And we are also going to see a very simple
demo So Let's get started here I will start
31.64 -> by creating a very simple XML here I have
a Books element which is the root element
37.399 -> of this XML.
39.019 -> And under the Books element, we have book
element under book, we have author, price
44.899 -> and update Then we have Pup info element And
under this, we have publisher and state So
52.749 -> here Books is the root element And then we
have book and Pub info as its child element
58.989 -> Under book, we have these elements, and then
under Pub info, we have publisher and state
64.089 -> Now if I have to represent this XML as a tree
structure, I will start with the root element
71.93 -> that is Books Under Books, we have book and
Pub info Under Book element, we have author,
79.61 -> price and pub date And these are the values
for these elements Then under Pub info, we
86.34 -> have publisher and state And these are the
values for these elements Now, this is a very
92.63 -> simple tree structure or a tree view of this
XML And we have converted our XML as a tree
99.09 -> view And this is exactly what Dom does, Dom
represents the content of an XML or HTML document
107.64 -> as a tree structure, and Dom is a programming
interface or an API And this API can be used
114.94 -> with any programming language Most commonly,
it is used with JavaScript And using Dom,
122.16 -> we can easily read, access and update the
content of the document Let me show you some
127.98 -> example I will go to Google and search for
Dom Viewer online And here I will go to this
136.359 -> life Dom Viewer And if I give my XML here,
you can see it has converted it into a tree
143.67 -> structure So this is what Dom does And Dom
does this conversion into a tree structure
149.959 -> internally in the memory And then using the
program of the language that we are using
155.079 -> we can then you say to access and update the
contents So to explain in very, very simple
161.769 -> words, Tom stands for Document Object Model,
where document is the file like a HTML file
169.12 -> or an XML file Object either Tags and the
elements of that file and model is the layout
175.41 -> or structure So Document Object Model or Dom
represents the content of XML or HTML documents
182.18 -> as tree structure It can be used to easily
read, access and update the contents and is
188.189 -> a programming interface or an API And it represents
the document as a tree structure internally
195.349 -> in the memory and can be used with programming
languages like JavaScript, Here If you see,
200.44 -> this is a simple XML where we have bookstore
as the root element, and then we have element
207.029 -> for book, we have title author year price
Now Dom can convert this into a tree structure
214.499 -> And then by using the Dom functions like get
elements by tag name, we can access the element
221.069 -> So here you can see we have used a script
get elements by tag name, title and its child
226.859 -> node And using this we can retrieve the text
value of the first title.
232.29 -> Let me show you this in action I will go to
Google and search for XML parser and here
239.769 -> I will go to w3schools And this is the example
I have taken from here So you can see this
246.249 -> is the same example, bookstore book and this
is the title author, etc I will click on Trait
251.719 -> yourself so it will open an editor And here
you can see this is our script get element
259.85 -> by tag name, title zero, child node zero And
in the result we are getting everyday Italian
267.69 -> which is coming from here So it has accessed
this element using Dom And if I just change
273.8 -> this title to let us say author and I say
run, you can now see it is accessing the author
279.99 -> here and this is here And then we can also
modify it if we want to So here we now know
287.69 -> Dom is a programming interface for HTML and
XML It can be used to represent the page as
293.48 -> a tree structure and then the programs can
read, access and modify it And you can think
299.61 -> of Dom as an object oriented representation
of the web page If we talk about the browsers
305.68 -> and web page and then it can be modified with
the help of scripting languages such as JavaScript.
311.98 -> And every web browser uses some document object
model to make webpage accessible via JavaScript
317.89 -> Let us see this I will go to the browser and
let me say I will go to Google and here there
325 -> are all these elements on this web page If
I go to any of the elements, let us say I
329.94 -> go to Google search and right-click and inspect
here This shows us the Dom tree view of this
337.63 -> web page and whatever element we inspect is
highlighted here And I can also manually navigate
345.03 -> on this Dom tree view and it gets highlighted
here And then we can also change the values
351.44 -> So for example, I will go to a demo website
Let's say Orange HRM here and I will go to
358.52 -> this login button, do a right-click and say
inspect And here is the Dom tree view of this
364.71 -> element and this web page and it is highlighted
here Now let us say I change this value login
370.67 -> to let us say start and hit enter And now
you can see the value here Is changed to start
379.49 -> So this is how we can access the elements
and their locators And when we talk about
385.85 -> automation, or when we do automation of web
browsers using tools like Selenium And this
391.7 -> is exactly what we use when we have to access
the elements using XPath or any other locators,
397.72 -> and then change the elements or do any modification
Dom is being used at the back end So this
403.58 -> is what Dom is in very, very simple words
And I hope now you know everything about Dom,
409.05 -> and you can share your knowledge with everyone
I will meet you in the next session, Thank
413.8 -> you for watching.
Source: https://www.youtube.com/watch?v=ipkjfvl40s0
