Problem accessing div elements

Question

<div id="nav">
    <ul id="linkselect">
      <li class="important" ><a href="home.html">Home</a></li>
      <li><a href="rlsdoc.html" >Release Document</a></li>
      <li><a href="dtadmp.html">Data Dump</a></li>
      <li><a href="facsetup.html">Facility Setup</a></li>
      <li><a href="dbuelem.html">DBU Elimination</a></li>
      <li><a href="contact.html">Contact us</a></li>
    </ul>
</div>

I want to put all the links (Home, Release Document etc) of div "nav" into a array so that I can iteratively use them. Please help me with the JavaScript code for this. Thanks in advance.

be more precise when you ask a question : do you need the text or the link of the "a" node ? Or do you want the node ? — Jerome Cance
– Jerome Cance, Commented Aug 11, 2011 at 10:52

Jerome Cance · Accepted Answer · 2011-08-11 10:29:20Z

3

document.getElementById("nav").getElementsByTagName("a")

this will return a node list that contains all "a" nodes

answered Aug 11, 2011 at 10:29

Jerome Cance

8,20312 gold badges55 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user447356 · Accepted Answer · 2011-08-11 10:29:53Z

0

This should do what you need with pure JavaScript:

window.onload = function() {
    var data = [];
    var oDiv = document.getElementById("nav");
    var links = oDiv.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++)
        data.push(links[i].innerHTML);
    alert(data.join("\n"));
};

Live test case.

answered Aug 11, 2011 at 10:29

user447356

Comments

jAndy · Accepted Answer · 2011-08-11 10:29:12Z

0

We could use a combination of .querySelectorAll() to query the desired anchors and Array.prototype.forEach to iterate over those static element references.

var anchors = document.querySelectorAll('#linkselect a'),
    each    = [].forEach;

each.call( anchors, function( a ) {
    console.log( a );
});

Note: Both methods are not available in "old'ish" browsers, but are easily to create, lots of shims available.

answered Aug 11, 2011 at 10:29

jAndy

237k57 gold badges313 silver badges363 bronze badges

2 Comments

Jerome Cance Over a year ago

This does not run in some browser, isn't it ?

user447356 Over a year ago

@Jerome IE7 and below won't support the forEach for arrays, yep.

codeandcloud · Accepted Answer · 2011-08-11 10:29:38Z

0

Try this.

Javascript

var items = [];
var anchors = document.getElementById("nav").getElementsByTagName("a");
for(var i = 0; i<anchors.length; i++){
    items.push(this.href);
}

jQuery

var items = [];
$("#nav a").each(function(){
    items.push(this.href);
});

answered Aug 11, 2011 at 10:29

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

2 Comments

codeandcloud Over a year ago

@Shadow Wizard: yep. did not read properly. my bad :) but jquery is amazing and does all wonderful things

user447356 Over a year ago

lol @[linked post] - nice one! Anyhow, while I agree jQuery is good and great it's not Command of God.. sometimes good old plain JavaScript will be better to use. :)

Jamiec · Accepted Answer · 2011-08-11 10:34:08Z

-1

jQuery:

$('#linkselect li a')

plain javascript:

document.getElementById('linkselect').getElementsByTagName("a")

edited Aug 11, 2011 at 10:34

answered Aug 11, 2011 at 10:29

Jamiec

136k15 gold badges143 silver badges202 bronze badges

1 Comment

Jerome Cance Over a year ago

It does not select all "a" nodes but "li" nodes

Collectives™ on Stack Overflow

Problem accessing div elements

5 Answers 5

Comments

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related