how to access the value of 'Id' in an anchor tag in the component to JS controller?

Question

I have an anchor tag in the component where i need to get the id of the anchor tag to my JavaScript controller.

Component

<a class="notifLinkTwo" data-toggle="dropdown" aria-haspopup="true" id="notificationDropdownId" aria-expanded="false" onclick="{!c.clickButtonTwo}">

Controller

clickButtonTwo : function(component, event, helper){
    var x = document.getElementById("notificationDropdownId");
         alert('x: '+ x);
}

---

Currently I am not getting the value for the x in the alert.

Answer 1

As per the DOM Access contaiment Guidelines for aura components

Component:

<a class="notifLinkTwo" data-toggle="dropdown" aria-haspopup="true" aura:id="notificationDropdownId" aria-expanded="false" onclick="{!c.clickButtonTwo}">

CONTROLLER

({ clickButtonTwo : function(cmp, event, helper) {
        // access the DOM in c:domLocker
        console.log("notification: ", cmp.find("notificationDropdownId").getElement());
    }
})