Question

我遇到了下面链接中所述的相同问题，但我正在寻找一种方法来访问那些在页面源中不存在但在开发人员工具中可见的元素（使用jquery）。请提出一些想法。

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

这是实际问题 - 我在sharepoint“Excel web part”中托管了“Powerpivot图表”。每当用户点击嵌入在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>

实际上我试图使用类“ewr-sheetcontainer”来访问div，如

$(".ewr-sheetcontainer")

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

提前致谢， Madhu M。

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

不能在开发人员工具中显示但不在页面源中显示的访问元素

1 个答案: