IT8501 WT Topic21

TOPIC WISE CLASS NOTES
Unit Number: III Topic Number: 21 Lecture Number: 21/45
Name of the Faculty / Designation : Mrs.S.Fathima Chandhini,Assistant

Professor
Course : IT8501 – Web Technology
Program : B.Tech – Information Technology
Topics : Modifying Element Style ,The Document Tree
Resources required to handle the class :( VAK - Visuals, Audio, Kinesthetic.)
Visual PPT
Audio Live explanation
Kinesthetic Workbook
@Visual: What are you going to show the students to learn in the class? –
Example: PPT, a video with or without audio, a model, a demonstration, etc.
*Audio: What are you going to make the student listen in the class?
Example: You live explanation, a recorded audio, a video with audio
#Kinesthetic: What are you going to make the students do physically in the
class?
Example: Use a workbook and make them work on it and learn by doing
_______________________________________________________________
$ as per the course plan and will vary based on the credits
Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Technology
1
STEP 1: LEARNING OUTCOMES:
Modifying Element Style, The Document Tree
After the session, the student should be able to:
1. Show the concepts of HTML element modification using document tree.
2. Modify CSS styles and presentation properties with JavaScript.
3. Develop a dynamic webpage by the use of java script and DHTML.
STEP 2: ACQUISITION
(The subtopics under the main topic being handled are listed. Under each sub topic, the entire
detail is to be prepared. This helps in handling the class with focus and confidence).
3.4 Modifying Element Style

DOM access is often used to change the style of an HTML document element in response
to a user-initiated event.The HTML DOM allows JavaScript to change the style of
HTML elements.To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property = new style
3.4.1 JavaScript Can Change HTML Attribute Values.
One of many JavaScript HTML methods is getElementById(). This example uses the
method to "find" an HTML element (with id="demo") and changes the element content
(innerHTML) to "Welcome to JavaScript":
document.getElementById('demo').innerHTML = 'Welcome to JavaScript';
3.4.2 Adding and Removing Nodes (HTML Elements)

3.4.2.1 Creating New HTML Elements (Nodes)
To add a new element to the HTML DOM, you must create the element (element node)
first, and then append it to an existing element.
Write a program to add new element to the HTML DOM
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>

Technology
1
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
3.4.2.2 Creating new HTML Elements - insertBefore()
The appendChild() method in the previous example, appended the new element as the last
child of the parent.We can use insertBefore() method:
Write a program to creating new element to the HTML DOM
<!DOCTYPE html>
<html>
<body>
<div id="div1">
</div>
<script>
var element = document.getElementById("div1");

var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
</body>
</html>
3.4.2.3 Removing Existing HTML Elements
To remove an HTML element, use the remove() method:
Write a program to remove the existing element from the HTML DOM
<!DOCTYPE html>
<html>
<body>
<div>

Technology
1
</div>
<button onclick="myFunction()">Remove Element</button>
<script>
function myFunction() {
var elmnt = document.getElementById("p1");
elmnt.remove();
}
</script>
</body>
</html>
3.4.2.4 Removing a Child Node
For browsers that does not support the remove() method, you have to find the parent node
to remove an element:
Write a program to remove the child node from the HTML DOM
<!DOCTYPE html>
<html>
<body>
<div id="div1">
</div>
<script>
var parent = document.getElementById("div1");
parent.removeChild(child);
</script>
</body>
</html>
3.4.2.5 Replacing HTML Elements
To replace an element to the HTML DOM, use the replaceChild() method:
Write a program to replacing the HTML elements
<!DOCTYPE html>
<html>
<body>

Technology
1
<div id="div1">
</div>
<script>
var parent = document.getElementById("div1");
parent.replaceChild(para,child);
</script>
</body>
</html>
3.4.2.6 JavaScript Can Change HTML Styles (CSS).

 Changing the style of an HTML element, is a variant of changing an HTML
attribute:
document.getElementById("demo").style.color = "black";
document.getElementById("demo").style.display = "block";
Example: Write a DHTML Program to change the HTML Style Using DOM
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
3.5. The Document Tree:
Each HTML document can actually be referred to as a document tree. We describe the
elements in the tree like we would describe a family tree. There are ancestors,
descendants, parents, children and siblings.It is important to understand the document
tree because CSS selectors use the document tree.Use the sample HTML document
below for these examples. The <head> section of the document is omitted for brevity.

Technology
1
Figure 3.1: DOM Tree
<html><body>
<html>
<body>
<div id="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div id="nav">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div><body></html>
A diagram of the above HTML document tree would look like this.
Figure 3.2 : DOM Tree

Technology
1
3.5.1 Ancestor
An ancestor refers to any element that is connected but further up the document tree - no
matter how many levels higher.In the diagram below, the <body> element is the ancestor
of all other elements on the page.
Figure 3.3 : DOM Tree with Ancestor
3.5.2 Descendant
A descendant refers to any element that is connected but lower down the document tree -
no matter how many levels lower.In the diagram below, all elements that are connected
below the <div> element are descendants of that <div>.
+
Figure 3.4 : DOM Tree with Descendant
3.5.3.Parent and Child
A parent is an element that is directly above and connected to an element in the document
tree. In the diagram below, the <div> is a parent to the <ul>.A child is an element that is
directly below and connected to an element in the document tree. In the diagram above,
the <ul> is a child to the <div>.

Technology
1
Figure 3.5 : DOM Tree with Parent and Child
3.5.4 Sibling
A sibling is an element that shares the same parent with another element.
In the diagram below, the <li>'s are siblings as they all share the same parent - the <ul>.
Figure 3.6 : DOM Tree with Sibling

Technology
1
STEP 3: PRACTICE/TESTING
3. a. Short answer questions to check learning in the class
1. The HTML DOM model is constructed as a tree of Objects. In the HTML DOM
(Document Object Model), everything is a _________
2. When a web page is loaded, the browser creates a Document Object Model of the page. In
the HTML DOM, the _________ represents an HTML attribute.
3. The HTML DOM model is constructed as a tree of _____________
4. To remove an HTML element, ________ method is used.
5. To replace an element to the HTML DOM, _________ method is used.
6. Write the syntax to change the style of an HTML element.
3. b. Questions to use in tests and examinations with CO and K level:

S.No Two Marks Questions RBT Course
Level Outcomes
1 In what way DOM is used to modify the element style? RBT-2 CO504.2
2 Write appropriate JavaScript code to remove an element
RBT-3 CO504.3
from a DOM.
3 What are the different variations of JS? RBT-2 CO504.2
4 Write a DHTML Program to change the HTML Style
RBT-3 CO504.3
Using DOM
5 Write a program to add new element to the HTML
RBT-3 CO504.3
DOM
6 Define document tree RBT-2 CO504.2
Descriptive type questions
1 Explain the purpose of the following DOM method and
properties, a. get Element By Id b. create Element c. RBT-2 CO504.2
create Text Node d. append child e. parent Node
2 Discuss on document tree with an example. RBT-2 CO504.2

Technology
1

IT8501 WT Topic21

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IT8501 WT Topic21

Uploaded by

Copyright:

Available Formats

TOPIC WISE CLASS NOTES

Unit Number: III Topic Number: 21 Lecture Number: 21/45

Name of the Faculty / Designation : Mrs.S.Fathima Chandhini,Assistant

Resources required to handle the class :( VAK - Visuals, Audio, Kinesthetic.)

Audio Live explanation

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

3.4 Modifying Element Style

3.4.2 Adding and Removing Nodes (HTML Elements)

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

var element = document.getElementById("div1");

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

3.4.2.6 JavaScript Can Change HTML Styles (CSS).

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Figure 3.2 : DOM Tree

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Figure 3.3 : DOM Tree with Ancestor

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Figure 3.6 : DOM Tree with Sibling

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

3. b. Questions to use in tests and examinations with CO and K level:

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

You might also like