AnsweredAssumed Answered

Accessing nested elements

Question asked by franklin.alexander on Mar 20, 2018
Latest reply on Mar 27, 2018 by franklin.alexander

I am trying to access a table that is nested fairly deeply in a feature info panel to loop through the rows and delete any fields that have null values. The table is from the feature info panel in the nearme widget which shows the attributes of a selected feature.

<div class="dijitContentPane esriCTFeatureInfo" id="dijit_layout_ContentPane_0" widgetid="dijit_layout_ContentPane_0">
    <div class="dijitContentPane esriCTPopupInfo" id="dijit_layout_ContentPane_1" widgetid="dijit_layout_ContentPane_1">
        <div class="esriViewPopup" id="esri_dijit__PopupRenderer_0" widgetid="esri_dijit__PopupRenderer_0">
            <div class="mainSection">
                <div class="header" dojoattachpoint="_title">Animis Foundation</div>
                <div class="hzLine"></div>
                <div dojoattachpoint="_description">
                    <table width="100%"></table> //need to access this table
                </div>
                <div class="break"></div>
            </div>
        <div class="attachmentsSection hidden">...</div>
        <div class="mediaSection hidden">...</div>
        <div class="editSummarySection hidden" dojoattachpoint="_editSummarySection">...</div>
        </div>
        </div>
    </div>
</div>

 

Here is my code:

var featureInfo = document.querySelector(".esriCTFeatureInfo");
var table = featureInfo.getElementsByTagName('table'); returns HTMLCollection[]
var table = featureInfo.getElementsByTagName('table')[0]; returns undefined

 

Don't know why I am getting undefined when I add the index since the table is at index 0 and I know the table is populated. Unless maybe the console.log statement is being called before the table gets added, but if that were the case, wouldn't I get an 'undefined' with or without the index? 

Outcomes