LWC : ref and querySelector in LWC Salesforce

Hello friends, today we will explore LWC: ref and querySelector in LWC Salesforce. In the journey of crafting dynamic and responsive applications, understanding and effectively using tools like ref and querySelector are essential. In LWC, the ref attribute refers to a component or an element within a component. This reference can then be used to interact with the component or element programmatically.

Also, check this :

Key Highlights :

1. Use ref when you need a reference to a specific Lightning component. This is useful for interacting with Lightning components directly, especially when you want to modify their properties or invoke their methods.
2. Use querySelector when you need to find and manipulate HTML elements within your component. This is handy for working with standard HTML elements or non-LWC components.

Code :

LWC : ref: This is an easier way to reference and access your LWC elements on the runtime. We will see the performance efficiency of LWC:ref compared with the query selector, as the query selector works with one-by-one selection and LWC: ref directly referenced the object which improves the efficiency and performance of the program.

Child.HTML:

<template
    <lightning-card title="Child Component" icon-name="standard:account">
        <div class="childcss1">
            <p>I'm a Child Component </p>
        </div>
        <p>{handleChild}</p>
        <lightning-input label="Name" lwc:ref="NameRef"></lightning-input>
        <lightning-input label="Age" type="Number" lwc:ref="AgeRef"></lightning-input>
        <lightning-button label="Submit" class="slds-grid slds-var-m-top_medium" onclick={handleSave} variant="brand"></lightning-button>
    </lightning-card>
</template>

Child.JS:

import { LightningElement , api } from 'lwc';

export default class Child extends LightningElement{
    handleChild = new Date();

    @api refresh() {
        this.handleChild = new Date();
    }

    @api handleSave() {
        const nameval = this.refs.NameRef.value
        const ageval = this.refs.AgeRef.value
        console.log('Name--', nameval);
        console.log('Age-', ageval);
    }
} 

Parent.HTML:

<template>
    <lightning-card title="Parent" icon-name="standard:contact">
        <div class="slds-var-m-around_medium">
            <lightning-button label="ParentMe" onclick={handleParent}></lightning-button>
            <lightning-button label="Get Details" onclick={handleDetails}></lightning-button>
            <c-child lwc:ref="childcmp"></c-child>
        </div>
    </lightning-card>
</template> 

Parent.JS:

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement{
    handleParent(){
        console.log('Handle Click -');
        this.refs.childcmp.refresh();    
    }

    handleDetails(){
        this.refs.childcmp.handleSave();
    }
} 

QuerySelector : querySelector is a method provided by the template property in Lightning Web Components. It allows you to query for elements within your component’s template based on CSS selectors.

querySelector is used to select an element, Here element can be div, span, input, or any tag inside LWC component. In querySelector we use class name to uniquely identify a particular element and if there is more than one element we use querySelectorAll and run a loop on it.

Child.HTML :

<template
    <lightning-card title="Child Component" icon-name="standard:account">
        <div class="childcss1">
            <p>Child Component </p>
        </div>
        <p>{handleChild}</p>
        <lightning-input label="Name" type="Text" onchange={name}></lightning-input>
        <lightning-input label="Age" type="Number" onchange={age}></lightning-input>
    </lightning-card>
</template>

Child.JS:

import { LightningElement , api  } from 'lwc'
export default class Child extends LightningElement {
    handleChild = new Date();
    @api name1;
    @api age1;

    @api refresh(){
        this.handleChild = new Date();
    }

    age(event){
        this.age1 = event.target.value;
    }

    name(event){
        this.name1=event.target.value;
    }
   
    @api getDetails(){
        console.log('Name', this.name1);
        console.log('Age', this.age1)
    }       
}

Parent.HTML:

<template
    <lightning-card title="Parent" icon-name="standard:contact">
        <div class="slds-var-m-around_medium">
            <lightning-button label="Get Details" onclick={handleDetails}></lightning-button>
            <c-child></c-child>
        </div>
    </lightning-card>
</template>

Parent.JS:

import { LightningElement } from 'lwc'


export default class Parent extends LightningElement {
    handleDetails(){
        this.template.querySelector('c-child').getDetails();
    }
}

Output :

Reference :

1. Query DOM Elements with Refs
2. querySelector