Scribd
Upload
20 views

CH 10-2

The document discusses JavaScript and the Document Object Model (DOM). It covers DOM node types and relationships, manipulating DOM nodes by adding, removing and replacing nodes, and working with DOM table elements and their properties. The key topics covered include the DOM node hierarchy, getting and setting node attributes, and methods for common DOM node manipulations like appendChild(), insertBefore(), replaceChild() and removeChild().

Uploaded by

nyinyilynn163
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
20 views

CH 10-2

The document discusses JavaScript and the Document Object Model (DOM). It covers DOM node types and relationships, manipulating DOM nodes by adding, removing and replacing nodes, and working with DOM table elements and their properties. The key topics covered include the DOM node hierarchy, getting and setting node attributes, and methods for common DOM node manipulations like appendChild(), insertBefore(), replaceChild() and removeChild().

Uploaded by

nyinyilynn163
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/ 25

University of Computer Studies

Web Technology JavaScript programming

Hierarchy of Nodes [Part-II]

JavaScript Group
Department of Information Technology Supporting and Maintenance
Reference Book

• Professional JavaScript for Web Developers , Third Edition By Nicholas C. Zakas


General lecture Plan

• Section 1 • Section 4
What is JavaScript? Document Object Model(DOM)
JavaScript in HTML DOM Extensions
• Section 5
Variables, Scope, and Memory
Events, Forms and Canvas
• Section 2 • Section 6
Language Basics Client-side Storage
Reference Types
• Section 3
Understanding Objects
Window Object
Outlines

• What is DOM?
• Hierarchy of Nodes
• Node Type
• Node Relationships
• Document Object
• Manipulating Nodes
DOM Standard Attributes

id, title, lang, dir (ltr, rtl) , className


No. of Attribute
element.attributes.length;

eg. In Html
<body>
<div id= “mydiv” class=“bd” title=”Body Text” lang=”en” dir= “ltr”>
Hello!</div>
</body>
DOM Standard Attributes(Cont’d)
Using DOM
<body>
<script type=”text/javascript”>
var div=document.createElement(“div”);
div.id= “mydiv”;
div.classname= “bd”;
div.title=”Body Text”;
div.lang=”en”;
div.dir=”ltr”;
div.appendChild(document.createTextNode(“Hello!”));
document.body.appendChild(div);
</script> </body>
Getting Attribute

Example:
In HTML :
<div id=”myDiv” class=”bd” title=”Body text” lang=”en” dir=”ltr”></div>
All of the information specified by this element may be retrieved using the
following JavaScript code:
var div = document.getElementById(“myDiv”);
alert(div.id); //”myDiv”
alert(div.className); //”bd”
alert(div.title); //”Body text”
alert(div.lang); //”en”
alert(div.dir); //”ltr”
Getting Attributes (Cont’d)

var div = document.getElementById(“myDiv”);


alert(div.getAttribute(“id”)); //”myDiv”
alert(div.getAttribute(“class”)); //”bd”
alert(div.getAttribute(“title”)); //”Body text”
alert(div.getAttribute(“lang”)); //”en”
alert(div.getAttribute(“dir”)); //”ltr”
<div id=”myDiv” my_special_attribute=”hello!”></div>
var value = div.getAttribute(“my_special_attribute”);
alert(value); //hello!
Setting Attributes

div.setAttribute(“id”, “someOtherId”);

div.setAttribute(“class”, “ft”);

div.setAttribute(“title”, “Some other text”);

div.setAttribute(“lang”,”fr”);

div.setAttribute(“dir”, “rtl”);
Remove Attributes

div.removeAttribute(“class”);
div.removeAttribute(“id”);
Changing Attribute Value

to change each of the attributes by assigning new values to the properties:

div.id = “someOtherId”;
div.className = “ft”;
div.title = “Some other text”;
div.lang = “fr”;
div.dir =”rtl”;
Manipulating Nodes

appendChild( ): add an HTML Element ( accept one argument: new node, add a node to end
of childNodes list, return new node)
insertBefore( ): accept two arguments: node to insert and node to reference, insert new node
before reference node, return new node
replaceChild( ): replace an HTML Element ( accept two arguments: the node to insert and the
node to replace, return node to replace)
removeChild( ): remove an HTML element (accept one argument: node to remove, return
this node)
normalize( ): joined into a single text node
splitText( ) :splits a text node into two text nodes
appendChild( )

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script type=“text/javascript”>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
insertBefore( )

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script type=“text/javascript”>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
replaceChild( )

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script type=“text/javascript”>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
removeChild( )

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script type=“text/javascript”>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
normalize( ) Example:

Example:
var element = document.createElement("div");
element.className ="message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("welcome");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); //2
element.normalize();
alert(element.childNodes.length); //1
alert(element.firstChild.nodeValue); //Hello world!welcome
splitText( ) Example:

Example:
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); //“Hello"
alert(newNode.nodeValue); //“ world!"
alert(element.childNodes.length); //2
Manipulating Tables

<table border=”1” width=”100%”>


<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
Manipulating Tables
//create the table
var table = document.createElement(“table”);
//create the second row
table.border = 1;
var row2 = document.createElement(“tr”);
table.width = “100%”;
//create the tbody tbody.appendChild(row2);
var tbody = document.createElement(“tbody”); var cell1_2 = document.createElement(“td”);
table.appendChild(tbody); cell1_2.appendChild(document.createTextNode(“Cell 1,2”));
//create the first row row2.appendChild(cell1_2);
var row1 = document.createElement(“tr”);
var cell2_2= document.createElement(“td”);
tbody.appendChild(row1);
cell2_2.appendChild(document.createTextNode(“Cell 2,2”));
var cell1_1 = document.createElement(“td”);
row2.appendChild(cell2_2);
cell1_1.appendChild(document.createTextNode(“Cell 1,1”));
row1.appendChild(cell1_1);
//add the table to the document body

var cell2_1 = document.createElement(“td”); document.body.appendChild(table)


cell2_1.appendChild(document.createTextNode(“Cell 2,1”));
row1.appendChild(cell2_1)
DOM Table Properties
The <table> element adds the following:
caption — Pointer to the <caption> element (if it exists).
tBodies — An HTMLCollection of <tbody> elements.
tFoot — Pointer to the <tfoot> element (if it exists).
tHead — Pointer to the <thead> element (if it exists).
rows — An HTMLCollection of all rows in the table.
createTHead() — Creates a <thead> element, places it into the table, and returns a reference.
createTFoot() — Creates a <tfoot> element, places it into the table, and returns a reference.
createCaption() — Creates a <caption> element, places it into the table, and returns a reference.
deleteTHead() — Deletes the <thead> element.
deleteTFoot() — Deletes the <tfoot> element.
deleteCaption() — Deletes the <caption> element.
deleteRow(pos) — Deletes the row in the given position.
insertRow(pos) — Inserts a row in the given position in the rows collection
DOM Table Properties

The <tbody> element adds the following:


rows — An HTMLCollection of rows in the <tbody> element.
deleteRow(pos) — Deletes the row in the given position.
insertRow(pos) — Inserts a row in the given position in the rows collection and returns a reference to the new row.

The <tr> element adds the following:


cells — An HTMLCollection of cells in the <tr> element.
deleteCell(pos) — Deletes the cell in the given position.
insertCell(pos) — Inserts a cell in the given position in the cells collection and returns a reference to the new cell.
DOM Table Properties

//create the table


//create the second row
var table = document.createElement(“table”);
tbody.insertRow(1);
table.border = 1;
tbody.rows[1].insertCell(0);
table.width = “100%”;
tbody.rows[1].cells[0].appendChild(document.createTextNode(
//create the tbody
“Cell 1,2”));
var tbody = document.createElement(“tbody”);
tbody.rows[1].insertCell(1);
table.appendChild(tbody);
tbody.rows[1].cells[1].appendChild(document.createTextNode(
//create the first row
“Cell 2,2”));
tbody.insertRow(0);
//add the table to the document body
tbody.rows[0].insertCell(0);
document.body.appendChild(table);
tbody.rows[0].cells[0].appendChild(document.createTextNode(
“Cell 1,1”));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode(
“Cell 2,1”));
Exercise

1. Remove a specific paragraph using Id from the div..

2. Find an element by its id. #replace-text div inside this box: Set the text color to
#777. Set the font size to 1rem. Set the replace content to “I can do
<em>whatever</em> I want with JavaScript.”
University of Computer Studies

Thank you! 

You might also like