Scribd
Upload
27 views50 pages

Client Side Technologies: Document Object Model (DOM)

The document discusses several key client-side technologies: - The Document Object Model (DOM) defines a standard for accessing and manipulating HTML documents and is platform and language independent. The DOM represents an HTML document as nodes and objects. - The document object represents the entire HTML document and provides access to all page elements. It has properties, collections, methods, and event handlers. - Other important objects include forms, images, and text inputs which have their own properties, methods, and event handlers for manipulating elements on a page.

Uploaded by

deyaataha9999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views50 pages

Client Side Technologies: Document Object Model (DOM)

The document discusses several key client-side technologies: - The Document Object Model (DOM) defines a standard for accessing and manipulating HTML documents and is platform and language independent. The DOM represents an HTML document as nodes and objects. - The document object represents the entire HTML document and provides access to all page elements. It has properties, collections, methods, and event handlers. - Other important objects include forms, images, and text inputs which have their own properties, methods, and event handlers for manipulating elements on a page.

Uploaded by

deyaataha9999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

Client Side Technologies

Document Object Model


(DOM)
What is DOM?

 Stands for Document Object Model.

 W3C standard.

 Defines a standard way to access and manipulate


HTML documents.

 Platform independent.

 Language independent
DOM Model
window

frame event history document location navigator screen

document anchor form image link style tag

button checkbox input radio reset select submit textarea


DOM Model(Cont.)
Document

 The document object represents the entire HTML


document and can be used to access all elements in a
page.

 A page is what appears within the browser window.

 So, every window is associated with a document object.

 Document Object has its own set of Properties,


Collections, Methods & Event handlers.
Document(Cont.)

 Properties:
Property Description

bgColor A string that specifies the background color.


fgColor A string that specifies the text color.
linkColor The color of text for a link that the user has not yet visited
(read/write).
vlinkColor The color of text for a link that the user has already visited
(read/write).
alinkColor The color of text for a link that the user clicks (read/write).
title A string that specifies the contents of the TITLE tag.
Document(Cont.)

 Methods:
Method Description
write() Writes one or more HTML expressions to a
document in the specified window.
writeln() Writes one or more HTML expressions to a
document in the specified window and follows them
with a new line character.
Document(Cont.)

 Methods:
o for accessing document elements.
Method Description
getElementById("ID") For accessing any element on the
page via its ID attribute
getElementsByName(“NAME”) Returns a collection of objects with
the specified name

getElementsByTagName(“TAGNAME”) Returns a collection of objects with


the specified tag name

document.getElementsByClassName(“Clas Returns a collection of objects with


sName”) the specified class name
Document(Cont.)

 Methods:
o for accessing document elements.
Method Description
document.querySelector(css rule) Returns the first element that matches a
specified CSS selector(s) in the document.
document.querySelectorAll(css rule) Returns a NodeList containing all elements
that matches a specified CSS selector(s) in
the document.
Document(Cont.)
Document(Cont.)

 Collections :

Collection Description

forms An array containing an entry for each form in the document


images An array containing an entry for each image in the document
anchors An array containing an entry for each anchor in the document.
links An array containing an entry for each link in the document.
Document(Cont.)

 Event Handler:

onClick

onDblClick

onKeyDown

onKeyPress
onKeyUp

onMouseDown

onMouseUp
Image

 The Image object is an image on an HTML form,


created by using the HTML 'IMG' tag.

 Any images created in a document are then stored in an


array in the document.images property.

 Image Object has its own set of Properties, Collections,


Methods & Event handlers.
Image(Cont.)

 Object Model Reference:


[window.]document.imageName
[window.]document.imageID
[window.]document.images[i]
document.img1. [window.]document.images[“ImgID”]
src=“img1.jpg” [window.]document.getElementById(“ImageID”)
document.image
s[0].src=“img1.j <html>
pg” <body>
…..
document.img2.s <img name=“img1” src=“img1.jpg”>
rc=“img2.jpg” <img name=“img2” src=“img2.jpg”>
document.image …
s[1].src=“img2.jp </body>
g”
</html>
Image(Cont.)

 Properties:

name id src height width

 Event handlers
onmouseout onmouseover onmousemove onclick ondblclick
Form

 By using the form you have at your disposal information


about the elements in a form and their values.
 A separate instance of the form object is created for each
form in a document.
 Objects within a form can be referred to by a numeric
index or be referred to by name.
 Object Model Reference:
[window.]document.formname
[window.]document.forms[i]
[window.]document.forms[“formNAME”]
[window.]document.forms[“formID”]
Form(Cont.)

 HTML:
<FORM>
Properties [NAME="formName"]
[TARGET="frameName or windowName"]
[onSubmit="handlerText Or Function"] Events
[onReset="handlerText Or Function"]>
</FORM>
Form(Cont.)

 Properties:

Property Description

elements[] An array containing all of the elements of the form. Use it to


loop through form easily.
length The number of elements in the form.

name The name of the form.


id The id of the form.
target The name of the target window form is to be submitted to.
Form(Cont.)

 Methods :

Method Description
reset() Resets the form.
Clicking the reset button clears all contents that
the user has made.
submit() Submits a form.
Clicking the submit button submits the content
of the form to the server
Form(Cont.)

 Event handlers:

Event Description

onReset Code is executed when the form is reset


(by clicking on "reset" button)

onSubmit Code is executed when form is submitted


Form(Cont.)

form

button checkbox Text radio reset select submit textarea


Text

 HTML:

<input type="text"
id="id"
value="string"
maxlength="n"
size=“x"
/>
Text (Cont.)

 Properties:

properties Description
value Sets or returns the value of the value attribute
of a text field.

readOnly Sets or returns whether or not a text field


should be read-only.

disabled Sets or returns whether or not a text field


should be disabled
Text (Cont.)

 Methods

Method Description
blur() Removes focus from the field.

focus() Assigns focus to the field; places the cursor in


the control.

select() Selects, or highlights, the content of the control.


Text (Cont.)

 Event Handlers:
Event Handler Description
onfocus The field gains focus when the user tabs into or clicks
inside the control.

onblur The field loses focus when the user tabs from or
clicks outside the control.

Onchange The field loses focus after the contents of the control
have changed.
Drop down list

 HTML:

<select id="id“ multiple size="n">


<option value="string" selected >
label
</option>
...
</select
Drop down list(Cont.)
 Properties for Select:
Property Description
length The number of options in the list.

selectedIndex The index number, beginning with 0, of the selected option.

An array of the options in the list. Used to reference properties


options[] associated with the options; e.g., options[1].value or
options[2].text.
Sets or returns the value of the selected option in a drop-down
value
list.
text The text label associated with an option.

multiple Sets or returns whether or not multiple items can be selected

 https://www.w3schools.com/jsref/dom_obj_select.asp
 https://www.w3schools.com/jsref/coll_select_options.asp
Drop down list(Cont.)
 Properties for Option:
Property Description
A true or false value indicating whether an option is
selected
chosen.
value The value associated with an option.
text The text label associated with an option.
Sets or returns the index position of an option in a drop-
index
down list
Drop Down(Cont.)

 Methods

Method Description
add() Adds an option to a dropdown list

remove() Removes an option from a dropdown list

focus() Assigns focus to the field; places the cursor in


the control.

blur() Removes focus from a dropdown list


Drop down list(Cont.)

 Event Handlers:

Event Handler Description


The control gains focus.
onfocus

The control loses focus.


onblur

A different option from the one


onchange currently displayed is chosen.
Radio button

 HTML:

<input type="radio"
id="id"
name="name"
value="string"
checked
/>
Radio button(Cont.)
 Properties
Properties Description

length The number of radio buttons with the same name.

checked A true or false value indicating whether a button is checked.

Sets or returns the value of the value attribute of the radio


value
button
Radio button(Cont.)
 Methods:

Method Description
blur() Removes focus from the field.

focus() Assigns focus to the field; places the cursor in


the control.

click() Simulates a mouse-click on a radio button


Radio button(Cont.)

 Event Handlers:

Event Handler Description


The control gains focus.
onfocus

The control loses focus.


onblur

The button is clicked.


onclick
Check Box

 HTML:

<input type="checkbox"
id="id"
name="name"
value="string"
checked
/>
Check Box(Cont.)
 Properties:
Property Description

checked A true or false value indicating whether a button is checked.

Sets or returns the value of the value attribute of the check


value
box
Check Box(Cont.)
 Methods:

Method Description
blur() Removes focus from the field.

focus() Assigns focus to the field; places the cursor in


the control.

click() Simulates a mouse-click on a radio button


Check Box(Cont.)

 Event Handlers:

Event Handler Description


The control gains focus.
onfocus

The control loses focus.


onblur

The button is clicked.


onclick
Button

 HTML:

<input type="button“
id="id“
value="string"
/>
Button(Cont.)
 Methods:

Method Description
blur() Removes focus from the field.

focus() Assigns focus to the field; places the cursor in


the control.

click() Simulates a mouse-click on a button


Button (Cont.)

 Properties:

properties Description
value Sets or returns the text that is displayed on the
button

disabled Sets or returns whether or not a button should


be disabled
Button(Cont.)

 Event Handlers:
Event Handler Event
The mouse is clicked and released with the
onclick
cursor positioned over the button.
The mouse is double-clicked with the
ondblclick
cursor positioned over the button.
The mouse is pressed down with the cursor
onmousedown
positioned over the button.
onmouseout The mouse cursor is moved off the button.
The mouse cursor is moved on top of the
onmouseover
button.
The mouse button is released with the
onmouseup
cursor positioned over the button.
DOM HTML objects reference

 DOM HTML objects reference


o http://www.w3schools.com/jsref/default.asp
Introducing SPAN & DIV

 Used to add text or HTML elements to the page without


removing the page contents on the run time.

 HTML:
<span id=“s1”>
Hello There!
</ span>

<div id=“d1”>
Hello There!
</div>
Introducing SPAN & DIV (Cont.)
 Properties (work with content elements):
properties Description
innerText Sets or returns the text that the control contains.
“innerText is aware of the rendered appearance of text,
while textContent is not.”
https://developer.mozilla.org/en-
US/docs/Web/API/HTMLElement/innerText
textContent Sets or returns the text that the control contains,
and execute the HTML tags in the text.
Differences from innerText:
https://developer.mozilla.org/en-
US/docs/Web/API/Node/textContent
innerHTML Sets or returns the HTML text code that the
control contains, and execute the HTML tags in
the text.
Introducing SPAN & DIV (Cont.)
 Properties:

<script>
document.getElementById(“d1”).innerText =“<b>new text</b>”;
///<b>new text</b>
document.getElementById(“d1”).textContent=“<b>new text</b>”;
//<b>new text</b>
document.getElementById(“d1”).innerHTML=“<b>new text</b>”;
//new text
</script>
Variety of DOM References

 Finding HTML Elements:


o Finding HTML elements by id
o Finding HTML elements by tag name
o Finding HTML elements by class name
o Finding HTML elements by CSS selectors
o Finding HTML elements by HTML object collections
This object

 Use this keyword to refer to the current object.


 Self reference to the object is used :

<input type=“text” onFocus = "this.value=‘You are in!’“/>


This object (Cont.)

 Passing current Object as a function parameter:

function myFunction(myObject)
{
myObject.value = ”In the function!!“
}

<input type=“text” onClick=“myFunction(this)”/>


<script > </script>

<script>document.writeln(“Thank
You!”)</script>

You might also like