使用選擇器語法來查找元素 · 網絡爬蟲知識匯總

# 使用選擇器語法來查找元素 <h1><span style="font-size: 14px; line-height: 1.5;">問題</span></h1> <p>你想使用類似于CSS或jQuery的語法來查找和操作元素。</p> <h2>方法</h2> <p>可以使用<code><a title="Find elements that match the Selector query, with this element as the starting context." href="http://jsoup.org/apidocs/org/jsoup/nodes/Element.html#select%28java.lang.String%29">Element.select(String selector)</a></code> 和 <code><a title="Find matching elements within this element list." href="http://jsoup.org/apidocs/org/jsoup/select/Elements.html#select%28java.lang.String%29">Elements.select(String selector)</a></code> 方法實現：</p> <pre><code>File input = new File("/tmp/input.html"); Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/"); Elements links = doc.select("a[href]"); //帶有href屬性的a元素 Elements pngs = doc.select("img[src$=.png]"); //擴展名為.png的圖片 Element masthead = doc.select("div.masthead").first(); //class等于masthead的div標簽 Elements resultLinks = doc.select("h3.r > a"); //在h3元素之后的a元素 </code></pre> <h2>說明</h2> <p>jsoup elements對象支持類似于<a href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215/">CSS</a> (或<a href="http://jquery.com/">jquery</a>)的選擇器語法，來實現非常強大和靈活的查找功能。.</p> <p>這個<code>select</code> 方法在<code><a title="A HTML Document." href="http://jsoup.org/apidocs/org/jsoup/nodes/Document.html">Document</a></code>, <code><a title="A HTML element consists of a tag name, attributes, and child nodes (including text nodes and other elements)." href="http://jsoup.org/apidocs/org/jsoup/nodes/Element.html">Element</a></code>,或<code><a title="A list of Elements, with methods that act on every element in the list." href="http://jsoup.org/apidocs/org/jsoup/select/Elements.html">Elements</a></code>對象中都可以使用。且是上下文相關的，因此可實現指定元素的過濾，或者鏈式選擇訪問。</p> <p>Select方法將返回一個<code><a title="A list of Elements, with methods that act on every element in the list." href="http://jsoup.org/apidocs/org/jsoup/select/Elements.html">Elements</a></code>集合，并提供一組方法來抽取和處理結果。</p> <h3>Selector選擇器概述</h3> <ul> <li><code>tagname</code>: 通過標簽查找元素，比如：<code>a</code></li> <li><code>ns|tag</code>: 通過標簽在命名空間查找元素，比如：可以用 <code>fb|name</code> 語法來查找 <code><fb:name></code> 元素</li> <li><code>#id</code>: 通過ID查找元素，比如：<code>#logo</code></li> <li><code>.class</code>: 通過class名稱查找元素，比如：<code>.masthead</code></li> <li><code>[attribute]</code>: 利用屬性查找元素，比如：<code>[href]</code></li> <li><code>[^attr]</code>: 利用屬性名前綴來查找元素，比如：可以用<code>[^data-]</code> 來查找帶有HTML5 Dataset屬性的元素</li> <li><code>[attr=value]</code>: 利用屬性值來查找元素，比如：<code>[width=500]</code></li> <li><code>[attr^=value]</code>, <code>[attr$=value]</code>, <code>[attr*=value]</code>: 利用匹配屬性值開頭、結尾或包含屬性值來查找元素，比如：<code>[href*=/path/]</code></li> <li><code>[attr~=regex]</code>: 利用屬性值匹配正則表達式來查找元素，比如： <code>img[src~=(?i)\.(png|jpe?g)]</code></li> <li><code>*</code>: 這個符號將匹配所有元素</li> </ul> <h3>Selector選擇器組合使用</h3> <ul> <li><code>el#id</code>: 元素+ID，比如： <code>div#logo</code></li> <li><code>el.class</code>: 元素+class，比如： <code>div.masthead</code></li> <li><code>el[attr]</code>: 元素+class，比如： <code>a[href]</code></li> <li>任意組合，比如：<code>a[href].highlight</code></li> <li><code>ancestor child</code>: 查找某個元素下子元素，比如：可以用<code>.body p</code> 查找在"body"元素下的所有 <code>p</code>元素</li> <li><code>parent > child</code>: 查找某個父元素下的直接子元素，比如：可以用<code>div.content > p</code> 查找 <code>p</code> 元素，也可以用<code>body > *</code> 查找body標簽下所有直接子元素</li> <li><code>siblingA + siblingB</code>: 查找在A元素之前第一個同級元素B，比如：<code>div.head + div</code></li> <li><code>siblingA ~ siblingX</code>: 查找A元素之前的同級X元素，比如：<code>h1 ~ p</code></li> <li><code>el, el, el</code>:多個選擇器組合，查找匹配任一選擇器的唯一元素，例如：<code>div.masthead, div.logo</code></li> </ul> <h3>偽選擇器selectors</h3> <ul> <li><code>:lt(n)</code>: 查找哪些元素的同級索引值（它的位置在DOM樹中是相對于它的父節點）小于n，比如：<code>td:lt(3)</code> 表示小于三列的元素 </li> <li><code>:gt(n)</code>:查找哪些元素的同級索引值大于<code>n</code><code>，比如</code>： <code>div p:gt(2)</code>表示哪些div中有包含2個以上的p元素</li> <li><code>:eq(n)</code>: 查找哪些元素的同級索引值與<code>n</code>相等，比如：<code>form input:eq(1)</code>表示包含一個input標簽的Form元素</li> <li><code>:has(seletor)</code>: 查找匹配選擇器包含元素的元素，比如：<code>div:has(p)</code>表示哪些div包含了p元素 </li> <li><code>:not(selector)</code>: 查找與選擇器不匹配的元素，比如： <code>div:not(.logo)</code> 表示不包含 class=logo 元素的所有 div 列表 </li> <li><code>:contains(text)</code>: 查找包含給定文本的元素，搜索不區分大不寫，比如： <code>p:contains(jsoup)</code></li> <li><code>:containsOwn(text)</code>: 查找直接包含給定文本的元素</li> <li><code>:matches(regex)</code>: 查找哪些元素的文本匹配指定的正則表達式，比如：<code>div:matches((?i)login)</code></li> <li><code>:matchesOwn(regex)</code>: 查找自身包含文本匹配指定正則表達式的元素</li> <li>注意：上述偽選擇器索引是從0開始的，也就是說第一個元素索引值為0，第二個元素index為1等</li></ul>