文档章节

Ajax抓取页面将html转为dom对象并且获取对象内部的元素

西迷岛主
 西迷岛主
发布于 2015/11/30 22:51
字数 251
阅读 286
收藏 8

html转dom,使用Jquery的一个方法$.parseHTML()可以轻松的实现。

首先我本地虚拟了一个www.test.com的主机环境:

新建一个index.html的网页,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			type: 'GET',
			dataType: 'text',
			url: 'http://www.test.com/baidu.html',
			success: function(res){
				console.log(res);
				var dom = $.parseHTML(res);
				var html = '';
				$(dom).find('#u1 a').each(function(i,item){
					html += '<p>'+$(item).text()+'</p>';
				});
				$('.news').html(html);
			},
			error: function(){
				console.log('网页抓取失败');
			}
		});
	});
</script>
</head>
<body>
    <div class="news"></div>
</body>
</html>

并在相同目录新建一个baidu.html的文件,从百度首页拷贝源码进去。

浏览器打开www.test.com/index.html,可以看到百度首页的导航已经被输出到网页上:

糯米

新闻

hao123

地图

视频

贴吧

登录

设置

更多产品



© 著作权归作者所有

共有 人打赏支持
西迷岛主
粉丝 4
博文 31
码字总数 10263
作品 0
广州
个人站长
私信 提问
前端框架开发指南

Dom是一款专门针对移动端的JS库,集成了大部分常用DOM操作API,你不需要学习任何新的东西,其用法和jQuery几乎是一样的。 创建一个Dom对象很简单只需通过 $ 对象即可 PS. 参数中带有 [ ] 的意...

369yun
2016/03/24
350
0
跟我学jquery(三)jquery动态创建元素和常用函数示例 .

在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解...

挨踢人生
2012/07/27
0
0
Java程序员从笨鸟到菜鸟之(八十七)跟我学jquery(三)jquery动态创建元素和常用函数示例

在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解...

长平狐
2012/11/12
46
0
01-老马jQuery教程-jQuery入口函数及选择器

前言 这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu.com/s5508922.html 1.什么是jQuery? 1.1 ...

aicoder
2017/11/24
0
0
React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公...

阮一峰
2015/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

node.js学习笔记之koa框架和简单爬虫练习

Koa -- 基于 Node.js 平台的下一代 web 开发框架 koa是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用,可以免除重复繁琐的回调...

前端小攻略
20分钟前
3
0
JavaScript中的继承及实现代码

JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一、构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn...

peakedness丶
42分钟前
3
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
55分钟前
16
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
今天
4
0
当区块链遇到零知识证明

本文由云+社区发表 当区块链遇到零知识证明 什么是零知识证明 零知识证明的官方定义是能够在不向验证者任何有用的信息的情况下,使验证者相信某个论断是正确的。这个定义有点抽象,下面笔者举...

腾讯云加社区
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部