DOM (Document Object Model)

What scripting interfaces are available?

The most basic scripting interface developed at W3C is the DOM, the Document Object Model
which allows programs and scripts to dynamically access and update the content, structure and style
of documents. DOM specifications form the core of DHTML.
API => lib => collection of programs (classes)

Modifications of the content using the DOM by the user and by scripts trigger events
that developers can make use of to build rich user interfaces.
> DOM is the tree structure of html elements(tags) that are present within the web page.

> When the web page has opened/loaded in the browser, DOM will be automatically created by the browser.

>the changes made to DOM are called "DOM manipulations". DOM manipulations are performed by using
JavaScript.

>DOM is a platform and language neutral interface that allows the programs/script to dynamically access &
update the content structure and style of the document.

> The entire browser is called a "window", the webpage running on the browser is called a "document". it has
only one main element called "html", "html" has two children "head" and "body". There are many children
for both "head" and "body".
Lib=> classes
Html=> tags
Dom has the following detailed structure

No.of html tags = no.of DOMs + extra tag

Head tag 🡺 HTMLHeadElement class🡺 object
Body tag 🡺 HTMLBodyElement class
P tag 🡺 HTMLParagraphElement class🡺 object
Input tag 🡺 HTMLInputElement class
The above structure represents as follows:
1. The entire document is a document node
2. Entry HTML element/tag is an element node
3. The text inside HTML elements are text node
4. Every HTML attribute is an attribute node

Objects in DOM:
⮚ document (this object providing interaction with webpage/web doc)

⮚ element (this object providing interaction with tags/elements)

every object contains properties and methods.

object.property
object.method()

document object
>this object provides interaction with the current webpage/web document.
> this "document" has some properties and methods
1. title
this property represents the title of the current working/viewing web page in the browser
window.
Syn: document.title
document.title=”New title”;

2. head
this property represents the "head"section of the current working/viewing web page in the
browser window.
Syn: refvar= document.head
3. body
this property represents the "body" section of the current working/viewing web page in the
browser window.
Syn: document.body

4. images
this property represents all "images" of the current web page, as an array format.
Syn: document.images
10imgs 🡺HTMLImageElement class 🡺 10 objs =>init => assign to collection obj

5. links
this property represents all hyperlinks (<a> tags) of the current web page, as an array format.
Syn: document.links

6. url
this property represents the url of the current web page.
Syn: document.URL

7. write()
this method displays messages on the web page.
Syn: document.write(...)

8. writeln()
this method displays messages on the web page.
Syn: document.writeln(...)

9. getElementById()
this methodreturns a reference(object) of element/tags of a specified id.
by using that reference we can access properties of that element and we call methods.
Syn: document.getElementById("id")

10. getElementsByName()
this methodreturns array of elements/tags which have same name (attribute).
this spe used in the checkbox and radio button case.
Syn: document.getElementsByName("name")

11. getElementsByTagName()
this methodreturns array of elements/tags which have same tag name.
Syn: document.getElementsByTagName("tag")

12. getElementsByClassName()
this method returns an array of elements/tags which have the same class name.
Syn: document.getElementsByClassName("class")
 13. querySelectorAll()
this method returns an array of elements/tags which are matching with the specified selector.
we can use any CSS selectors:
> tag selector : tag
> ID selector : #id
> class selector : .classname
> grouping selector : tag1, tag2, ...
> child selector : parent-tag child-tag
Syn: document.querySelectorAll("selector type")

14. querySelector()
this method returns the first element/tag which is matching with the specified selector.
Syn: document.querySelector("selector type")

element object
> this object represents a single tag (it is not an implicit object).
> element object used for interacting with tags/element for manipulations.
> means changing content of tag, for changing look & feel, we can add new tags/elements, we can delete
existing element/tags etc...
> this "element" has some properties and methods.

tagName
this property returns the name of the tag/element.
Syn: element-obj.tagName

id
this property returns the id of the tag.
Syn: element-obj.id

innerHTML
this property returns text/value/content of the tag and we can change text/value/content of
tag.
Syn: element-obj.innerHTML
element-obj.innerHTML="text"
paired & non-input🡺 innerHTML
for un paired tags & input 🡺 value

innerText
this property returns text/value/content of the tag and we can change text/value/content of
tag.
Syn: element-obj.innerText

style
this property represents the css style of the tag.
style is used to change css attributes and retrieve css attributes.
Syn: element-obj.style.css-attribute
element-obj.style.css-attribute=newvalue;

setAttribute()
this method is used to set/to add an attribute(html) to the existing tag.
Syn: element-obj.setAttribute("att-name", "value")
Ele-obj.att-name=”value”

getAttribute()
this method returns the value of the specified attribute(html) of the tag.
Syn: element-obj.getAttribute("att-name")
Ele-obj.attribute

removeAttribute()
this method is used to remove/delete the specified attribute(html) of the tag.
Syn: element-obj.removeAttribute("att-name")

attributes
this property returns all attributes(html) of a specified tag, along with values. it returns a
Collection object.
Syn: element-obj.attributes

focus()
this method places the cursor in the requested element/control.
Syn: element-obj.focus()

remove()
this method used to remove the specified element/control/tag from the current working
webpage.
Syn: element-obj.remove()

createElement()
this method used to create a new element/control/tag (it manufactures elements).
Syn: let new-ele=document.createElement("tag-name");

appendChild()
this method used to add new element/control as a child.
Syn: element-obj.appendChild(new-ele)
window
⮚ “window” object represents the current working browser window.

⮚ browser creates only one window object.

⮚ It has the following methods & properties

href
this property represents the url of the current working/running/viewing web page in the
browser window.
window.href
window.href=newurl

▪ screenX
this property represents X-cord of current browser position on the screen
Syn: window.screenX
window.screenX=Npx

▪ screenY
this property represents Y-cord of current browser position on the screen
Syn: window.screenY

alert()
confirm()
prompt()
parseInt()
parseFloat()

setTimeout()
call back, timer, it exe task, only once after n sec
 setTimeout(fun/fe/af, “interval”)
setInterval()
call back, timer, it exe task, repeatedly for every n sec
setInterval(fun/fe/af, “interval”)

clearTimeout() 🡺 it stops/removes timeout

clearTimeout(t-index)

clearInterval() 🡺 it stops/removes interval

clearInterval(t-index)

print()
this method displays a print dialog box, which is used to print the current
webpage/document through the selected printer.
most browsers before printing the page, they show "Print Preview" also.
Syn: window.print()