Valid XHTML 1.0 TransitionalTFW's jQuery Yard / TFW's Samples: DOM Operation

Page: [tfw/jquery_yard/samples/03_dom_operation.html] (v2014-05-02_10-59)
A sample that shows getting DOM elements, assigning their attributes, children and content.
Operation
 Traditional Way
 jQuery Way
Operation
 Traditional Way
 jQuery Way
00 Getting
 Element
Action
 to get the element and alert as DOM element.
 to get the element and alert as DOM element.
Code
 
obj_0_0 = document.getElementById('element_0_0');

btn_0_0_0 = document.getElementById('btn_0_0_0');
btn_0_0_0.onclick = function()
{
	alertInfoAsDomElement(obj_0_0);
};
 
obj_0_0 = $('#element_0_0');

btn_0_0_1 = document.getElementById('btn_0_0_1');
btn_0_0_1.onclick = function()
{
	alertInfoAsDomElement(obj_0_0);
};
Action
 to get the element and alert as jQuery element.
 to get the element and alert as jQuery element.
Code
 
obj_0_0 = document.getElementById('element_0_0');
...

btn_0_1_0 = document.getElementById('btn_0_1_0');
btn_0_1_0.onclick = function()
{
	alertInfoAsJqElement(obj_0_0);
};
 
obj_0_0 = $('#element_0_0');
...

btn_0_1_1 = document.getElementById('btn_0_1_1');
btn_0_1_1.onclick = function()
{
	alertInfoAsJqElement(obj_0_0);
};
Action
 to get the element, convert to and alert as jQuery element.
 to get the element, convert to and alert as DOM element.
Code
 
obj_0_0 = document.getElementById('element_0_0');
...

// DOM to jQuery.
obj_0_1 = $(obj_0_0);

btn_0_2_0 = document.getElementById('btn_0_2_0');
btn_0_2_0.onclick = function()
{
	alertInfoAsJqElement(obj_0_1);
};
 
obj_0_0 = $('#element_0_0');
...

// jQuery to DOM.
obj_0_1 = obj_0_0.get(0);

btn_0_2_1 = document.getElementById('btn_0_2_1');
btn_0_2_1.onclick = function()
{
	alertInfoAsDomElement(obj_0_1);
};
Conclusion
  • document.getElementById(...) gets an object of primitive DOM object with DOM characteristic.
  • $('#...') gets an object of another type without DOM characteristic.
  • DOM element → jQuery element: jqObj = $(domObj);
  • jQuery element → DOM element: domObj = jqObj.get(0);
01 Assigning
 Source Element
Target Elements


[]
Action
 to get the source element and alert as DOM element.
 to get the source element and alert as jQuery element.
Code
 
obj_1_0 = document.getElementById('element_1_0');
// obj_1_0.value = ['root', 'mgr']; // No effect.

btn_1_0_0 = document.getElementById('btn_1_0_0');
btn_1_0_0.onclick = function()
{
	alertInfoAsDomElement(obj_1_0);
};
 
obj_1_0 = $('#element_1_0');
obj_1_0.val(['root', 'mgr', 'guest']);

jqBtn_1_0_1 = $('#btn_1_0_1');
jqBtn_1_0_1.click(function()
{
	alertInfoAsJqElement(obj_1_0);
});
Action
 to get data from the source element, and assign to the target elements.
 to get data from the source element, and assign to the target elements.
Code
 
obj_1_0 = document.getElementById('element_1_0');
...

obj_1_1 = document.getElementById('element_1_1');
obj_1_2 = document.getElementById('element_1_2');
obj_1_3 = document.getElementById('element_1_3');

btn_1_1_0 = document.getElementById('btn_1_1_0');
btn_1_1_0.onclick = function()
{
	obj_1_1.value = obj_1_0.value;
	obj_1_2.value = obj_1_0.value;
	obj_1_3.innerHTML = obj_1_0.value;
};
 
obj_1_0 = $('#element_1_0');
...

obj_1_1 = $('#element_1_1');
obj_1_2 = $('#element_1_2');
obj_1_3 = $('#element_1_3');

jqBtn_1_1_1 = $('#btn_1_1_1');
jqBtn_1_1_1.click(function()
{
	obj_1_1.val(obj_1_0.val());
	obj_1_2.val(obj_1_0.val());
	obj_1_3.html(obj_1_0.val());
});
02 Children
 Element
  1. Start here!
Action
 to remove a child from the element from the head.
 to remove a child from the element from the head.
Code
 
obj_2_0 = document.getElementById('element_2_0');

btn_2_0_0 = document.getElementById('btn_2_0_0');
btn_2_0_0.onclick = function()
{
	obj1d_2_0_childNodes = obj_2_0.childNodes;
	if (null != obj1d_2_0_childNodes
			&& 0 < obj1d_2_0_childNodes.length)
	{
		obj_2_0.removeChild(obj1d_2_0_childNodes[0]);
	}
};
 
obj_2_0 = $('#element_2_0');

jBtn_2_0_1 = $('#btn_2_0_1');
jBtn_2_0_1.click(function()
{
	// Gets a DOM array, not a jQuery collection!
	obj1d_2_0_childNodes = obj_2_0.children();
	if (null != obj1d_2_0_childNodes
			&& 0 < obj1d_2_0_childNodes.length)
	{
		intChildCount = obj1d_2_0_childNodes.length;

		// obj_2_0_childNode = $('#element_2_0 li:eq(0)'); // OK
		obj_2_0_childNode = $('#element_2_0 :eq(0)'); // OK
		// obj_2_0_childNode = obj_2_0.find('li:eq(0)'); // OK
		// obj_2_0_childNode = obj_2_0.find(':eq(0)'); // OK
		// obj_2_0_childNode = $(obj1d_2_0_childNodes[0]); // OK

		// alertInfoAsJqElement(obj_2_0_childNode);
		obj_2_0_childNode.remove();
	}
});
Action
 to add a child into the element from the head.
 to add a child into the element from the head.
Code
 
obj_2_0 = document.getElementById('element_2_0');

...

btn_2_1_0 = document.getElementById('btn_2_1_0');
btn_2_1_0.onclick = function()
{
	obj_2_0_child = document.createElement("li");
	obj_2_0_child.style.backgroundColor = '#7FFF7F';
	obj_2_0_child.style.color = '#007F00';
	obj_2_0_child.innerHTML = 'Added from the head at '
			+ new Date();

	obj1d_2_0_childNodes = obj_2_0.childNodes;
	if (null == obj1d_2_0_childNodes
			|| 1 > obj1d_2_0_childNodes.length)
	{
		obj_2_0.appendChild(obj_2_0_child);
	}
	else
	{
		obj_2_0.insertBefore(obj_2_0_child,
				obj1d_2_0_childNodes[0]);
	}
};
 
obj_2_0 = $('#element_2_0');

...

jBtn_2_1_1 = $('#btn_2_1_1');
jBtn_2_1_1.click(function()
{
	obj_2_0_child = $('<li/>');
	obj_2_0_child.html('Added from the head at ' + new Date());
	obj_2_0_child.css('backgroundColor', '#007F00');
	obj_2_0_child.css('color', '#7FFF7F');
	obj_2_0.prepend(obj_2_0_child);
});
Action
 to add a child into the element from the tail.
 to add a child into the element from the tail.
Code
 
obj_2_0 = document.getElementById('element_2_0');

...

btn_2_2_0 = document.getElementById('btn_2_2_0');
btn_2_2_0.onclick = function()
{
	obj_2_0_child = document.createElement("li");
	obj_2_0_child.innerHTML = 'Added from the tail at '
			+ new Date();
	obj_2_0_child.style.backgroundColor = '#7F7FFF';
	obj_2_0_child.style.color = '#00007F';

	obj_2_0.appendChild(obj_2_0_child);
};
 
obj_2_0 = $('#element_2_0');

...

jBtn_2_2_1 = $('#btn_2_2_1');
jBtn_2_2_1.click(function()
{
	obj_2_0_child = $('<li/>');
	obj_2_0_child.html('Added from the tail at ' + new Date());
	obj_2_0_child.css('backgroundColor', '#00007F');
	obj_2_0_child.css('color', '#7F7FFF');
	obj_2_0.append(obj_2_0_child);
});
Action
 to remove a child from the element from the tail.
 to remove a child from the element from the tail.
Code
 
obj_2_0 = document.getElementById('element_2_0');

...

btn_2_3_0 = document.getElementById('btn_2_3_0');
btn_2_3_0.onclick = function()
{
	obj1d_2_0_childNodes = obj_2_0.childNodes;
	if (null != obj1d_2_0_childNodes)
	{
		intChildCount = obj1d_2_0_childNodes.length;
		if (0 < intChildCount)
		{
			obj_2_0.removeChild(obj1d_2_0_childNodes[intChildCount
					- 1]);
		}
	}
};
 
obj_2_0 = $('#element_2_0');

...

jBtn_2_3_1 = $('#btn_2_3_1');
jBtn_2_3_1.click(function()
{
	// Gets a DOM array, not a jQuery collection!
	obj1d_2_0_childNodes = obj_2_0.children();
	if (null != obj1d_2_0_childNodes
			&& 0 < obj1d_2_0_childNodes.length)
	{
		intChildCount = obj1d_2_0_childNodes.length;
		obj_2_0_childNode = $('#element_2_0 :eq(' + (intChildCount
				- 1) + ')');

		// alertInfoAsJqElement(obj_2_0_childNode);
		obj_2_0_childNode.remove();
	}
});