4

I am trying to get an html element through it's class name within in a lightning component controller.

Something that will work like document.getElementsByClassName

component.find("aura:id") won't help me - I need to get an existing html element, not something that I am generating.

Is there any option?

Thanks

UPDATE:

I use this component from within a lightning component quick action on the contact object:

Markup:

<aura:component implements="force:lightningQuickAction,force:hasRecordId,flexipage:availableForAllPageTypes">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div class="myTest" title="testTitle" >
        <div class="test2" >
            test
            <a href="test" >test</a>
        </div>
    </div>

</aura:component>

Controller:

({
    doInit : function(component, event, helper) {

        var elements = document.getElementsByClassName("myTest");
        console.log("elements.length: " + elements.length);
        for (var i=0; i<elements.length; i++) {
            console.log(elements[i].innerHTML);
        }
    }
})

And I get an empty array - elements.length is 0.

What can be the problem?

  • 1
    document.getElementsByClassName should be working in Lightning component controller. You may want to be specific about your issue. – Santanu Halder Jan 11 '17 at 8:34
  • I have updated the question with a specific use case and code snippet – Itai Shmida Jan 11 '17 at 12:02
4

init handler is called long before DOM is rendered in the view by the component. The appropriate place to access DOM, is in Renderer.

Add afterRender method which in turn gets called once the DOM rendering is done:

    afterRender : function(cmp,helper){
        this.superAfterRender();
        var elements = document.getElementsByClassName("myTest");
        console.log("elements.length: " + elements.length);
        for (var i=0; i<elements.length; i++) {
            console.log(elements[i].innerHTML);
        }
    }
|improve this answer|||||
  • thanks, I have tried to do that, and I can get the element class from within my component successfully. But when I try to get an element from outside my component (I am inside a lightning component quick action), I get an empty array. Do you know why is that? – Itai Shmida Jan 11 '17 at 21:09
  • @ItaiShmida Where are actually accessing the DOM, is like you are trying to access the child component's DOM from your parent component(i.e which is quick action component)?. If this is the actual issue, then you should included this info in the question. Only if you include scenario which details the actual problem, we could help you better. – Praveen Jan 12 '17 at 7:12
  • Thanks for my current question - you have answered it and the answer is good. what I am trying to achieve is this Question and I understand it is not possible. Thanks for all your help – Itai Shmida Jan 12 '17 at 8:07
  • this is not working with lockerservice on – pranav prashant Jun 27 '17 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.