Juri Juri - 1 month ago 4
Javascript Question

get all (but only) div anchors

in JavaScript, does "document.anchors" method work with object different than "document", such as a html element (div, etc.)?



document.getElementById('bottone1').addEventListener("click", TagA1, false);
document.getElementById('bottone2').addEventListener("click", TagA2, false);

function TagA1() {
var Lista = document.anchors;
var ListaLunghezza = document.anchors.length;
var MioArray1 = [];
var i;
for (i = 0; i < ListaLunghezza; i++) {
MioArray1[i] = document.anchors[i].innerHTML + ": " + document.anchors[i];
}
document.write(MioArray1.join("<br>"));
}

function TagA2() {
var Div = document.querySelector('#Div');
// var Lista2 = Div.anchors; <=====
}

<a name="TagA1" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link1</a>
<a name="TagA2" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link2</a>
<a name="TagA3" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link3</a>


<div id="Div">
<a name="TagA4" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link4</a>
<a name="TagA5" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link5</a>
<a name="TagA6" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link6</a>
</div>

<br><br>
<button id="bottone1">Tag a - DOCUMENT</button>
<button id="bottone2">Tag a - DIV</button>





For that, we must necessarily use a function or other method (or jQuery)?

Answer

The Element interface doesn't have a documented anchors property, no. (To be fair, doesn't look like document does, either.) Perhaps more tellingly, typeof document.createElement("div").anchors is undefined.

To get all the a elements inside an element, use .querySelectorAll("a") or .getElementsByTagName("a"). (The former is more flexible, it can take any CSS selector; the latter is probably a bit faster, though it's extremely unlikely to matter.)

Here's your example updated to use a common listing function and querySelectorAll (and using a results div rather than document.write; document.write wipes out the page when used after the initial parsing):

document.getElementById('bottone1').addEventListener("click", TagA1, false);
document.getElementById('bottone2').addEventListener("click", TagA2, false);

function showLista(Lista) {
  var ListaLunghezza = Lista.length;
  var MioArray1 = [];
  var i;
  for (i = 0; i < ListaLunghezza; i++) {
     MioArray1[i] = Lista[i].innerHTML + ": " + Lista[i].href;
  }
  document.getElementById("results").innerHTML = MioArray1.join("<br>");
}
function TagA1() {
  showLista(document.getElementsByTagName("a"));
}

function TagA2() {
  showLista(document.getElementById('Div').querySelectorAll('a'));
  // Or this would also work:
  //showLista(document.querySelectorAll('#Div a'));
}
<a name="TagA1" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link1</a>
<a name="TagA2" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link2</a>
<a name="TagA3" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link3</a>


<div id="Div">
  <a name="TagA4" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link4</a>
  <a name="TagA5" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link5</a>
  <a name="TagA6" href="https://jsfiddle.net/rudijuri/knz3n1tg/">link6</a>
</div>

<br><br>
<button id="bottone1">Tag a - DOCUMENT</button>
<button id="bottone2">Tag a - DIV</button>
<div id="results"></div>

Comments