Tag: DOM

Detach and Attach DOM Elements: jQuery Array

Video tutorial illustrates the use of jQuery’s special type of variable called array.

Array variable stores multiple data with single name with different index. Indexing starts from zero in jQuery.
This helps in storing and retrieving easily using some conditional looping.

In this example, we take a unordered list with some list items which has two type of class veg and nonveg.
Another ordered list, with only 1 list item.
Two buttons. One to detach the items from unordered list, which has a class called veg.
Another button, to attach it to the ordered list.

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head><title>Detach and Attach DOM Elements: jQuery Arrays!</title></head>
<body>
 
<ul>
<li class="veg">Rice</li>
<li class="nonveg">Fish</li>
<li class="nonveg">Chicken</li>
<li class="veg">Veg Pizza</li>
</ul>
 
<ol>
<li class="veg">Veg Paneer</li>
</ol>
 
<button id="remove">Remove</button>
<button id="attach">Attach</button>
 
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
</body>
</html>

Here you have 1 unordered list. 1 Ordered list and 2 buttons.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

$(document).ready( function() {
 
 $("#remove").click( function() {
   $store = $("ul li.veg").detach();
 });
 
 $("#attach").click( function() {
   $("ol li").after($store);
 });
 
});

Once the user clicks on the button with the id remove, we detach the list items with class veg from the unordered list and store it inside the special jQuery array variable.
Next, when the user clicks on the button with the id of attach, we attach it to the ordered list using append(), after(), before() methods of jQuery, by passing the array variable to these methods.

Video Tutorial: Detach and Attach DOM Elements: jQuery Array


[youtube https://www.youtube.com/watch?v=UHSrD8j5Czc]

YouTube Link: https://www.youtube.com/watch?v=UHSrD8j5Czc [Watch the Video In Full Screen.]



Unlike remove() method, detach() doesn’t delete the DOM structure or the HTML elements.

Related Read:
jQuery Methods and CSS: Restaurant Application

Note: You could even use the normal javascript arrays in jQuery too. We shall look at it in the future videos.

DOM Tree Traversal: jQuery

In this video tutorial presentation we will explain the DOM Tree Traversal using jQuery methods.

The jQuery methods we are using are
parent()
children()
prev()
next()
siblings()
and some examples to show the use of Chain methods.

HTML code
index.html

1
2
3
4
5
6
7
8

 <div id="main">
  <img src="logo.png" />
  <ol>
   <li>Apple</li>
   <li>Oracle</li>
   <li>Microsoft</li>
  </ol> 
</div>
1

 $("ol").parent();

is div with an id main.

1

 $("ol").children();

is, all li. i.e., Apple, Oracle, Microsoft will be displayed.

1

 $("img").parent();

is div with an id main.

1

 $("li").parent().parent();

parent of li is ol and its parent is div tag with an id main.
This is also called as chain method.

Video Tutorial: DOM Tree Traversal: jQuery


[youtube https://www.youtube.com/watch?v=bBtkD6t0_tU]

YouTube Link: https://www.youtube.com/watch?v=bBtkD6t0_tU [Watch the Video In Full Screen.]



How to test these methods:
Looking at our previous day tutorials, write a simple program with some html element structures and take a button.
Clicking on the button, you call each of these methods and see the output.

Keep the programs simple, so that you can first understand the output. Later these simple DOM tree traversal techniques will be very useful while you encounter with some complex application development.

Hide / Show Content: XML & DOM

Video tutorial illustrating the mechanism of hiding and unhiding / showing the XML content inside the DIV tag using DOM.

Before proceeding watch:

Display XML Data With DOM( innerHTML ): XML & Javascript

Business card Content
index.html

 Our Business Card!
   
   
Hide Email || Show Email

Here we get the element by its id and set its display style property to none, to hide it from the user. Later when the user clicks on Show link, we remove the display property none and leave it blank.

Video Tutorial: Hide / Show Content: XML & DOM


[youtube https://www.youtube.com/watch?v=CFoBb-4PJ8A]

YouTube Link: https://www.youtube.com/watch?v=CFoBb-4PJ8A [Watch the Video In Full Screen.]



Business card Styling
Style.css

.companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}

.Name 
{
    display: block;
    font-weight: bold;
}

.phone 
{
    display: block;
}

.company
{
    display:block;
}

.email
{
    display: block;
    color: Green;
}

This simple feature can be used to hide and unhide user profile information to the search boots or unauthorized users.
By default, set the email and other fields as hidden. Once the user is logged in or is a friend of the person whose profile is being viewed, then allow the person to access data via show function.

Read / Access XML Data With DOM: XML & Javascript

Video tutorial illustrating the manipulation of XML data using DOM [ Document Object Model ]

Using CSS Level 2, we couldn’t change the order in which we would display / access the XML data. To solve that and many more limitations, we make use of DOM.
In this tutorial you can learn, accessing the required XML content and arrange it as you need it.

Business card Content
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<html>
 <head><title>Our Business Card!</title>
 
  <script language="javascript" type="text/javascript">
 
  function display1() {
 
   var base    = document.getElementById("myBiz");
   var person1 = base.getElementsByTagName("companyName")[0];
   var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
   var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
   var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
   var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
   var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
   var company;
   comanyy = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
   alert("Business Card: \n\n" + name + "\n" + phone1 + "\n" 
            + phone2 + "\n" + email + "\n" + company);
  }
 
 
 function display2() {
 
   var base = document.getElementById("myBiz");
   var person2 = base.getElementsByTagName("companyName")[1];
   var name = "Name: " + person2.getElementsByTagName("Name")[0].firstChild.data;
   var phLable1 = person2.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
   var phone1 = phLable1 + person2.getElementsByTagName("phone")[0].firstChild.data;
   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
   var phone2 = phLable2 + person2.getElementsByTagName("phone")[1].firstChild.data;
   var email = "email: " + person2.getElementsByTagName("email")[0].firstChild.data;
   var company;
   comapany = "Company: " + person2.getElementsByTagName("company")[0].firstChild.data;
 
   alert("Business Card: \n\n" + name + "\n" + phone1 + "\n" 
            + phone2 + "\n" + email + "\n" + company);
 }
 
  </script>
 
 </head>
 <body>
 
 <xml id="myBiz" style="display: none;">
 
 <companynames>
 
  <companyname>
    <name>Satish B</name>
    <phone type="home" primary="call me">(91) 9844552841</phone>
    <phone type="work">(91) 9844119841</phone>
    <email>[email protected]</email>
    <company>Technotip IT Solutions</company>
  </companyname>
 
  <companyname>
    <name>Shwetha</name>
    <phone type="home">(91) 123456789</phone>
    <phone type="work" primary="call me">(91) 987654321</phone>
    <email>[email protected]</email>
    <company>Microsoft</company>
  </companyname>
 
</companynames>
 
 
 </xml>
 
 <a href="javascript:display1()">Satish: Technotip IT Solutions</a><br />
 <a href="javascript:display2()">Shwetha: Microsoft</a>
 
 </body>
</html>

Here we’ve written entire thing in one file, for the purpose of demonstration.
We would highly recommend you to write javascript, css in external file and link it to the html file.

Video Tutorial: Read / Access XML Data With DOM: XML & Javascript


[youtube https://www.youtube.com/watch?v=pJiJWWKEbU0]

YouTube Link: https://www.youtube.com/watch?v=pJiJWWKEbU0 [Watch the Video In Full Screen.]



First we fetch the root tag and assign it to a javascript variable called base. Using this as a reference, we fetch the sub-element and using which we fetch all its child elements and inturn get the data present inside them.

Remember, the string inside the tags Name, phone email and company is also considered separate node.

Inside the index.html file we have taken two anchor tags:
Satish: Technotip IT Solutions
Shwetha: Microsoft

which invoke the javascript functions and then display the information of respective people.

If in case we have hundreds or thousands of people in our XML file, we could use looping and dynamically fetch XML data and display it more meaningfully and with less effort(due to proper programmatical automation).