comment on

I'm not familiar with Mojo::DOM but this is how I would do it using HTML::TreeBuilder::XPath. If you don't know them already you will need to learn some Xpath expressions, but that is a useful thing to know.

Note that <i class="fa fa fa-phone"></i> does not actually contain the phone number - it is a FontAwesome element that displays an icon - so you need to go up one level to get the content: $phone_icon->parent->as_text. Same goes for all the other FontAwesome elements.

You may need to add checks for elements that are missing in some members. PS: I had to fix the image source in your example.

use Data::Dumper;
use HTML::TreeBuilder::XPath;

my $data = join '', <DATA>;
my $tree = HTML::TreeBuilder::XPath->new;
$tree->parse($data);
$tree->eof;

my %members;
my @items = $tree->findnodes('//ul[@id="members-list"]/li');
for my $item (@items) {
    my ($member_link) = $item->findnodes('div/div[@class="item-title"]
+/a');
    my $member = $member_link->as_text;
    my ($avatar_img) = $item->findnodes('div[@class="item-avatar"]/a/i
+mg');
    my $avatar = $avatar_img->attr('src');
    my ($phone_icon) = $item->findnodes('div//i[@class="fa fa fa-phone
+"]');
    my $phone = $phone_icon->parent->as_text;
    my ($mobile_icon) = $item->findnodes('div//i[@class="fa fa fa-mobi
+le-phone"]');
    my $mobile = $mobile_icon->parent->as_text;

    $members{$member} = {
        'avatar_url'             => $avatar,
        'fa fa fa-phone'         => $phone,
        'fa fa fa-mobile-phone'  => $mobile,
    };
}
print Dumper(\%members);


__DATA__
<ul id="members-list" class="item-list" role="main">
    <li>
        <div class="item-avatar">
            <a href="https://intra.example.com/coworkers/dantealighier
+i/"><img src="SRCURL"></a>
            <span class="member-role">Sottoscrittore</span>           
+     
        </div> <!-- .item-avatar -->
        <div class="item">
            <div class="item-title">
                <a href="https://intra.example.com/coworkers/dantealig
+hieri/" class="heading"><h3>Dante Alighieri</h3></a>                 
+       
            </div>
                <div class="item-meta"><span class="activity">active 6
+ days ago, 19 hours ago</span></div>
                <div class="woffice-xprofile-list">
                    <span><i class="fa fa fa-phone"></i>011111111</spa
+n>
                    <span><i class="fa fa fa-mobile-phone"></i>3333333
+33</span>
                    <span><i class="fa fa fa-envelope-o"></i>dante.ali
+ghieri@example.com</span>
                    <span><i class="fa fa fa-check"></i>Poets and Writ
+ers</span>
                </div>                
            </div>
        <div class="action"></div>
        <div class="clear"></div>
    </li>        
    
    <li>
        <div class="item-avatar">
            <a href="https://intra.example.com/coworkers/francescopetr
+arca/"><img src="SRCURL"></a>
            <span class="member-role">Sottoscrittore</span>           
+     
        </div> <!-- .item-avatar -->
        <div class="item">
            <div class="item-title">
                <a href="https://intra.example.com/coworkers/francesco
+ptetrarca/" class="heading"><h3>Francesco Petrarca</h3></a>          
+              
            </div>
                <div class="item-meta"><span class="activity">active 7
+ days ago, 22 hours ago</span></div>
                <div class="woffice-xprofile-list">
                    <span><i class="fa fa fa-phone"></i>02222222</span
+>
                    <span><i class="fa fa fa-mobile-phone"></i></span>
                    <span><i class="fa fa fa-envelope-o"></i>francesco
+.petrarca@example.com</span>
                    <span><i class="fa fa fa-check"></i>Poets and Writ
+ers</span>
                </div>                
            </div>
        <div class="action"></div>
        <div class="clear"></div>
    </li>        
</ul>
[download]

Output:

$VAR1 = {
    'Dante Alighieri' => {
        'avatar_url'            => 'SRCURL',
        'fa fa fa-phone'        => '011111111'
        'fa fa fa-mobile-phone' => '333333333'
    },
    'Francesco Petrarca' => {
        'avatar_url'            => 'SRCURL'
        'fa fa fa-phone'        => '02222222',
        'fa fa fa-mobile-phone' => ''
    }
};
[download]

In reply to Re: extracting sub elements from DOM by class by tangent
in thread extracting sub elements from DOM by class by Discipulus

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


"be consistent"
	PerlMonks