🔒 Locked

[web] JavaScript - HTML DOM Tree

Started by jmpeer Jun 29, 2010 at 11:24 PM 4 replies 850+ views

Original Post

Jun 29, 2010 at 11:24 PM

[SOLVED]

Hey.

I have to write a script that can take -any- page and modify -all- of the text based on the text's individual character values.

I have no background in &#106avascript, but I'm stuck with it for this project, and I've never written an algorithm to work through a tree structure, so I don't know whether my error is because my syntax, my algorithm, or my usage of HTML DOM, but I'd really appreciate if someone could help.

var Node = document.documentElement;while(Node.hasChildNodes()){	Node = Node.firstChild;}while(Node != document.documentElement){	while(Node != NULL)	{		if(Node.nodeType == 3)		{			//pass the nodeValue to other function		}		Node = Node.nextSibling;		if(Node != NULL)		{			while(Node.hasChildNodes())			{				Node = Node.firstChild;			}		}	}	Node = Node.previousSibling;	Node = Node.parentNode;}alert("finished");

[Edited by - jmpeer on July 1, 2010 12:21:31 AM]

Kylotan

Jun 30, 2010 at 8:44 AM

Quote:
Original post by jmpeer
...so I don't know whether my error is because...

What error?

jmpeer

Jun 30, 2010 at 2:39 PM

That's precisely what I was trying to figure out.

Error 1.
NULL should be null.

Error 2.
Trying to use .previousSibling on a null Node before moving up to .parentNode.

I revised the script and posted it below.

///////////////////////////////////////////	/////////////////////////////////////////ScanNodeTree();alert("ScanNodeTree successful!");function ScanNodeTree(){	var RootNode = document.documentElement;	var Node = RootNode;	while(Node.hasChildNodes())	{		Node = Node.firstChild;	}		while(Node != RootNode)	{		if(Node.nodeType == 3)		{			CheckNode(Node);		}		while(Node.nextSibling == null)		{			Node = Node.parentNode;			if(Node.nodeType == 3)			{							}			if(Node == RootNode)			{				return;			}		}		Node = Node.nextSibling;		while(Node.hasChildNodes())		{			Node = Node.firstChild;		}	}}function CheckNode(Node){	//to be implemented}

ID Merlin

Jun 30, 2010 at 9:13 PM

Your node traversal function should probably be recursive, so you don't lose track of the next sibling while you traverse lower level child nodes. Google can probably supply you some sample code.

jmpeer

Jul 1, 2010 at 12:15 AM

Thank you.
No further suggestions are needed (I believe).
This is my final product in recursive and iterative form.

///////////////////////////////////////////	Iterative/////////////////////////////////////////SearchTree();alert("SearchTree successful!");function SearchTree(){	var RootTreeNode = document.documentElement;	var TreeNode = RootTreeNode;	while(TreeNode.hasChildNodes())	{		TreeNode = TreeNode.firstChild;	}		while(TreeNode != RootTreeNode)	{		if(TreeNode.nodeType == 3)		{			CheckNode(TreeNode);		}		while(TreeNode.nextSibling == null)		{			TreeNode = TreeNode.parentNode;			if(TreeNode.nodeType == 3)			{							}			if(TreeNode == RootTreeNode)			{				return;			}		}		TreeNode = TreeNode.nextSibling;		while(TreeNode.hasChildNodes())		{			TreeNode = TreeNode.firstChild;		}	}}function CheckNode(TreeNode){	//to be implemented}///////////////////////////////////////////	Recursive/////////////////////////////////////////SearchTree(document.documentElement);alert("SearchTree successful!");function SearchTree(TreeNode){	if(TreeNode.nodeType == 3)	{		CheckNode(TreeNode);	}	TreeNode = TreeNode.childNodes;	for(var Index = 0; Index < TreeNode.length; Index++)	{		SearchTree(TreeNode[Index]);	}}function CheckNode(TreeNode){	//to be implemented}

Wan

Jul 2, 2010 at 7:11 AM

Quote:

Original post by jmpeer

SearchTree(document.documentElement);alert("SearchTree successful!");function SearchTree(TreeNode){	if(TreeNode.nodeType == 3)	{		CheckNode(TreeNode);	}	TreeNode = TreeNode.childNodes;	for(var Index = 0; Index < TreeNode.length; Index++)	{		SearchTree(TreeNode[Index]);	}}function CheckNode(TreeNode){	//to be implemented}

Perhaps useful: you can pass CheckNode as an argument, so it's possible to map other functions in the future without any further modification.

function SearchTree(TreeNode, CheckFunction){	if(TreeNode.nodeType == 3)	{		CheckFunction(TreeNode);	}	TreeNode = TreeNode.childNodes;	for(var Index = 0; Index < TreeNode.length; Index++)	{		SearchTree(TreeNode[Index], CheckFunction);	}}function CheckNode(TreeNode){	//to be implemented}function CheckNodeDifferently(TreeNode){	//to be implemented}SearchTree(document.documentElement, CheckNode);SearchTree(document.documentElement, CheckNodeDifferently);

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.