实从PHP5开始,PHP就为我们提供了一个强大的解析和生成XML相关操作的类,也就是我们今天要讲的 DOMDocument 类。不过我估计大部分人在爬取网页时还是会喜欢用正则去解析网页内容,学了今天的这个类下回就可以尝试下使用这个PHP自带的方式来进行解析分析了。
// 解析 HTML
$baidu = file_get_contents('https://www.baidu.com');
$doc = new DOMDocument();
@$doc->loadHTML($baidu);
// 百度输出框
$inputSearch = $doc->getElementById('kw');
var_dump($inputSearch);
// object(DOMElement)#2
// ....
echo $inputSearch->getAttribute('name'), PHP_EOL; // wd
// 获取所有图片的链接
$allImageLinks = [];
$imgs = $doc->getElementsByTagName('img');
foreach($imgs as $img){
$allImageLinks[] = $img->getAttribute('src');
}
print_r($allImageLinks);
// Array
// (
// [0] => //www.baidu.com/img/baidu_jgylogo3.gif
// [1] => //www.baidu.com/img/bd_logo.png
// [2] => http://s1.bdstatic.com/r/www/cache/static/global/img/gs_237f015b.gif
// )
// 利用 parse_url 分析链接
foreach($allImageLinks as $link){
print_r(parse_url($link));
}
// Array
// (
// [host] => www.baidu.com
// [path] => /img/baidu_jgylogo3.gif
// )
// Array
// (
// [host] => www.baidu.com
// [path] => /img/bd_logo.png
// )
// Array
// (
// [scheme] => http
// [host] => s1.bdstatic.com
// [path] => /r/www/cache/static/global/img/gs_237f015b.gif
// )
是不是感觉好清晰,好有面向对象的感觉。就像第一次使用 ORM库 来进行数据库操作一样的感觉。我们一段一段来看。
$baidu = file_get_contents('https://www.baidu.com');
$doc = new DOMDocument();
@$doc->loadHTML($baidu);
首先是加载文档内容,这个比较好理解,直接使用 loadHTML() 方法加载 HTML 内容。它还提供了其它的几个方法,分别是:load() 从一个文件加载XML;loadXML() 从字符串加载XML;loadHTMLFile() 从文件加载HTML。
// 百度输出框
$inputSearch = $doc->getElementById('kw');
var_dump($inputSearch);
// object(DOMElement)#2
// ....
echo $inputSearch->getAttribute('name'), PHP_EOL; // wd
接下来我们使用和前端 JS 一样的 DOM 操作API来操作HTML里面的元素。这个例子中就是获取百度的文本框,直接使用 getElementById() 方法获得id为指定内容的 DOMElement 对象。然后就可以获取它的值、属性之类的内容了。
// 获取所有图片的链接
$allImageLinks = [];
$imgs = $doc->getElementsByTagName('img');
foreach($imgs as $img){
$allImageLinks[] = $img->getAttribute('src');
}
print_r($allImageLinks);
// Array
// (
// [0] => //www.baidu.com/img/baidu_jgylogo3.gif
// [1] => //www.baidu.com/img/bd_logo.png
// [2] => http://s1.bdstatic.com/r/www/cache/static/global/img/gs_237f015b.gif
// )
// 利用 parse_url 分析链接
foreach($allImageLinks as $link){
print_r(parse_url($link));
}
// Array
// (
// [host] => www.baidu.com
// [path] => /img/baidu_jgylogo3.gif
// )
// Array
// (
// [host] => www.baidu.com
// [path] => /img/bd_logo.png
// )
// Array
// (
// [scheme] => http
// [host] => s1.bdstatic.com
// [path] => /r/www/cache/static/global/img/gs_237f015b.gif
// )
这一段例子则是获取HTML文档中所有的图片链接。相比正则来说,是不是方便很多,而且代码本身就是自解释的,不用考虑正则的匹配失效的问题。配合另外一个PHP中自带的 parse_url() 方法也能非常方便地对链接进行分析,提取自己想要的内容。
XML的解析和对HTML的解析也是类似的,都使用 DOMDocument 和 DOMElement 提供的这个方法接口就可以很方便的进行解析了。那么我们想要生成一个标准格式的XML呢?当然也非常的简单,不需要再去拼接字符串了,使用这个类一样的进行对象化的操作。
// 生成一个XML文档
$xml = new DOMDocument('1.0', 'UTF-8');
$node1 = $xml->createElement('First', 'This is First Node.');
$node1->setAttribute('type', '1');
$node2 = $xml->createElement('Second');
$node2->setAttribute('type', '2');
$node2_child = $xml->createElement('Second-Child', 'This is Second Node Child.');
$node2->appendChild($node2_child);
$xml->appendChild($node1);
$xml->appendChild($node2);
print $xml->saveXML();
/*
<?xml version="1.0" encoding="UTF-8"?>
<First type="1">This is First Node.</First>
<Second type="2"><Second-Child>This is Second Node Child.</Second-Child></Second>
*/
其实只要有一点点的前端 JS 的基础都不难看出这段代码的含义。使用 createElement() 方法创造 DOMElement 对象,然后就可以为它添加属性和内容。使用 appendChild() 方法就可以为当前的 DOMElement 或者 DOMDocument 添加下级节点。最后使用 saveXML() 就能够生成标准的XML格式内容了。
通过上面两个简单的小例子,相信大家已经对这个 DOMDocument 操作XML类文件解析的方式非常感兴趣了。不过相对于正则解析的方式它们的性能有多大的差异并没有找到相关的测试,不过一般正常的情况下网站的HMTL文档都不会太大,毕竟各个网站也会考虑自身的加载速度,如果文档非常大的话用户体验也会很差,所以这套接口用来进行日常爬虫的分析处理工作基本是没有任何问题的。
测试代码: https://github.com/zhangyue0503/dev-blog/blob/master/php/202002/source/PHP%E4%B8%AD%E4%BD%BF%E7%94%A8DOMDocument%E6%9D%A5%E5%A4%84%E7%90%86HTML%E3%80%81XML%E6%96%87%E6%A1%A3.php
参考文档: https://www.php.net/manual/zh/class.domdocument.php
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=新样式
下面的例子会改变 <p> 元素的样式:
实例
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>
使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件:
元素被点击。
页面加载完成。
输入框被修改。
……
在接下来我介绍关于事件的知识。
本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:
实例
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
档对象模型(Document Object Model,DOM)是一种抽象化表示网页的方法,文档是以树形结构表示的。
Document节点分为父节点(parentNode)、子节点(childNode)、兄弟节点(siblingNode)等。
BOM(浏览器对象模型)因为没有一个标准来定义浏览器的功能,所以不同的浏览器有不同的属性和方法。DOM则不然,有专门定义HTML(或XML)页面中的对象应该如何表示的标准。开发人员可以使用DOM操作或查找网页中的某项内容,尤其是表单、图片、定位元素。
当HTML文档加载完成后,浏览器将会将其表示成树形结构,页面上的所有元素都是对象树中的对象。如JS在处理表单时,会根据其在文档中出现的次序为所有表单创建一个数组。document.forms[0]用来表示第一个表单。同样,页面上所有的图片、链接和锚点都会以其名字存储在数组中,例如document.images、document.links、document.anchors[]等。
1.1 数组通过名字或索引
如文档中有一个表单,名字是form1,那么就可以通过它的名字来访问它,即document.forms["form1"],也可以使用索引值来访问它,即document.forms[n].
1.2 通过document方法的name属性
document.getElementByTagName();
1.3 通过document方法的ID属性
document.getElementById();
window.onload=function(){
var divObj = document.getElementById("divtest");
divObj.innerHTML = "Inserting new text in the div container!";
}
window.onload=function(){
var para = document.createElement("p");
var divObj = document.getElementById("divtest");
divObj.appendChild(para);
var txt = document.createTextNode("Hope this work!");
para.appendChild(txt);
}
document.body.insertbefore(newPara, firstPara);
var headings = document.getElementsByTagName("h4");
headings[0].setAttribute("id", "firsth4");
newPara = oldPara.cloneNode(true);
parentDiv1.removeChild(div2);
补充:
document.write()方法
可以写入全部的文档代码,包括HTML、CSS乃至JS。
-End-
*请认真填写需求信息,我们会在24小时内与您取得联系。