chrome插件：提取页面数据

最新推荐文章于 2024-05-23 09:13:51 发布

cibirii

最新推荐文章于 2024-05-23 09:13:51 发布

阅读量1.1w

点赞数

分类专栏： chrome javascript jQuery

本文链接：https://blog.csdn.net/sinat_26035063/article/details/46007425

版权

近期在做chrome插件，需要提取页面里的一些数，简单说就是企业版微博的后台数据，因为微博不提供导出功能。

最开始是用php完成的，但是每次都需要先把页面代码保存下来，再进行提取，很麻烦。chrome插件可以和页面DOM交互，看起来很方便，所以开始学着写。javascript和jQuery都是边学习边写。

以下代码实现了把需要的数据提出来，需要补充xmlHttp部分。

<script type="text/javascript" charset="UTF-8" src="http://chenbinx.cn/kaiguan/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("span.main_title").click(function(){
		console.log("执行了！");
		var m=$("[class='S_line2 W_tc fst']");
		time=m[0];//选取第一个节点
		console.log("日期为："+time.innerText);//why
		var content=nextSibling(time);//获取兄弟节点
		console.log("博文内容为："+content.innerText);
		var read=nextSibling(content);
		console.log("博文阅读数为："+read.innerText);
		var zan=getFirst(nextSibling(read));//获取下一个兄弟的第一个孩子节点
		console.log("转评赞为："+zan.innerText);
		var clicknum=nextSibling(zan);//获取这个孩子的下一个兄弟
		console.log("短链点击为："+clicknum.innerText);
	})
})

function getFirst(elem){  
    for(var i=0,e;e=elem.childNodes[i++];){  
        if(e.nodeType==1)  
            return e;  
    }         
}  

	//下一个兄弟节点
	function nextSibling(node) {
            var tempLast = node.parentNode.lastChild;
            if (node == tempLast) return null;
            var tempObj = node.nextSibling;
            while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
                tempObj = tempObj.nextSibling;
            }
            return (tempObj.nodeType==1)? tempObj:null;
        }
        //前一个兄弟节点
        function prevSibling(node) {
            var tempFirst = node.parentNode.firstChild;
            if (node == tempFirst) return null;
            var tempObj = node.previousSibling;
            while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
                tempObj = tempObj.previousSibling;
            }
            return (tempObj.nodeType==1)? tempObj:null;
        }    
</script>

这里把需要提取数的源代码也附上

<body>
<div class="E_PCD_chart2">
    <div class="WB_cardtitle_b S_line2">
      <h4 class="obj_name">
        <span class="main_title W_fb W_f14">博文分析</span>
        <span class="subtitle S_txt2">
          <span class="W_icon icon_askS" action-type="layerIcon" action-data="t=2"></span>
        </span>
      </h4>
              <div class="opt_page">
          <span class="interval">
            <a class="S_txt2" href="javascript:;" action-type="vote" action-data="moduleid=2&attitude=1" suda-uatrack="key=DataService&value=121">
              <em class="EM_icon EM_icon_praised_b"></em>
              有用
            </a>
          </span>
          <span class="interval">
            <a class="S_txt2" href="javascript:;" action-type="vote" action-data="moduleid=2&attitude=0" suda-uatrack="key=DataService&value=122">
              <em class="EM_icon EM_icon_praised_d"></em>
              无用
            </a>
          </span>
        </div>
          </div>
        <div class="WB_innerwrap" node-type="articlesList">
              <table class="EM_table">
          <colgroup>
            <col width="12%">
            <col width="37%">
            <col width="12%">
            <col>
            <col width="9%">
          </colgroup>
          <thead>
            <tr>
              <th class="S_line2 S_txt2 W_tc fst">发布时间</th>
              <th class="S_line2 S_txt2">博文内容</th>
              <th class="S_line2 S_txt2">博文阅读数</th>
              <th class="S_line2 S_txt2 W_tc">
                <span>互动数</span>
                <i class="ann c1"></i>
                <span>转评赞</span>
                <i class="ann c2"></i>
                <span>短链点击</span>
              </th>
              <th class="S_line2 S_txt2 lst">
                操作
                <span class="W_icon icon_askS" action-type="layerIcon" action-data="t=1"></span>
              </th>
            </tr>
          </thead>
          <tbody>
                          <tr>
                <td class="S_line2 W_tc fst">
                  <p>2015-05-24 21:39</p>
                </td>
                <td class="S_line2">
                  <a href="http://weibo.com/1854902371/CjmjFoKBD" target="_blank" class="S_txt1">#520爱尚我# 呛口同款西班牙芭蕾新履，Pretty Ballerinas大促5折...</a>
                </td>
                <td class="S_line2">7564</td>
                <td class="S_line2">
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">6</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c1" style="width:2.52%;"></i>
                      </span>
                    </dd>
                  </dl>
                  <dl class="EM_stripe clearfix">
                    <dt class="W_fl W_tr">12</dt>
                    <dd class="W_fl">
                      <span class="stripe">
                        <i class="inner c2" style="width:5.04%;"></i>
                      </span>
                    <

最低0.47元/天解锁文章

cibirii

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
chrome插件：提取页面数据

近期在做chrome插件，需要提取页面里的一些数，简单说就是企业版微博的后台数据，因为微博不提供导出功能。最开始是用php完成的，但是每次都需要先把页面代码保存下来，再进行提取，很麻烦。chrome插件可以和页面DOM交互，看起来很方便，所以开始学着写。javascript和jQuery都是边学习边写。以下代码实现了把需要的数据提出来，需要补充xmlHttp部分。$(documen
复制链接

扫一扫