TechnoBlogy » Javascript

Traversing DOM using JavaScript

Nauman — Sun, 22 Nov 2009 07:20:52 +0000

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

The DOM presents an HTML document as a tree-structure expressed as an XML document.

DOM is a language independent API, as it can be used in Java, .NET, JavaScript and many more. I will use it with JavaScript to for my sample code provided below.

When talking about DOM trees , you are really talking about a hierarchy of nodes. These are some objects Inside XML(XHTML,HTML) document :

document - is very top level node wich contains all other nodes

element - represents the contents of a start tag and end tag

Attr — Represents an attribute name-value pair

Text — Represents plain text in an XML document contained within start and end tags or inside of a CData Section

CDataSection — The object representation of . This node type may contain any symbols including quotes.

To manipulate this obects i.e makes changes in XML(XHTML, HTML) we have some properties and methods:

nodeName - The name of the node

nodeValue - The value of the node

nodeType - One of the node type constant values

ownerDocument – Pointer to the document that this node belongs to

firstChild - Pointer to the first node in the childNodes list

lastChild – Pointer to the last node in the childNodes list

childNodes – A list of all child nodes

previousSibling – Pointer to the previous sibling; null if this is the first sibling

nextSibling – Pointer to the next sibling; null if this is the last sibling

hasChildNodes() – Returns true when childNodes contains one or more nodes

attributes – Contains Attr objects representing an element’s attributes; only used for Element nodes

appendChild(node) - Adds node to the end of childNodes

removeChild(node) - Removes node from childNodes

replaceChild (newnode, oldnode) – Replaces oldnode in childNodes with newnode

insertBefore (newnode, refnode) — Inserts newnode before refnode in childnodes

Let’s do some example to demonstrate functions and properties mentioned before.

Adding nodes using DOM:

In idex.html we have form tag with textarea and submit button inside

</p> <p>

In script.js addNode() function is triggered on form submit it gets value of textarea, creates text node then paragraph tag and appends all these

as child of body tag.

window.onload=initAll;

function initAll()

{

document.getElementById(“form1″).onsubmit=addNode;

}

function addNode()

{

var inText=document.getElementById(“textarea”).value;

var newText=document.createTextNode(inText);

var newGraf=document.createElement(“p”);

newGraf.appendChild(newText);

var docBody=document.getElementsByTagName(“body”)[0];

docBody.appendChild(newGraf);

return false;

}

RGB-to-Hex Conversion

saim — Tue, 03 Nov 2009 15:22:25 +0000

Question is: How do I convert RGB values of a color to a hexadecimal string?

The algorithm is as follows: make sure that RGB values are in the range 0…255, convert RGB values to hex strings, and then merge the three strings.
Here is a script that does this conversion:

function RGBtoHex(R,G,B)
{
return toHex(R)+toHex(G)+toHex(B);
}

function toHex(N)
{
if (N==null)
return "00";
N=parseInt(N);
if (N==0 || isNaN(N))
return "00";
N=Math.max(0,N);
N=Math.min(N,255);
N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16)
+ "0123456789ABCDEF".charAt(N%16);
}

For reference and online example Click Me

charachter validation and count for a textbox – Javascript

Nauman — Tue, 03 Nov 2009 14:32:05 +0000

Here I have provided a solution to put a counter for a textbox, that can be updated as each character typed into the textbox. This script will also validate the maximum character length allowed for a textbox. This script will also work when anyone copy/paste the text into the textbox. Textbox can be either single line or multi line. Check the following script:

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4

Enable/Disable DIV tags through Javascript

Nauman — Tue, 03 Nov 2009 14:31:49 +0000

Copy/Paste following javascript code snippet.

Copy/Paste following HTML code in BODY tag: