使用PHP顶替JS有趣DOM

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

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

这里涉及到2个类 DOMDocument 和 DOMXPath

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

写一个最简单的demo

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHVhbnR1YW5scw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

如今须要得到全部<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">哦,不被认可

版权声明:本文博主原创文章,博客,未经同意不得转载。

时间: 2024-08-29 19:32:19

使用PHP顶替JS有趣DOM的相关文章

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

JS and DOM 对象列表

JavaScript 对象(9个) JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Functions JS Events Browser 对象(5个) Window Navigator Screen History Location HTML DOM 对象(4个) DOM Document DOM Element DOM Attribute DOM Event HTML 对象(...) <a> <

解析JS操作DOM

首先,如何操作DOM可大致分为以下几项: 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("div"); var createTextNode = document.createT

Js操作-DOM操作

js学习--DOM操作详解大全 前奏(认识DOM) 一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeName,是只读的. nodeType 节点的类型,返回值:1,元素节点:2,属性节点:3,文本节点.nodeType 是只读的. nodeValue 节点的值,返回一个字符串,指示这个节点的值.元素节点返回 null,属性节点返回属性值,文本节点返回

JS有趣的单线程

一.JS的执行特点 源于单线程的特性, JS在一段时间内只能执行一部分代码, 那么, 当有多块代码需要执行时, 就需要排队等候了. 二.单线程与异步事件 (1) 什么是异步事件? 异步事件是像鼠标点击.计时器释放.XMLHttpRequest请求完成这样的动作, 由于我们不知道它何时执行, 所以, 可以认为它是不同步的(这些说明只能作为帮助理解的参考, O(∩_∩)O). (2) 异步事件是否会受到单线程的影响? 答案是肯定的: 异步事件也必须排队等候(即异步事件对应的JS回调函数, 也必须排队

Js操作DOM的方式及获取浏览器的宽高

我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu

js操作dom的一些基本用法

1.js添加dom元素 2.js移除dom元素 --------------

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点    var createNode = document.createElement("div");    var createTextNod

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el