Get title attribute from <li> element in Lightning Component

Question

I have three "li" elements with unique title. I added aura:id="tabId" to "li" as well. In Lightning controller I'm getting all items using find function:

var tabs = component.find('tabId');

How can I get title attribute in controller for each "li"?

Answer 1

As sfdcfox figured out here attributes of HTML elements are accessible at component.get("v.HTMLAttributes"). This makes it possible to access the values in init methods, where getElement() would not work by design as described here.

So in your case, this would work

for (var li of component.find("tabId")) {
    var title = li.get("v.HTMLAttributes").title;
}

Answer 2

First thing to try is something like this:

var tabs = component.find('tabId');
for (var i = 0; i < tabs.length; i++) {
    var tab = tabs[i];
    if (tab.isValid()) {
        var title = tab.getElement().title;
        ...
    }
}

See DOM Access Containment for some relevant background information.

Answer 3

Try this

var els = component.find('tabId');

/* Will handle all case when you have one or more than one items. */
[].concat(els).forEach(function(el){
    var title = el.get('v.title');
    /* You have access to title here. */
    console.log('title: ', title);
});