用PHP代替JS玩转DOM的思路及示例代码

事情的起源比较简单,我需要把一个导航页的数据整理好写入数据库。一个比较直观的方法是对html文件进行分析,通用的方法是用php的正则表达式来匹配。但是这样做开发和维护都很困难,代码可读性非常差。

导航页的数据都是规则的排列在DOM树当中的,用JS可以用几个循环轻松的对其进行操作,而且JS需要依赖浏览器,操作数据库很困难。其实PHP就有现成的类库对DOM树种的节点进行增删改查操作,在此做一些笔记。

这里涉及到2个类 DOMDocument 和 DOMXPath。

其实思路比较明确,就是通过DOMDocument将一个html file转换成DOM树的数据结构,再用DOMXPath的实例去搜索这个DOM树,拿到想要特定节点,接下来就可以对当前节点的子树进行遍历,得到想要的结果。

在当前目录下有一个这样一个导航的html文件 "./hao.html"

现在需要得到所有<a>标签的中文内容,php代码如下:


代码如下:

<?php
//将html/xml文件转换成DOM树
$dom = new DOMDocument();
$dom->loadHTMLFile("hao.html");

//得到所有class为fix的dl标签

// example 1: for everything with an id
//$elements = $xpath->query("//*[@id]");

// example 2: for node data in a selected id
//$elements = $xpath->query("/html/body/div[@id='yourTagIdHere']");

// example 3: same as above with wildcard
//$elements = $xpath->query("*/div[@id='yourTagIdHere']");
$xpath = new DOMXPath($dom);
$dls = $xpath->query('//dl[@class="fix"]');

foreach ($dls as $dl) {
$spans = $dl->childNodes;
foreach ($spans as $span) {
echo trim($span->textContent)."\t";
}
echo "\n";
}
?>

输出结果如下:

注意:值得注意的一点是DOMDocument的默认编码方式是Latin,所以在处理utf编码的中文的时候,需要在<head>后面紧跟着填入


代码如下:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

在其他位置,或者是只写上<meta content="charset=utf-8">都是不识别的哦

(0)

相关推荐

  • 用PHP代替JS玩转DOM的思路及示例代码

    事情的起源比较简单,我需要把一个导航页的数据整理好写入数据库.一个比较直观的方法是对html文件进行分析,通用的方法是用php的正则表达式来匹配.但是这样做开发和维护都很困难,代码可读性非常差. 导航页的数据都是规则的排列在DOM树当中的,用JS可以用几个循环轻松的对其进行操作,而且JS需要依赖浏览器,操作数据库很困难.其实PHP就有现成的类库对DOM树种的节点进行增删改查操作,在此做一些笔记. 这里涉及到2个类 DOMDocument 和 DOMXPath. 其实思路比较明确,就是通过DOMD

  • 基于原生JS封装的Modal对话框插件的示例代码

    基于原生JS封装Modal对话框插件,具体内容如下所示: 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ModalPlugin({ //提示的标题信息 title:'系统提示', //内容模板 字符串 /模板字符串/DOM元素对象 template:null, //自定义按钮信息 buttons:[{ //按钮文字 text:'确定', click(){ //this:当前实例 }

  • Node.js实现爬取网站图片的示例代码

    目录 涉及知识点 cheerio简介 什么是cheerio ? 安装cheerio 准备工作 核心代码 示例截图 涉及知识点 开发一个小爬虫,涉及的知识点如下所示: https模块,主要是用户获取网络资源,如:网页源码,图片资源等. cheerio模块,主要用于解析html源码,并可访问,查找html节点内容. fs模块,主要用于文件的读写操作,如保存图片,日志等. 闭包,主要是对于异步操作,对象的隔离保护. cheerio简介 什么是cheerio ? cheerio是为服务器特别定制的,快速

  • 基于JS实现接粽子小游戏的示例代码

    目录 游戏设计 游戏实现 添加粽子元素 粽子掉落 难度选择 开始游戏 总结 端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS 实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,不用担心端午没粽子了. 游戏设计 在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠标移动到粽子上并点击,成功接住粽子,得到积分.在设置面板中,可以设置游戏难度,分为简单.很难.超级难三种等级,不同等级的积分也是不同的,玩家可根据自己的手速进行设置.游戏结束后,可看到自己的成绩.实现出来的效果如下(可

  • JS+Canvas实现接球小游戏的示例代码

    目录 写在最前 git地址 成果展示 实现思路 详细说明 写在最后 写在最前 看了canvas的动画系列,已经抑制不住内心的冲动想写个小游戏了,还是那个套路——多写写,你才能了解它.加上这两天下班后我都没有机会去摸摸篮球,所以就写了个接球的小游戏(准确的说不能叫游戏,太简单了,叫动画吧...). 都是一些基础的实现,有时间你也可以试试,废话说到这里,我们开始吧. git地址 https://github.com/ry928330/ballGame.git 成果展示 实现思路 这里我们采用疑问的句

  • js使用html2canvas实现屏幕截取的示例代码

    整理文档,搜刮出一个js使用html2canvas实现屏幕截取的示例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <

  • js和jquery实现监听键盘事件示例代码

    项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e

  • 使用原生JS实现滚轮翻页效果的示例代码

    一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m

  • three.js 制作动态二维码的示例代码

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src

  • JS实现的DOM插入节点操作示例

    本文实例讲述了JS实现的DOM插入节点操作.分享给大家供大家参考,具体如下: 一 介绍 插入节点通过使用insertBefore()方法来实现. insertBefore()方法将在另一个子节点前插入新的子节点. obj.insertBefore(new,ref) new:表示新的子节点. ref:指定一个节点,在这个节点前插入新的节点. 二 应用 插入节点,本示例在页面的文本框中输入需要插入的文本,然后通过单击"前插入"按钮将文本插入到页面中. 三 完整示例代码: <!DOCT

随机推荐