Get the URLs of all the elements within a div

Question

Get the URLs of all the elements within a div

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-1 votes)

1

I want to copy the urls (href) of all "a" within a div, but it has many nested elements. How would it be to copy it?

This would be the example:

<div id="enlaces">
    <div id="tabla">
        <div >
            <table>
                <tbody>
                    <tr>
                        <td>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <a href="http:www.google.com">></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                        <a href="http://www.facebook.com">

                                        </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <a href="http://www.google.com"></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a href="http://www.google.com"></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <a href="http://www.google.com"></a>
                                        </td>
                                    </tr>
                                    <tr >
                                        <td><a href="http://www.google.com"></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <a href="http://www.google.com"></a>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
</div>

I tried getElemenById , but copy everything. And I just want to copy the "a".

javascript jquery html

asked by hblackpro 13.10.2016 в 00:13

source

4 answers

0

You can use

var elts = document.getElementsByTagName('a');

where you will return an array with all the "a"

answered by 13.10.2016 в 00:54

0

Sorry, I can not comment. I can not understand well what you propose; so if you can let me know and edit the answer based on that.

What I initially understand, is that you want to take all the elements anchor and make a copy of them ... now, I think what you want to do is clone.

For that you can use the "cloneNode" method on each element of the. To select those elements, you can use the method "querySelectorAll":

document.querySelectorAll('div#tabla > a')

That is going to return a NodeList object ( link ) about which you can iterate with a for . To the elements of that list access through an index, as in a normal Array.

Now, the querySelectorAll method receives a CSS selector ( link ). In the previous case, 'div # table > a 'indicates that a NodeList with all the elements to is selected and returned within div with the ID' table '(indicated after the hash / number #).

What remains to be done, is to iterate over that list of nodes, and clone each element. I'm going to assume that you want to get a list of those clones, and I'm going to put it in a function, because I really do not know the context:

'use strict';

const COPY_CHILD_NODES = true; // En caso de que tenga childs, clonarlos tambièn.

const clonedNodes = (css_selector) => {
   let clones = [];
   const nodes = document.querySelectorAll(css_selector);
   for (let node_index = 0; node_index < nodes.length; node_index++) {
      clones.push(nodes[node_index].cloneNode(COPY_CHILD_NODES));
   }
   return clones;
}

const cloned_a = clonedNodes('div#tabla > a');

"cloned_a" would contain the copies of those elements, in a common array, and you should iterate over those clones and do what you want, for example, add them to another element:

cloned_a.forEach(element => {
   someParentElement.appendChild(element);
});

Greetings :) If this is not what you were looking for, please let me know and edit accordingly.

Embrace che n.n

answered by 13.10.2016 в 00:36

-1

jQuery solves it to you in a santiamen, without array or anything.

$('a').each(function(index, el) {
    console.log($(this).attr('href'));
});

a greeting,

answered by 16.10.2016 в 00:31

connection to database Result of 2 queries fetch_assoc in an array

score 2 · Accepted Answer

To select only certain elements you can use document.querySelectorAll() .

For example:

var as = document.querySelectorAll('#tabla a');

That gives you a list of nodes, which is like an array, and you can use that to put them where you need them.

To get only the urls, then you can iterate in the array like this:

var urls = [];
for (var i = 0; i < as.length; i++) {
   urls.push(as[i].href);
}