I have issues selecting certain elements on a specific web page, querySelector returns null unless I first go through one of the parent element.
I tried chaining them together but still I eventually hit a dead end, .children .childNodes and .childElementCount don't seem to see the children elements.
see console output or screenshot below :
document
.querySelector('[name="tabs"]');
null
document
.querySelector('div[role="main"] > section.active')
.querySelector('[name="tabs"]');
<slot name="tabs">
document
.querySelector('div[role="main"] > section.active')
.querySelector('[name="tabs"]')
.querySelector('flexipage-tab2');
null
document
.querySelector('div[role="main"] > section.active')
.querySelector('[name="tabs"]')
.children;
Object { }
document
.querySelector('div[role="main"] > section.active')
.querySelector('[name="tabs"]')
.childNodes;
Object { }
document
.querySelector('div[role="main"] > section.active')
.querySelector('[name="tabs"]')
.childElementCount;
0
<div class="split-right " data-aura-rendered-by="476:0;p" role="main">
<section role="tabpanel" aria-expanded="true" class="tabContent active oneConsoleTab" data-aura-rendered-by="723:0" data-aura-class="oneConsoleTab" id="721:0">
<!--render facet: 635:0--><!--render facet: 637:0-->
<div tabindex="-1" class="oneWorkspace active hasFixedFooter navexWorkspace" data-aura-rendered-by="641:0" data-aura-class="navexWorkspace" id="633:0">
<style data-aura-rendered-by="642:0"></style>
<span role="presentation" tabindex="0" class="focus-mark accessibility-span" data-aura-rendered-by="644:0"></span>
<div class="wsTabset oneConsoleTabset wsTabBarHidden navexConsoleTabset" data-aura-rendered-by="649:0" data-aura-class="navexConsoleTabset">
<section role="tabpanel" aria-expanded="true" class="tabContent active oneConsoleTab" data-aura-rendered-by="863:0" data-aura-class="oneConsoleTab" id="861:0">
<!--render facet: 823:0--><!--render facet: 828:0--><!--render facet: 831:0--><!--render facet: 839:0-->
<div class="oneWorkspaceTabWrapper" data-aura-rendered-by="841:0" data-aura-class="oneWorkspaceTabWrapper">
<!--render facet: 842:0-->
<!--render facet: 789:0--><!--render facet: 794:0--><!--render facet: 797:0--><!--render facet: 805:0-->
<div class="windowViewMode-maximized active lafPageHost" data-aura-rendered-by="807:0" data-aura-class="lafPageHost">
<style data-aura-rendered-by="816:0" class="forceBrandBand" data-aura-class="forceBrandBand"></style>
<div id="brandBand_2" class="slds-brand-band slds-brand-band_cover slds-brand-band_medium slds-template_default forceBrandBand" data-aura-rendered-by="818:0" data-aura-class="forceBrandBand">
<!--render facet: 819:0-->
<div class="slds-template__container" data-aura-rendered-by="813:0">
<!--render facet: 911:0-->
<div data-aura-rendered-by="913:0" class="oneRecordHomeFlexipage2Wrapper" data-aura-class="oneRecordHomeFlexipage2Wrapper">
<!--render facet: 914:0-->
<div class="recordHomeFlexipage2" data-aura-rendered-by="915:0">
<one-record-home-flexipage2 data-data-rendering-service-uid="287" data-aura-rendered-by="917:0">
<forcegenerated-adg-rollup_component___force-generated__flexipage_-record-page class="adg-rollup-wrapped" style="display: block;">
<forcegenerated-flexipage class="forcegenerated-flexipage-module" style="display: block;" data-page-type="RecordPage">
<record_flexipage-desktop-record-page-decorator style="display: block;" lwc-rjusaruus2-host="">
<div lwc-rjusaruus2="" class="record-page-decorator">
<!---->
<records-record-layout-event-broker lwc-rjusaruus2="">
<slot>
<slot lwc-rjusaruus2="">
<flexipage-record-home-template-desktop2 class="forcegenerated-flexipage-template" lwc-7gup6q4i4vf-host="">
<div lwc-7gup6q4i4vf="" class="slds-grid slds-wrap">
<div lwc-7gup6q4i4vf="" class="slds-grid slds-wrap slds-col slds-size_1-of-1 row row-main">
<div lwc-7gup6q4i4vf="" class="column slds-size_1-of-1 slds-medium-size_8-of-12 slds-large-size_8-of-12 region-main">
<slot lwc-7gup6q4i4vf="" name="main">
<flexipage-component2 data-component-id="flexipage_tabset" data-target-selection-name="flexipage_tabset" slot="main" lwc-7uq5q81tcsp-host="">
<slot lwc-7uq5q81tcsp="">
<flexipage-tabset2>
<div class="slds-tabs_card">
<h2 class="slds-assistive-text">Onglets</h2>
<lightning-tabset class="flexipage-tabset" lwc-53k3k3g5nb9-host="">
<div lwc-53k3k3g5nb9="" class="slds-tabs_default">
<!---->
<!---->
<slot lwc-53k3k3g5nb9="">
<slot name="tabs">
<flexipage-tab2 slot="tabs" role="tabpanel" id="tab-3" class="slds-tabs_default__content slds-show" lwc-e181ppo4iq-host="" aria-labelledby="customTab__item"></flexipage-tab2>
<flexipage-tab2 slot="tabs" role="tabpanel" id="tab-4" class="slds-tabs_default__content slds-hide" lwc-e181ppo4iq-host="" aria-labelledby="customTab2__item"></flexipage-tab2>
<flexipage-tab2 slot="tabs" role="tabpanel" id="tab-5" class="slds-tabs_default__content slds-hide" lwc-e181ppo4iq-host="" aria-labelledby="customTab3__item"></flexipage-tab2>
<flexipage-tab2 slot="tabs" role="tabpanel" id="tab-6" class="slds-tabs_default__content slds-hide" lwc-e181ppo4iq-host="" aria-labelledby="flexipage_tab1__item"></flexipage-tab2>
<flexipage-tab2 slot="tabs" role="tabpanel" id="tab-7" class="slds-tabs_default__content slds-hide" lwc-e181ppo4iq-host="" aria-labelledby="flexipage_tab4__item"></flexipage-tab2>
<flexipage-tab2 slot="tabs" role="tabpanel" id="tab-8" class="slds-tabs_default__content slds-hide" lwc-e181ppo4iq-host="" aria-labelledby="flexipage_tab3__item"></flexipage-tab2>
<flexipage-tab2 slot="tabs" role="tabpanel" id="tab-9" class="slds-tabs_default__content slds-hide" lwc-e181ppo4iq-host="" aria-labelledby="flexipage_tab2__item"></flexipage-tab2>
</slot>
</slot>
</div>
</lightning-tabset>
</div>
</flexipage-tabset2>
</slot>
</flexipage-component2>
</slot>
</div>
</div>
</div>
</flexipage-record-home-template-desktop2>
</slot>
</slot>
</records-record-layout-event-broker>
<!---->
<records-form-footer lwc-rjusaruus2="" class="slds-docked-form-footer" lwc-34n15cmj79s-host="" style="left: 0px;"></records-form-footer>
</div>
<div class="screen-announcer slds-assistive-text" aria-live="assertive" lwc-rjusaruus2=""></div>
</record_flexipage-desktop-record-page-decorator>
</forcegenerated-flexipage>
</forcegenerated-adg-rollup_component___force-generated__flexipage_-record-page>
</one-record-home-flexipage2>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
Is this due to the way the page is constructed ? Is there any workaround ?
querySelector()until after the dynamic elements are created. If you're trying to add event listeners, use event delegation.