Chromium形式のブラウザ
(例えばGoogle ChromeやMicrosoft Edge)
の開発者ツールで確認できるHTML要素のXPathには、
さまざまな記述方法があります。
以下に、主な記述形式と特に`*`記号について解説します。
---
## **XPathの記述形式**
XPathは、XMLやHTMLドキュメント内で特定の要素を指定するための
強力なクエリ言語です。
基本的な記述形式には次のようなものがあります。
### **1. 絶対パス**
- ルート要素から対象要素までの階層を完全に記述します。
- **例:**
```xpath
/html/body/div[1]/div[2]/span
```
- ドキュメントのルートから階層をたどるため、
長くなりやすいですが、特定の構造を正確に表現します。
---
### **2. 相対パス**
- 対象要素に至るまでの相対的なパスを指定します。
- **例:**
```xpath
//div[@class='example']
```
- `//`は、現在のノードから
ドキュメント内の任意の場所を検索することを意味します。
---
### **3. 属性による指定**
- 特定の属性を持つ要素を指定します。
- **例:**
```xpath
//input[@id='search']
```
- 属性値が一致する要素を特定できます。
---
### **4. 部分一致の条件**
- 属性値の部分一致を利用して要素を指定します。
- **例:**
- 属性値が特定の文字列で始まる場合:
```xpath
//div[starts-with(@class, 'btn')]
```
- 属性値が特定の文字列を含む場合:
```xpath
//a[contains(@href, 'example')]
```
---
### **5. インデックス指定**
- 同じ名前の兄弟要素が複数ある場合に、特定のインデックスを指定します。
- **例:**
```xpath
(//div[@class='example'])[2]
```
- `2番目`の要素を指定しています。
---
### **6. ワイルドカード `*`**
- **`*`は任意のタグ名を意味します。**
- **例:**
```xpath
//*[@id='header']
```
- ドキュメント内のすべてのタグから`id='header'`を持つ要素を検索します。
- 特定の条件下で、タグ名を指定せずに、
すべての要素を検索したい場合に便利です。
---
### **7. テキスト内容の指定**
- 要素内のテキストを条件に指定できます。
- **例:**
```xpath
//span[text()='ログイン']
```
- テキストが「ログイン」である`<span>`タグを検索します。
- 部分一致の場合:
```xpath
//span[contains(text(), 'ログ')]
```
---
### **8. 複数条件の組み合わせ**
- `and`や`or`を使って複数の条件を組み合わせます。
- **例:**
```xpath
//input[@type='text' and @name='username']
```
---
## **`*`の用途と意味**
- **`*`は任意のタグ名を表します。**
- 例えば、`//*/a`は、
任意のタグの子要素として存在する`<a>`タグを検索します。
- タグ名に依存しない検索を行うときに非常に便利です。
---
## **開発者ツールでの確認方法**
1. **要素のコピー:**
- 開発者ツールで要素を右クリックして
「Copy」→「Copy XPath」や「Copy Full XPath」を選択することで、
XPathが生成されます。
2. **検索バーでの確認:**
- 開発者ツールのElementsタブで
`Ctrl + F`(または`Cmd + F`)を押し、
XPathを入力して検索できます。
---
### **例: `*`を含むXPath**
```xpath
//*[contains(@class, 'menu-item')]
//*/input[@type='submit']
```
- 最初の例では、
任意のタグ内で`class`属性に`menu-item`を含む要素を検索します。
- 2つ目の例では、任意のタグ内で`<input>`タグ
かつ`type='submit'`の要素を検索します。
---
必要に応じて、
具体的なケースに合ったXPathの記述方法を選んでください!
コメント
コメントを投稿