Scribd
Upload
36 views

JavaScript DOM

The document summarizes JavaScript HTML DOM events. It explains that JavaScript can be executed when events occur, like when a user clicks an element. It provides examples of common HTML events like click, load, change, mouseover, mousedown, and mouseup. It also demonstrates how to add JavaScript code to HTML event attributes to execute functions in response to these events.

Uploaded by

Bhati G
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views

JavaScript DOM

The document summarizes JavaScript HTML DOM events. It explains that JavaScript can be executed when events occur, like when a user clicks an element. It provides examples of common HTML events like click, load, change, mouseover, mousedown, and mouseup. It also demonstrates how to add JavaScript code to HTML event attributes to execute functions in response to these events.

Uploaded by

Bhati G
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

JavaScript HTML DOM

DOM: Document Object Model


What is the HTML DOM?
The HTML DOM is a standard object model and programming
interface for HTML. It defines:
•The HTML elements as objects
•The properties of all HTML elements
•The methods to access all HTML elements
•The events for all HTML elements
In other words: The HTML DOM is a standard for how to get,
change, add, or delete HTML elements.
DOM Methods
• The DOM Programming Interface
• The HTML DOM can be accessed with JavaScript (and with other
programming languages).
• In the DOM, all HTML elements are defined as objects.
• The programming interface is the properties and methods of each object.
• A property is a value that you can get or set (like changing the content of
an HTML element).
• A method is an action you can do (like add or deleting an HTML
element).

In the example above, getElementById is a method, while innerHTML is a property.


The HTML DOM Document Object
The document object represents your web
page.
If you want to access any element in an
HTML page, you always start with accessing
the document object.
Below are some examples of how you can
use the document object to access and
manipulate HTML.
Finding Elements by ID
document.getElementById("demo").innerHTML = __________
Finding Elements by Tag
<p>Hello World!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
</script>
Finding Elements by Class
<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>


<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
Finding Elements by CSS Selector
<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>


<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
Finding Elements by Object Collections
• doument.anchors
• document.body
• document.forms
• document.head
• document.images
• document.links, etc.
Finding Elements by document.forms
<form id="frm1" action="/action_page.php"> <script>
First name: <input type="text" name="fname" function myFunction() {
value="Donald"><br>
var x = document.forms["frm1"];
Last name: <input type="text" name="lname"
value="Duck"><br><br> var text = "";
<input type="submit" value="Submit"> var i;
</form> for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
<p>Click "Try it" to display the value of each element }
in the form.</p>
document.getElementById("demo").innerHTML
= text;
<button onclick="myFunction()">Try it</button>
}
</script>
<p id="demo"></p>
JavaScript HTML DOM - Changing CSS

Changing HTML Style


To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property = new style
The following example changes the style of a <p> element:
JavaScript HTML DOM Events
A JavaScript can be executed when an event occurs, like when a user
clicks on an HTML element.
To execute code when a user clicks on an element, add JavaScript code
to an HTML event attribute:
onclick=JavaScript
Examples of HTML events:
•When a user clicks the mouse
•When a web page has loaded
•When an image has been loaded
•When the mouse moves over an element
•When an input field is changed
•When an HTML form is submitted
•When a user strokes a key
The “onload” Event
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
The “onchange” Event
<script> Enter your name: <input
function myFunction() { type="text" id="fname"
onchange="myFunction()">
var x =
document.getElementById("fname
"); <p>When you leave the input
x.value = x.value.toUpperCase(); field, a function is triggered which
transforms the input text to upper
} case.</p>
</script>
The “onmouseover” and “onmouseout”
Events
<div onmouseover="mOver(this)" <script>
onmouseout="mOut(this)" function mOver(obj) {
style="background- obj.innerHTML = "Thank You"
color:#D94A38;width:120px;heig }
ht:20px;padding:40px;">
Mouse Over Me</div> function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
The “onmousedown” and “onmousup”
Events
<div <script>
onmousedown="mDown(this)" function mDown(obj) {
onmouseup="mUp(this)" obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
style="background-
}
color:#D94A38;width:90px;height
:20px;padding:40px;">
function mUp(obj) {
Click Me</div> obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>

You might also like