无法访问开发人员工具中显示的元素，但不在页面源中 [英] Cant access element that are shown in developer tools but not in page source

问题描述

我有同样的问题，在下面的链接中说明，但我正在寻找一种方法来访问这些元素（使用jquery），这些元素不在页面源中，但在开发人员工具中可见。请提出一些建议。

以下是实际的问题 -
我在SharePoint的Excel Web部件中托管了Powerpivot图表。每当用户点击图表（这是开发人员工具中显示的img标签）时，嵌入到excel webpart中，我已经缩小了img。

在开发人员工具中，我看到下面的代码：

 < div id =ctl00ctl00_sheetContentDivclass =ewr-sheetcontainer ewr-grdblkcontainer ewa-scrollbarsrole =presentation> 
< div class =ewafoid =ctl00_ctl35_g_ec06c24e_5aac_4ae3_af75_93564d395086_ctl01_ctl00__0_1.11.0style =top：133px; left：327px; width：480px; height：274px; z-index：50;> 
< div class =ewa-fo-img-divstyle =visibility：visible;> 
 < / div> 
< / div> 
< / div> 
  

在View Source中，我只看到了外部div：

 < div id =ctl00ctl00_sheetContentDivclass =ewr-sheetcontainer ewr-grdblkcontainer ewa-scrollbarsrole =presentation>< / div> 
  

事实上，我正尝试使用其类ewr-sheetcontainer来访问div，如

  $（。ewr-sheetcontainer）
  

但它正在返回它在视图源代码中的内容。

预先感谢
Madhu M。

解决方案

如果一个元素存在于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 或其他确保内容已被加载的函数中。

<$ $（$。$ $ $ $''$ $ $ $ $ $'$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ >

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.

解决方案

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')
})

这篇关于无法访问开发人员工具中显示的元素，但不在页面源中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！