選取特定元素的方式除了之前介紹過的CSS選擇器之外還有其他的方式也能夠輕鬆取得元素。

以下是一些JavaScript和XPATH尋找DOM內元素的方式:

JS查找元素的一些方法:

• document.getElementById() - 通過ID查找
• document.getElementsByName() - 通過name屬性查找
• document.getElementsByTagName() - 通過標籤名查找
• document.getElementsByClassName() - 通過class名查找
• document.querySelector() - 使用CSS選擇器查找單個元素
• document.querySelectorAll() - 使用CSS選擇器查找所有匹配元素

示例:

// 通過ID查找
const div = document.getElementById('myDiv');

// 通過標籤名查找
const inputs = document.getElementsByTagName('input');

// 通過querySelector查找class
const content = document.querySelector('.content'); 

XPATH查找元素的常用語法包括:

1. 通過元素名查找

示例:

//div

選擇所有div元素

2. 通過屬性查找

示例:

//div[@id='header']

選擇id為header的div元素

3. 通過文本內容查找

示例:

//div[text()='Hello World']

選擇內容為"Hello World"的div元素

4. 通過包含某屬性值查找

示例:

//div[contains(@class,'header')]

選擇class包含header的div元素

5. 通過元素關係查找

示例:

//ul/li/a

選擇ul底下的li元素底下的a元素

6. 通過邏輯運算符組合查找

示例:

//div[@id='tasklist' and @class='active']

選擇同時滿足id和class條件的div

還有許多進階語法如選擇第N個元素等,XPATH極為強大,能高效選擇DOM元素。

JS簡單方便,但僅限於瀏覽器環境。 XPATH表達力更強,可用於多種環境,但語法複雜。

想了解更多XPATH語法與實例可以參考以下網站:
http://www.zvon.org/xxl/XPathTutorial/General_chi/examples.html