整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
實從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小時內與您取得聯系。
