Locker service compliant alternative to document.querySelectorAll()?

Question

I'm trying to dynamically update the attributes of a CSS class that is assigned to a bunch of elements in my lightning component.

In order to determine how to update the CSS of these elements, I need to query the CSS attribute values of other elements in my component.

(The specific scenario: I want to have two stickied columns w/ dynamic widths in my table during horizontal scrolling, where the left position of the second column is determined by the width of the first column. Couldn't find a pure CSS solution so relying on javascript to adjust column widths.)

I have two CSS classes assigned to the relevant elements in my HTML table:

.THIS .sticky-col1{
    position:sticky;
    left: 0;
    z-index: 1;
}

.THIS .sticky-col2{
    position:sticky;
}

At first I attempted to run the following method after rendering the component:

onRender : function(component, event, helper){
    var column1items = document.querySelectorAll('.sticky-col1');
    var column2items = documents.querySelectorAll('.sticky-col2');
    for(var i=1; i<column2items.length; i++){
        column2items[i].style.left = column1items[0].style.width + column1items[0].style["padding-right"];
    }
},

But the problem appears to be that Lightning Locker Service prevents direct access to the DOM, and therefore document.querySelectorAll() returns an empty proxy object rather than a list of elements.

Is there a security compliant way to get all the elements in my component that have been assigned a given CSS class?

Answer 1

Valid DOM Access: A component can only traverse the DOM and access elements created by a component in the same namespace.

Valid DOM Access Methods:

• cmp.getElements() : Returns the elements in the DOM rendered by the component.
• cmp.find() :Returns an Array of the components identified by their aura:id attributes.
• cmp.find("aura id").getElement() : Returns the DOM element for the elements within the same component's namespace
• event.getSource().get("v.name") : Returns the name of the element that dispatched the event;

In a nutshell, if you have identified your sticky-colums with aura:id's, you should be able to easily fetch them using cmp.find('the aura id') and combine it with the $A.util class methods (addClass, removeclass, toggleClass, hasClass)

Otherwise, there is no real alternative to querySelectors with Locker Service. You could set a css attribute dynamically if it were inline and use use aura:attributes to modify them dynamically.