Scribd
Upload
1 views

CIT 415 Topic 10 DOM Scripting

Lecture 10 covers DOM Scripting, explaining the Document Object Model (DOM) as a representation of web page elements that can be accessed and modified using JavaScript. It details methods for accessing document elements by ID, tag name, class name, and attributes, as well as how to manipulate the DOM by adding, cloning, inserting, and removing nodes. The lecture includes practical examples demonstrating these concepts in HTML and JavaScript.

Uploaded by

theeeclipse17
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

CIT 415 Topic 10 DOM Scripting

Lecture 10 covers DOM Scripting, explaining the Document Object Model (DOM) as a representation of web page elements that can be accessed and modified using JavaScript. It details methods for accessing document elements by ID, tag name, class name, and attributes, as well as how to manipulate the DOM by adding, cloning, inserting, and removing nodes. The lecture includes practical examples demonstrating these concepts in HTML and JavaScript.

Uploaded by

theeeclipse17
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

Lecture 10

Topic 10: DOM Scripting

1
Lecture Overview

2
The DOM Model

3
• Document Object – Object that represents the
a web page and all its elements.
• Each HTML element is treated as an object by
JavaScript.
• DOM – is the data representation of the
objects that comprise the structure and
content of a document on the web.

4
The DOM and DHTML
• The DOM is an example of an application
programming interface (API)
• It specifies how it is accessed and modified.
• DHTML (Dynamic HTML) - The combination of
HTML and CSS with JavaScript.
• it enables design of interactive and dynamic
web pages.

5
The DOM Tree
• The DOM hierarchy depends on a document's
contents
• Example:

6
7
8
• Each time you load a web page, the browser
constructs its document object model.
• Each item in the DOM tree is a node.
• Element, attribute, and text content nodes are
the most commonly used nodes.

9
Accessing Document Elements
1. Accessing Elements by id value
• Use the getElementById() method of the
document object.
• The method returns the first element in a
document with a matching id attribute.
• Syntax:

10
• Example:
<p id=“p1”>Maseno</p>
<script>
var x=document.getElementByID(“p1”);
N/B: the id value must be set in HTML.

11
2. Accessing Elements by Tag Name
• The getElementsByTagName() method is
used.
• The method returns a collection of a specified
elements's child nodes a NodeList object.
• The NodeList object represents a collection of
nodes.
• The nodes can be accessed by index numbers.
The index starts at 0.
12
• Example:
var x =
document.getElementsByTagName("UL")[0];
var y =
document.getElementsByTagName("UL")[1];

13
• Example: TagName.html
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to change the text of the first list item (index 0).</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
}
</script>
</body>
</html>

14
3. Accessing Elements by Class Name
• Use the getElementsByClassName() method.
• The method returns a collection of all
elements in the document with the specified
class name, as an HTMLCollection object.
• The HTMLCollection object represents a
collection of nodes.
• The nodes can be accessed by index numbers.
The index starts at 0.
15
• Example:
<p class=“p1”>Maseno</p>
<script>
var x =
document.getElementsByClassName(“p1");
</script>

16
• Example: ElementsByClassName.html
<!DOCTYPE html>
<html>
<head>
<title>Elements By Class Name Demo</title>
<script>
function myFunction() {
var x = document.getElementsByClassName("p1");
x[1].innerHTML = "Hello World!";
}
</script>
</head>
<body>
<p class="p1">First paragraph element.</p>
<p class="p2">Second paragraph element.</p>
<p class="p1">Third paragraph element</p>
<p class="p1">Click the button to change the text of the 2nd paragraph element with class="pClass1"
(index 1).</p>
<button onclick="myFunction()">Change Content</button>
</body>
</html>

17
4. Accessing Elements by Tag Name Attribute
• Use the getElementsByName() method.
• method returns a collection of all elements in
the document with the specified name (the value
of the name attribute), as an HTMLCollection
object.
• The HTMLCollection object represents a
collection of nodes.
• The nodes can be accessed by index numbers.
• The index starts at 0.

18
• Example:
<p name=“p1”>Maseno</p>
<script>
var x=document.getElementByName(“p1”);
</script>

19
Accessing an Element's Content
1. Using the innerHTML Property
• Can be used to access and and change an
element’s content.
• Example:
document.getElementById(“p1”).innerHTML=“N
airobi”);

20
2. Using textContent Property
• The property sets or returns the text content of
the specified node, and all its descendants.
• If you set the textContent property, any child
nodes are removed and replaced by a single Text
node containing the specified string. Example:
var x =
document.getElementById(“myBtn").textContent;
document.getElementById(“p2").innerHTML = x;

21
• Example: TextContent.html
<!DOCTYPE html>
<html>
<body>
<p>Click the button get the text content of the button element.</p>
<button onclick="myFunction()" id="myBtn">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myBtn").textContent;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

22
Accessing Element Attributes
• add a period and the name of the attribute
after the element reference.
• Example:
• <a href=“myHome.html” id=“homeLink”>
Home </a>
<script>
var x=document.getElementById(
"homeLink").href;
23
• Uses:
i). This is used to look up attribute value and assign
it to variable.
• Example:
• var homeURL =
document.getElementById("homeLink").href;
ii). Used to assign new value to attribute.
Example:
document.getElementById("homeLink").href =
"http://w3.org";

24
Example:ChangeAttribute.html
<!DOCTYPE html>
<html>
<head>
<title>Change HTML Attribute Demo</title>
<script>
function changeAttribute()
{
document.getElementById("homeLink").href="main.html";
var x=document.getElementById("homeLink").href;
document.getElementById("p1").innerHTML=x;
}
</script>
</head>
<body>
<p>Click button to change href attribute value</p>
<button id="btn" onclick="changeAttribute()">Submit</button>
<a href="myHome.html" id="homeLink">Home</a>
<p id="p1"></p>
</body>
</html>

25
Adding a Node to DOM
1. Creating a Node
• Use the createElement() method
• The method creates a new element
• Syntax
var
variablename=document.createElement(nodename
);
• Example:
var node=document.createElement(Li);

26
2. Adding Text to the Node (element)
• Elements often contain text.
• To add text to a node, use the innerHTML
property.
• Example:
node.innerHTML=“water”;

27
3. Adding a Node to a DOM
• use the appendChild() method.
• The method appends a node as the last child
of a node.
• Syntax:
parentNode.appendChild(childNode)
– childNode is node to be attached
– parentNode is node to attach child node to
28
• Example:
document.getElementById("myList").appendChil
d(node);

29
• Example: AddNode.html
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a P element with some text.</p>
<button onclick="myFunction()">Add paragraph</button>
<script>
function myFunction() {
var para = document.createElement("P");
para.innerText = "This is appended Paragraph.";
document.body.appendChild(para);
}
</script>
</body>
</html>

30
Alternative: Adding Text to the Node (element)
• Use the createTextNode() method.
• The method creates and returns a new Text
node that contains the specified text.
• Syntax:
variable=createTextNode( text)
• Example:
textNode=document.createTextNode( “water”)

31
Join the text and element node fragments
• Example
• node.appendChild(textnode);

32
Example 2:AppendItem2.html
<!DOCTYPE html>
<html>
<head>
<title>Add Node2</title>
<script>
function appendItem() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>
</head>
<body>
<h2>Beverage List</h2>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to append an item to the end of the list.</p>
<button onclick="appendItem()">Add Item</button>
</body>
</html>

33
Cloning Nodes
• Clone – Creating a new node same as existing
node.
• Use the cloneNode() method
• Syntax:
• existingNode.cloneNode(true | false)
– true argument clones child nodes
– false argument clones only specified parent node

34
• Example:CloneNode.html
<!DOCTYPE html>
<html>
<head>
<title>Clone Node Demo</title>
<script>
function nodeCloning() {
var itm = document.getElementById("myList2").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</head>
<body>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p>Click the button to copy an item from one list to another.</p>
<button onclick="nodeCloning()">Clone Node</button>
</body>
</html>

35
Inserting Nodes at Specific Positions
in the Document Tree
• Use insertBefore() method.
• Syntax:
parentNode.insertBefore(newChildNode,
existingChildNode);
Example:

36
Example:InsertNode.html
<!DOCTYPE html>
<html>
<head>
<title>Insert Node Demo</title>
<script>
function insertNode() {
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);
}
</script>
</head>
<body>
<h2>Beverages</h2>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p>Click the button to move an item from one list to another</p>
<button onclick="insertNode()">Move & Insert</button>
</body>
</html>

37
Removing Nodes
• Use the removeChild() method.
• The method removes a specified child node of
the specified element.
• Syntax:
parentNode.removeChild(childNode);
• The method returns the removed node as a
Node object, or null if the node does not exist.

38
• Example: RemoveNode.html
<!DOCTYPE html>
<html>
<head>
<title>Remove Node Demo</title>
<script>
function removeNode() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>
</head>
<body>
<ul id="myList">
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
<p>Click the button to remove 1st item.</p>
<button onclick="removeNode()">Remove Item</button>
</body>
</html>

39

You might also like