文档章节

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

大笨牛一只
 大笨牛一只
发布于 2015/11/30 22:51
字数 251
阅读 271
收藏 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
博文 29
码字总数 9188
作品 0
广州
个人站长
前端框架开发指南

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

369yun
2016/03/24
323
0
Java程序员从笨鸟到菜鸟之(八十七)跟我学jquery(三)jquery动态创建元素和常用函数示例

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

长平狐
2012/11/12
42
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
跟我学jquery(三)jquery动态创建元素和常用函数示例 .

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

挨踢人生
2012/07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js 操作cookie

var cookie = {// 设置cookie方法set:function(key, val, time){// 获取当前时间var date = new Date();// 将date设置为n天以后的时间var expiresDays = time;//...

小丶二
12分钟前
0
0
限制root远程登录 su和sudo命令

9月21日任务 3.7 su命令 3.8 sudo命令 3.9 限制root远程登录 对于Linux而言,权限的重要性毋庸置疑!对于普通用户而言无法执行那些只有root用户才能有效的命令,导致工作无法有效进行; 系统...

robertt15
13分钟前
0
0
MQTT协议的初浅认识之通讯级别和持久会话

背景 这是我最近了解MQTT协议的最后一部分内容了,MQTT协议里面的QOS和Keep Alive是两个比较重要的内容。QOS的设置,直接影响了订阅客户端与中间件之间的消息交互行为。而Keep Alive直接影响...

亚林瓜子
16分钟前
1
0
calc

width: calc(100% - 30px); 特别注意:减号左右空格,均不能去掉。 width: calc(100% - 30px);

柴高八斗之父
24分钟前
0
0
Spring Cloud Gateway全局过滤器GlobalFilter:返回消息和重定向

Spring Cloud Gateway的全局过滤器GlobalFilter,顾名思义,声明后会对所有的请求生效,可以用来做权限控制,这里简单记录一下拦截到非法请求后如何返回自定义信息和将请求重定向到指定URL。...

夜雨寄北09
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部