整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、介紹
XPath（XML Path Language）是一種用于在 XML 文檔中定位節點的查詢語言。它提供了一種簡潔而強大的方式來遍歷和選擇 XML 文檔中的元素和屬性
二、語法
表達式 | 描述 | 示例 |
nodename | 選擇指定標簽名的節點 | html 將選擇所有名為html 的節點。 |
* | 選擇所有節點 | * 選擇文檔中的所有節點 |
/nodename | 從根節點開始選擇，只能一層一層的往下找 | /html/body/div將選擇文檔中的所有div 節點 |
//tagname | 選擇任意位置的節點 | //div將選擇文檔中的所有div 節點 |
@ | 選擇具有指定屬性名和屬性值的節點，或者獲取屬性 | //div[@id="billboard"]//a/@href，[@id="billboard"]獲取id=billboard的div，@href獲取href屬性 |
. | 選取當前節點 | .//div[@id="billboard"] |
.. | 選取當前節點的父節點 | ..//div[@id="billboard"] |
三、謂語
表達式 | 描述 | 示例 |
[condition] | 添加條件來篩選節點 | //div[@id="billboard"]獲取id=billboard的div |
position() | 選擇具有指定位置的節點 | //div[@id="billboard"]//tr[position()=1]獲取第一個tr，等同于 //div[@id="billboard"]//tr[1] |
last() | 選擇最后一個節點 | //div[@id="billboard"]//tr[last()] 獲取最后一個tr |
四、運算符
表達式 | 描述 | 示例 |
| | 計算兩個節點集 | //book | //cd，返回所有擁有 book 和 cd 元素的節點集 |
+ | 加 | 8 + 4 |
- | 減 | 8 - 4 |
* | 乘 | 8 * 4 |
div | 除 | 8 div 4 |
> | 大于 | //div[@id="billboard"]//tr[position()>1]獲取位置大于2的tr |
< | 小于 | //div[@id="billboard"]//tr[position()<2]獲取位置小于2的tr |
= | 等于 | //div[@id="billboard"]//tr[position()=1]獲取第一個tr，等同于 //div[@id="billboard"]//tr[1] |
!= | 非等于 | //div[@id="billboard"]//tr[position()=1]獲取位置非等于1的元素 |
>= | 大于等于 | //div[@id="billboard"]//tr[position()>=2]獲取位置大于等于2的tr |
<= | 小于等于 | //div[@id="billboard"]//tr[position()<=2]獲取位置小于等于2的tr |
and | 與 | //div[@id="billboard"]//tr[@class='test' and position()>2] 獲取class為test且位置大于2的tr |
or | 或 | //div[@id="billboard"]//tr[position()=1 or position()=2]獲取位置等于1和等于2的tr |
not | 非 | //div[@id="billboard"]//tr[not(position()=1)]獲取位置非1的的tr |
五、軸（Axis）
表達式 | 描述 |
ancestor | 選取當前節點的所有先輩（父、祖父等）。 |
ancestor-or-self | 選取當前節點的所有先輩（父、祖父等）以及當前節點本身。 |
attribute | 選取當前節點的所有屬性。 |
child | 選取當前節點的所有子元素。 |
descendant | 選取當前節點的所有后代元素（子、孫等）。 |
descendant-or-self | 選取當前節點的所有后代元素（子、孫等）以及當前節點本身。 |
following | 選取文檔中當前節點的結束標簽之后的所有節點。 |
following-sibling | 選取當前節點之后的所有兄弟節點 |
namespace | 選取當前節點的所有命名空間節點。 |
parent | 選取當前節點的父節點。 |
preceding | 選取文檔中當前節點的開始標簽之前的所有節點。 |
preceding-sibling | 選取當前節點之前的所有同級節點。 |
self | 選取當前節點。 |
六、常用函數
更多函數請參考：https://www.runoob.com/xpath/xpath-functions.html
表達式 | 描述 | 示例 |
position() | 選擇具有指定位置的節點 | //div[@id="billboard"]//tr[position()=1]獲取第一個tr，等同于 //div[@id="billboard"]//tr[1] |
last() | 選擇最后一個節點 | //div[@id="billboard"]//tr[last()] 獲取最后一個tr |
text() | 獲取節點的文本內容 | //div[@id="billboard"]//a/text() 獲取div[@id="billboard"]下所有a標簽中的文本 |
contains(@attr,?'value')???? | 模糊匹配 | //div[@id="billboard"]//a[contains(@href, '35698284')] 選擇href中包含35698284的a標簽 |
starts-with(@attr,?'value')? | 是否以指定字符開頭 | //div[@id="billboard"]//a[starts-with(@href, 'https')] 選擇href以https開頭的a標簽 |
ends-with(@attr,?'value') | 是否以指定字符結尾 | //div[@id="billboard"]//a[ends-with(@href, '35698284')] 選擇href以35698284結尾的a標簽 |
、什么是節點
回顧概念:
文檔:document
元素:頁面中所有的標簽,元素---element, 標簽----元素---對象
節點:頁面中所有的內容(標簽,屬性,文本(文字,換行,空格,回車)),Node
根元素:html標簽節點node | nodeType | nodeName | nodeValue |
元素節點 | 1 | 標簽名（大寫） | null |
屬性節點 | 2 | 屬性名 | 屬性值 |
文本節點 | 3 | #text | 文本內容 |
CDATA節點 | 4 | #cdata-section | CDATA區域內容 |
實體引用名稱節點 | 5 | 引用名稱 | null |
實體名稱節點 | 6 | 實體名稱 | null |
處理指令節點 | 7 | target | entire content cluding the target |
注釋節點 | 8 | #comment | 注釋內容 |
文檔節點 | 9 | #document | null |
文檔類型節點 | 10 | doctype的名稱 | null |
文檔片段節點 | 11 | #document-fragment | null |
DTD聲明節點 | 12 | 符號名稱 | null |
****節點的屬性:(可以使用標簽--元素.出來,可以使用屬性節點.出來,文本節點.點出來)
nodeType:節點的類型
nodeName:節點的名字
nodeValue:節點的值二、節點的獲取（包含元素節點）
相關html代碼
<div id="dv">
<span>這是div中的第一個span標簽</span>
<p>這是div中的第二個元素,第一個p標簽</p>
<ul id="uu">
<li>喬峰</li>
<li>鹿茸</li>
<li id="three">段譽</li>
<li>卡卡西</li>
<li>雛田</li>
</ul>
</div>獲取父節點（屬性）：
// 獲取某節點的父級節點
node.parentNode
// 獲取某節點的父級元素
node.parentElement獲取子節點（屬性）：
// 獲取某節點的子節點
node.childNodes
// 獲取某節點的子元素
node.children屬性節點（方法）：
// 獲取屬性節點
node.getAttributeNode("name")獲取其他相關節點（屬性）—— 拓展：
// 獲取某節點的第一個子節點
node.firstChild;//-----------------------IE8中是第一個子元素
// 獲取某節點的第一個子元素
node.firstElementChild;//----------------IE8中不支持
// 獲取某節點的最后一個子節點
node.lastChild;//------------------------IE8中是第一個子元素
// 獲取某節點的最后一個子元素
node.lastElementChild;//-----------------IE8中不支持
// 獲取某節點的前一個兄弟節點
node.previousSibling;
// 獲取某節點的前一個兄弟元素
node.previousElementSibling;
// 獲取某節點的后一個兄弟節點
node.nextSibling;
// 獲取某節點的后一個兄弟元素
node.nextElementSibling;案例：點擊按鈕設置div中p標簽改變背景顏色（掌握）
html和css代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 450px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="變色" id="btn" />
<div id="dv">
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>JavaScript代碼
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一課</h1>
<p class="example">Hello world!</p>
<input name="myInput" type="text" size="20" /><br />
<h1 id="myHeader">This is a header</h1>
</body>
</html>上面的 HTML 中：
<html> 節點沒有父節點；它是根節點
<head> 和 <body> 的父節點是 <html> 節點
文本節點 "Hello world!" 的父節點是 <p> 節點
并且：
<html> 節點擁有兩個子節點：<head> 和 <body>
<head> 節點擁有一個子節點：<title> 節點
<title> 節點也擁有一個子節點：文本節點 "DOM 教程"
<h1> 和 <p> 節點是同胞節點, 同時也是 <body> 的子節點
并且：
<head> 元素是 <html> 元素的首個子節點
<body> 元素是 <html> 元素的最后一個子節點
<h1> 元素是 <body> 元素的首個子節點
<p> 元素是 <body> 元素的最后一個子節點
訪問節點：
var oLi=document.getElementsByTagName("li");
var oLi=document.getElementById("myHeader");
var oLi=document.getElementsByName("myInput"); //通過name屬性訪問querySelector訪問方式: IE8開始支持, IE8以下不支持
var div=document.querySelector("#myHeader"); //通過id訪問
var div=document.querySelector("li"); //通過標簽訪問
document.querySelector(".example"); //通過class屬性訪問獲取表單值
document.getElementById(id).value
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。
如果你需要返回所有的元素, 請使用 querySelectorAll() 方法替代。
利用父子兄關系查找節點：
使用childNodes屬性
對象屬性
nodeName 返回當前節點名字
元素節點的 nodeName 是標簽名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
nodeValue 返回當前節點的值, 僅對文本節點和屬性節點
對于文本節點, nodeValue 屬性包含文本。
對于屬性節點, nodeValue 屬性包含屬性值。
nodeValue 屬性對于文檔節點和元素節點是不可用的。
注意：nodeValue與tagName的區別對于空白節點的返回值：nodeValue返回null, tagName返回undefined
對于文本節點的返回值：nodeValue返回文本, tagName返回undefined
nodeType 檢測節點類型：
alert(document.nodeType);
元素節點的nodeType值為1； 標簽名稱
屬性節點的nodeType值為2； 屬性名稱 屬性節點不能算是其元素節點的子節點
文本節點的nodeType值為3； #text
注釋(Comment) 8: #comment
文檔(Document) 9 #document <HTML>
文檔類型(DocumentType) 10: <!DOCTYPE HTML PUBLIC"...">
節點 nodeType nodeName nodeValue
元素節點 1 大寫的標簽名 null
屬性節點 2 屬性名 屬性值
文本節點 3 #text 文本值
tagName 返回標簽的名稱, 僅對元素節點
parentNode 返回當前節點的父節點, 如果存在的話
childNodes 返回當前節點的子節點集合
firstChild 對標記的子節點集合中第一個節點的引用, 如果存在的話
lastChild 對標記的子節點集合中最后一個節點的引用, 如果存在的話
previousSibling 對同屬一個父節點的前一個兄弟節點的引用
nextSibling 對同屬一個父節點的下一個兄弟節點的引用
Attributes 返回當前節點(標記)屬性的列表 用于XML文件
ownerDocument 返回節點所屬的根元素
一些 DOM 對象方法
getElementById() 返回帶有指定 ID 的元素。
getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組）。
getElementsByName() 返回包含帶有指定類名的所有元素的節點列表。
appendChild() 把新的子節點添加到指定節點。
removeChild() 刪除子節點。
replaceChild() 替換子節點。
insertBefore() 在指定的子節點前面插入新的子節點。
createAttribute() 創建屬性節點。
createElement() 創建元素節點。
createTextNode() 創建文本節點。
getAttribute() 返回指定的屬性值。
setAttribute() 把指定屬性設置或修改為指定的值。
刪除、替換、插入子節點必須通過父節點的removeChild()方法來完成的
createAttribute() 創建屬性節點
var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);以上代碼可以簡化為
document.getElementsByTagName("H1")[0].class="democlass";
createAttribute()結合setAttributeNode()使用
等同于：
document.getElementsByTagName("H1")[0].setAttributeNode("class", "democlass");DOM獲取所有子節點:
<html>
<head>
<title>childNodes</title>
<script language="javascript">
function myDOMInspector(){
var oUl=document.getElementById("myList"); //獲取<ul>標記
var DOMString="";
if(oUl.hasChildNodes()){ //判斷是否有子節點
var oCh=oUl.childNodes;
for(var i=0;i<oCh.length;i++) //逐一查找
DOMString +=oCh[i].nodeName + "\n";
}
alert(DOMString);
}
</script>
</head>
<body onload="myDOMInspector()">
<ul id="myList">
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚</li>
<li>板栗燒雞</li>
<li>麻婆豆腐</li>
</ul>
</body>
</html>使用parentNode屬性：
<html>
<head>
<title>parentNode</title>
<script language="javascript">
function myDOMInspector(){
var myItem=document.getElementById("myDearFood");
alert(myItem.parentNode.tagName); //返回值為ul
}
</script>
</head>
<body onload="myDOMInspector()">
<ul>
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚</li>
<li id="myDearFood">板栗燒雞</li>
<li>麻婆豆腐</li>
</ul>
</body>
</html>DOM的兄弟關系：
<html>
<head>
<title>Siblings</title>
<script language="javascript">
function myDOMInspector(){
var myItem=document.getElementById("myDearFood");
//訪問兄弟節點
var nextListItem=myItem.nextSibling;
var preListItem=myItem.previousSibling;
alert(nextListItem.tagName +" "+ preListItem.tagName);
}
</script>
</head>
<body onload="myDOMInspector()">
<ul>
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚</li>
<li id="myDearFood">板栗燒雞</li>
<li>麻婆豆腐</li>
</ul>
</body>
</html>編寫自定義函數解決Firefox等瀏覽器包含眾多的空格作為文本節點問題。
<html>
<head>
<title>Siblings</title>
<script language="javascript">
function nextSib(node){
var tempLast=node.parentNode.lastChild;
//判斷是否是最后一個節點，如果是則返回null
if(node==tempLast)
return null;
var tempObj=node.nextSibling;
//逐一搜索后面的兄弟節點，直到發現元素節點為止
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
tempObj=tempObj.nextSibling;
//三目運算符，如果是元素節點則返回節點本身，否則返回null
return (tempObj.nodeType==1)?tempObj:null;
}
function prevSib(node){
var tempFirst=node.parentNode.firstChild;
//判斷是否是第一個節點，如果是則返回null
if(node==tempFirst)
return null;
var tempObj=node.previousSibling;
//逐一搜索前面的兄弟節點，直到發現元素節點為止
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
tempObj=tempObj.previousSibling;
return (tempObj.nodeType==1)?tempObj:null;
}
function myDOMInspector(){
var myItem=document.getElementById("myDearFood");
//獲取后一個元素兄弟節點
var nextListItem=nextSib(myItem);
//獲取前一個元素兄弟節點
var preListItem=prevSib(myItem);
alert("后一項:" + ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) + " 前一項:" + ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
}
</script>
</head>
<body onload="myDOMInspector()">
<ul>
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚</li>
<li id="myDearFood">板栗燒雞</li>
<li>麻婆豆腐</li>
</ul>
</body>
</html>注意：最新版的IE瀏覽器也包含眾多的空格作為文本節點；
設置節點屬性：
getAttribute()方法和setAttibute()方法
<html>
<head>
<title>getAttribute()</title>
<script language="javascript">
function myDOMInspector(){
//獲取圖片
var myImg=document.getElementsByTagName("img")[0];
//獲取圖片title屬性
alert(myImg.getAttribute("title")); //也可以用myImg.title獲取屬性值
}
</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="情人坡" />
</body>
</html><html>
<head>
<title>setAttribute()</title>
<script language="javascript">
function changePic(){
//獲取圖片
var myImg=document.getElementsByTagName("img")[0];
//設置圖片src和title屬性
myImg.setAttribute("src","02.jpg"); //可以在屬性節點不存在時,添加節點的屬性值;
myImg.setAttribute("title","紫荊公寓"); //也可以通過myImg.title="紫荊公寓";
}
</script>
</head>
<body>
<img src="01.jpg" title="情人坡" onclick="changePic()" />
</body>
</html>setAttribute()設置HTML標簽的屬性
oTable.setAttribute("border", "3"); //為表格邊框設置寬度
oTable.setAttribute("border", 3);
oTable.setAttribute("border", "3px"); //經過測試, 此種寫法也正確建議: 具體格式參照HTML屬性值的語法格式
setAttibute()設置行內樣式
obj.setAttribute("style", "position:absolute;left:200px;top:200px");注意：具體格式參考CSS樣式的語法格式
setAttibute()設置事件屬性
obj.setAttribute("onclick", "remove_img()"); //remove_img() 編寫自定義函數, 這里不能使用自定義函數
注意:關于文本節點兼容性
元素節點
子節點: childNodes children
首尾子節點: firstChild firstElementChild
lastChild lastElementChild
兄弟節點: nextSibling nextElementSibling
previousSibling previousElementSibling
childNodes firstChild lastChild nextSibling previousSibling屬性IE6-IE8版本瀏覽器不會返回空白節點,
IE9以上版本瀏覽器會返回文本節點, W3C瀏覽器(包括火狐瀏覽器)也會返回文本節點
children firstElementChild lastElementChild nextElementSibling previousElementSibling 只返回元素節點, 不會返回空白節點
注意: DOM操作必須保住DOM節點必須存在, 當然也包括使用css樣式display:none隱藏的DOM節點, 否則會導致js語法錯誤;
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
