Cant access element that are shown in developer tools but not in page source

问题

I have the same problem that is stated in below link, but i am looking for a way to access those elements (using jquery) that are not present in page source but are visible in developer tools. Please suggest some ideas.

Why do some elements in Chrome Developer Tools 'elements' tab not appear in 'view page source?'

Here is the actual problem - I have hosted "Powerpivot chart" in sharepoint "Excel web part".Whenever user clicks on the chart(which is an img tag shown in developer tools) that is embedded in excel webpart, I have zoomout that img.

In Developer tools i see below code:

<div id="ctl00ctl00_sheetContentDiv" class="ewr-sheetcontainer ewr-grdblkcontainer ewa-scrollbars" role="presentation">
    <div class="ewafo" id="ctl00_ctl35_g_ec06c24e_5aac_4ae3_af75_93564d395086_ctl01_ctl00__0_1.11.0" style="top: 133px; left: 327px; width: 480px; height: 274px; z-index: 50;">
        <div class="ewa-fo-img-div" style="visibility: visible;">   
            <img src="http://mydummyserverlink" title="Excel chart or image" alt="Excel chart or image" onerror="_ewa_oile(this,'Failed to download chart or image');" style="width: 100%; height: 100%;        border: 0px; display: block;" usemap="#ctl00_ctl35_g_ec06c24e_5aac_4ae3_af75_93564d395086_ctl01_ctl00_imagemap_1.11.0_3"/>
        </div>
    </div>
</div>

In View Source I see only the outer div:

<div id="ctl00ctl00_sheetContentDiv" class="ewr-sheetcontainer ewr-grdblkcontainer ewa-scrollbars" role="presentation"></div>

In fact I am trying to access the div using its class "ewr-sheetcontainer" like

$(".ewr-sheetcontainer")

But it is returning what it has in view source.

Thanks in advance, Madhu M.

回答1:

If an element is present in devtools, then you should be able to access them with standard methods.

With the example given in your link, if we have

<table id='mytable'>
    <td>cell1</td>
    <td>cell2</td>
</table>

<tbody> is not in the original code. However, it is interpreted by the browser as:

<table id="mytable">
    <tbody>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
        </tr>
    </tbody>
</table>

You can still use CSS or JavaScript (jQuery) selectors to access <tbody>.

jquery

$('#mytable tbody')...

css

#mytable tbody { ... }

If this example isn't relevant to you, then please post your relevant HTML for us to look at more closely.

With your updated question, my guess is that you are trying to select that parent container before it has any children in it. Try wrapping your selector in a document.ready or some other function that would make sure the content is already loaded.

$(document).ready(function(){
    $('.ewr-sheetcontainer')
})

来源：https://stackoverflow.com/questions/28589025/cant-access-element-that-are-shown-in-developer-tools-but-not-in-page-source

标签

javascript

jquery

html

google-chrome

developer-tools