Scribd
Upload
3 views

JS HTML DOM

The document provides an overview of the JavaScript HTML Document Object Model (DOM) and its methods, properties, and functionalities for manipulating HTML elements. It also covers PHP concepts such as variables, the static keyword, and the differences between echo and print statements. Additionally, references for further reading on PHP are included.

Uploaded by

Karthikeyini S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

JS HTML DOM

The document provides an overview of the JavaScript HTML Document Object Model (DOM) and its methods, properties, and functionalities for manipulating HTML elements. It also covers PHP concepts such as variables, the static keyword, and the differences between echo and print statements. Additionally, references for further reading on PHP are included.

Uploaded by

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

SRI KRISHNA COLLEGE OF ENGINEERING AND TECHNOLOGY

Kuniamuthur, Coimbatore, Tamilnadu, India


An Autonomous Institution, Affiliated to Anna University,
Accredited by NAAC with “A” Grade & Accredited by NBA (CSE, ECE, IT, MECH ,EEE, CIVIL& MCT)

Course : 20CSI504 – PHP and JS Framework


Module : 2
Topic : JS HTML DOM
Faculty : Dr. S. Karthikeyini
Department : M.Tech – Computer Science & Engineering

1
Topics Covered
▪ JS HTML DOM
▪ DOM Methods
▪ DOM Document
▪ DOM Elements
▪ DOM HTML
▪ DOM Forms
▪ DOM CSS
▪ DOM Animation
▪ DOM Events
▪ DOM Navigaion
▪ DOM Nodes
2
The HTML DOM (Document Object Model)

3
DOM ( Document Object Model)

 "The W3C Document Object Model (DOM) is a platform and


language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of a
document.”

The W3C DOM standard is separated into 3 different parts:


• Core DOM
• XML DOM
• HTML DOM

4
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.

5
HTML DOM Methods
HTML DOM methods are actions you can perform (on HTML
Elements).

HTML DOM properties are values (of HTML Elements) that you can set
or change.
<html>
<body>

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

<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>

</body>
</html>
6
HTML DOM Documents
• The HTML DOM document object is the owner of all other objects in
your web page.

Finding HTML Elements

Method

document.getElementById(id)

document.getElementsByTagName(name)

document.getElementsByClassName(name)

7
Changing HTML Elements
Property
element.innerHTML = new html content
element.attribute = new value
element.style.property = new style
Method
element.setAttribute(attribute, value)

Adding and Deleting Elements


Method
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(new, old)
document.write(text)
8
Changing HTML

• The HTML DOM allows JavaScript to change the content of HTML


elements.
• To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New
text!";
</script>

</body>
9
</html>
• PHP also stores all global variables in an array called $GLOBALS[index].
The index holds the name of the variable. This array is also accessible
from within functions and can be used to update global variables directly.
• The example above can be rewritten like this:
<!DOCTYPE html>
<html>
<body>
<?php
$x=5;
$y=10;
function myTest() {
$GLOBALS['y']=$GLOBALS['x']+$GLOBALS['y’];
}
myTest();
echo $y;
?>
</body>
</html>
10
PHP The static Keyword
• Normally, when a function is completed/executed, all of its
variables are deleted. However, sometimes we want a local variable
Output: 0
NOT to be deleted. We need it for a further job. 1
• To do this, use the static keyword when you first declare the 2
variable:
3
• <?php
4
function myTest() {
static $x=0;
echo $x;
$x++;
}
myTest(); echo "<br>"; Then, each time the function is called,
myTest(); echo "<br>"; that variable will still have the information
myTest(); echo "<br>"; it contained from the last time the function
was called.
myTest(); echo "<br>";
Note: The variable is still local to the
myTest(); function.
?> 11
PHP echo and print Statements
• There are some differences between echo
and print:
• echo - can output one or more strings
• print - can only output one string, and returns
always 1

• Tip: echo is marginally faster compared to


print as echo does not return any value.

12
The PHP echo Statement: Display Strings

• <?php • Output:
echo "<h2>PHP is fun!</h2>"; • PHP is fun!
echo "Hello world!<br>"; • Hello world!
echo "I'm about to learn PHP!<br>"; I'm about to learn
echo "This", " string", " was", " made", PHP!
" with multiple parameters."; This string was
?> made with
multiple
parameters.

13
The PHP echo Statement: Display Variables

 <?php • Output:
$txt1="Learn PHP"; • Learn PHP
$txt2="W3Schools.com"; Study PHP at
$cars=array("Volvo","BMW","Toyota"); W3Schools.com
echo $txt1; My car is a Volvo
echo "<br>";
echo "Study PHP at $txt2";
echo "<br>";
echo "My car is a {$cars[0]}";
?>

14
The PHP print Statement: Display Strings

 <?php • Output:
print "<h2>PHP is fun!</h2>"; • PHP is fun!
print "Hello world!<br>"; • Hello world!
print "I'm about to learn PHP!"; I'm about to learn
?> PHP!

15
The PHP print Statement: Display Variables

• <?php • Output:
$txt1="Learn PHP"; • Learn PHP
$txt2="W3Schools.com"; Study PHP at
$cars=array("Volvo","BMW","Toyota") W3Schools.com
; My car is a Volvo

print $txt1;
print "<br>";
print "Study PHP at $txt2";
print "My car is a {$cars[0]}";
?>

16
Summary
▪ PHP Variables
▪ Declaring PHP Variables
▪ Loosely Typed Language
▪ PHP Variable Scope
▪ Global Keyword
▪ Static Keyword
▪ Display String
▪ Display Variable

17
References
1. Steven Holzner, “PHP:The Complete
Reference”, McGraw Hill Education, 2017
2. https://www.w3schools.com/php/
3. https://www.tutorialspoint.com/php/index.htm

18
19

You might also like