Member Avatar for anital

Hi,

I am new to Javscript, and I need some help in accessing a set of <p> tags after <a> tag using getElementsByTagName('p'/'a'); I want to access the <p> tags after <a name="PAGE2">, <a name="PAGE3"> etc.

This is what the HTML body has:

<p class="verdana">First Paragraph </p>
<p class="verdana">Second Paragraph </p>

<a name="PAGE2"></a>
<p class="verdana">Six Paragraph </p>
<p class="verdana">Seven Paragraph </p>
<a name="PAGE3"></a>
<p class="verdana">Ten Paragraph </p>
<p class="verdana">Eleven Paragraph </p>
===
var aList = document.getElementsByTagName('a');
  for(var i=0; i<aList.length; i++){
    if(aList[i].name.indexOf('PAGE')!=-1){
    //alert(aList[i].name);
    var nextP = document.getElementsByTagName("a")[i].nextSibling;//getting undefined here

Can you suggest any way of doing this?

Thanks,
Anita

Edited by TrustyTony because: fixed formatting
  • 3 Contributors
  • 2 Replies
  • 115 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for ~s.o.s~

This is because you are forgetting that whitespaces form a part of the DOM. The whitespace between your <a> and <p> elements (a newline in your case) forms a Text Node. To get hold of an element you would have to do something like this:

<!-- First.html -->

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>First</title>
	<script type="text/javascript" src="Script.js"></script>
</head>
<body id="firstBdy">
	<p class="verdana">First Paragraph</p>
	<p class="verdana">Second Paragraph</p>
	<a name="PAGE2"></a>
	<p class="verdana" name="firstP">Six Paragraph</p>
	<p class="verdana">Seven Paragraph</p>
	<a name="PAGE3"></a>
	<p class="verdana" name="verdanaP">Ten Paragraph</p>
	<p class="verdana">Eleven Paragraph</p>
	<br />
	<a href = "#" onclick = "showAll(findP('a', 'PAGE'));">Click me</a>
</body>
</html>
/* Script.js */

/**
 * @author sos
 * @param {Node} rootElem The start point
 * @param {String} pattern The name pattern to search for
 * @returns The array of nextSiblings
 * @type Array
 * @see #findNextNode
 */
function findP(rootElem, pattern) {
	var pList = [];
	var aList = document.getElementsByTagName(rootElem);
	for(var i = 0; i < aList.length; ++i) {
		var e = aList[i];
		if(e.name.indexOf(pattern) != -1) {
			var nextP = findNextNode(e, 1 /* ELEMENT_NODE */);
			if(nextP) {
				pList[pList.length] = nextP;
			}
		}
	}
	return(pList);
}

/**
 * Finds a node of the type <i>nodeType</i>
 *
 * @author sos
 * @param {Number} nodeType
 * @returns The node of type nodeType of null if not found.
 * @type Node
 */
function findNextNode(root, nodeType) {
	var e = root;
	do {
		e = e.nextSibling;
	} while(e && e.nodeType != nodeType);
	return(e);
}

/**
 * Displays the contents of the array of Nodes
 *
 * @author sos
 * @param {Array} arr
 */
function showAll(arr) {
	if(!arr) {
		return;
	}
	for(var i = 0, max = arr.length; i < max; ++i) {
		var e = arr[i];
		if("innerHTML" in e) {
			alert("<p" + i + ">  -> " + e.innerHTML)
		}
	}
}

Reading the XML DOM tutorial would be good thing.

Member Avatar for hielo

Since you are using <a> as an anchor rather than as a link, you could instead change the <a name="PAGE2">
to a <div id="PAGE2"> AND wrap it around all the relevant <p> elements. Essentially you are grouping the <p> elements with a <div>. If using the <div id="PAGE2"> "breaks" your layout, you can instead try this:
<div id="PAGE2" style="display:inline;">...</div>

With this change, a link that used to take the user to #PAGE2 with the <a name="PAGE2"> will still work with the <div id="PAGE2">. Notice that the div uses an id, not a name.

With this setup, the javascript should be similar to what you had. Here is a complete example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>
<head>
<title></title>
<script type="text/javascript"><!--
	function getChildren(parentNode, childrenType)
	{
		var ingrates=null;
		if( typeof(parentNode)=="string" )
			parentNode = document.getElementById(parentNode);
		if( parentNode )
		{
			ingrates = parentNode.getElementsByTagName(childrenType);
		}
	return ingrates;
	}
	
	window.onload= function(){
		var x = getChildren("PAGE2", "p") || [];
		if( x.length )
		{ 
			var data = "";
			var i=-1;
			while(x[++i])
			{
				data += x[i].innerHTML +"\n";
			}
			alert("Children of Page2: " + x.length + "\n"+data);
		}
		else
		{
			alert("No kids for PAGE2");
		}
		var p3=document.getElementById("PAGE3")
		var y = getChildren( p3,"p") || [];
		alert("Children of Page3: " + y.length);
	}
	//--></script>
</head>
<body>
	<div id="PAGE2">
		<p class="verdana">Six Paragraph </p>
		<p class="verdana">Seven Paragraph </p>
		<p class="verdana">Eight Paragraph </p>
		<p class="verdana">Nine Paragraph </p>
	</div>
	<div id="PAGE3">
		<p class="verdana">Ten Paragraph </p>
		<p class="verdana">Eleven Paragraph </p>
	</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.