Элемент доступа Cant, который отображается в инструментах разработчика, но не в источнике страницы

Question

У меня такая же проблема, как указано в ссылке ниже, но я ищу способ доступа к этим элементам (с использованием jquery), которые отсутствуют на странице но видны в инструментах разработчика. Пожалуйста, предложите несколько идей.

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

Вот актуальная проблема - я принимал «PowerPivot график» в «Excel SharePoint веб-части» .Whenever пользователь нажмет на графике (который является IMG тег показано инструменты разработчика), который встроенный в excel webpart, у меня есть масштаб, который img.

В инструментах разработчика я вижу ниже код:

<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> 

В View Source я вижу только внешний DIV:

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

На самом деле я пытаюсь получить доступ к DIV, используя свой класс «EWR -sheetcontainer "как

$(".ewr-sheetcontainer") 

Но он возвращает то, что имеет в наличии источник.

Спасибо заранее, Мадху М.

Answer 1

Если элемент присутствует в Devtools, то вы должны быть в состоянии получить доступ к ним со стандартными методами.

В примере, приведенном в вашей ссылке, если у нас есть

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

<tbody> не в исходном коде. Однако, это интерпретируется браузером как:

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

Вы все еще можете использовать CSS или JavaScript (JQuery) селекторы для доступа <tbody>.

JQuery

$('#mytable tbody')... 

CSS

#mytable tbody { ... } 

Если этот пример не относится к вам, то, пожалуйста, напишите Ваше соответствующий HTML для нас посмотреть более внимательно.

---

С вашим обновленным вопросом, я предполагаю, что вы пытаетесь выбрать этот родительский контейнер, прежде чем в нем будут какие-либо дети. Попробуйте обернуть ваш селектор в document.ready или какой-либо другой функции, которая обеспечит загрузку содержимого.

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