homepage Welcome to WebmasterWorld Guest from 54.211.190.232
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
accessing <p> tags after <a> in html document
accessing a set of <p> tags after <a> tag using getElementsByTagName('a')
anital




msg:3528758
 2:03 am on Dec 16, 2007 (gmt 0)

Hi,

I need some help in accessing a set of <p> tags after <a> tag using getElementsByTagName('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,

 

Fotiman




msg:3529005
 6:08 pm on Dec 16, 2007 (gmt 0)

In your example, I think the "nextSibling" is a text node containing the newline character... the newline between your <a> and <p> nodes.

My suggestion would be to use the YAHOO UI Library's DOM Utility for this. It has a method that returns only the "element" siblings. For example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<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>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<script type="text/javascript">
YAHOO.util.Event.on(window, 'load', function() {
var aList = document.getElementsByTagName('a');
for (var i = 0; i < aList.length; i++) {
if (aList[i].name.indexOf('PAGE')!= -1) {
var str = aList[i].name + "\n";
for (var sibling = YAHOO.util.Dom.getNextSibling(aList[i]); null!= sibling && sibling.tagName == "P"; sibling = YAHOO.util.Dom.getNextSibling(sibling) ) {
str += "\n" + sibling.innerHTML + "\n";
}
alert(str);
}
}
});
</script>
</body>
</html>


XtendScott




msg:3529501
 3:02 pm on Dec 17, 2007 (gmt 0)

Fotiman is probably correct about the textNode or EmptySpace.

Here is a simple example of how to move to the nextSibling and check to see if it is a TextNode or nodeType 3.

function myFunction() {
vSibling = document.getElementById("first").nextSibling
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox
vSibling = vSibling.nextSibling;
};

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved