教程：http://www.w3school.com.cn/cssref/css_selectors.asp
教程上的語法和正則表達式一樣，都是一些表達的基本單元。在實際業(yè)務(wù)使用當中，還得把它們結(jié)合起來用。
目標代碼片段如下：源碼地址
<div class="el">
<p class="t1 ">
<em class="check" name="delivery_em" onclick="checkboxClick(this)"></em>
<input class="checkbox" type="checkbox" name="delivery_jobid" value="95956655" jt="0" style="display:none" />
<span>
<a target="_blank" title="Go語言開發(fā)工程師" href="[https://jobs.51job.com/hangzhou/95956655.html?s=01&t=0](https://jobs.51job.com/hangzhou/95956655.html?s=01&t=0)" onmousedown="">
Go語言開發(fā)工程師 </a>
</span>
</p>
| | <span class="t2"><a target="_blank" title="杭州順網(wǎng)科技股份有限公司" >杭州順網(wǎng)科技股份有限公司</a></span>
<span class="t3">杭州</span>
<span class="t4">1-2萬/月</span>
<span class="t5">06-26</span>
</div>
需求：
- 選出該頁中所有的詳情頁面地址,即
https://jobs.51job.com/hangzhou/95956655.html?s=01&t=0
實現(xiàn)：
for( let i of document.querySelectorAll('p[class="t1 "]')){
let url = i.querySelector("a").getAttribute("href")
console.log(url)}
- 選出該頁所有的時間，即示例片段中的 06-26
for(let i of document.querySelectorAll('p[class="t1 "]+span+span+span+span')){
console.log(i.innerHTML)
}
<div class="bmsg job_msg inbox">
<p>工作職責(zé):</p><p>1、采用Go語言(Golang)開發(fā)高可用、 高并發(fā)的后端組件、服務(wù)；</p><p>2、保證系統(tǒng)的效率和可靠性以及代碼質(zhì)量和可維護性。</p><p>任職資格:</p><p>1、全日制本科及以上學(xué)歷，計算機相關(guān)專業(yè)畢業(yè)；</p><p>2、熟練掌握Go語言，對代碼基本規(guī)范有清晰的認識，1年以上Go語言項目開發(fā)經(jīng)驗；</p><p>3、有豐富的UNIX/Linux環(huán)境下的編程經(jīng)驗，熟悉多線程進程及網(wǎng)絡(luò)開發(fā)；</p><p>4、深入理解計算機網(wǎng)絡(luò)和現(xiàn)代操作系統(tǒng)；</p><p>5、 對服務(wù)端相關(guān)技術(shù)和架構(gòu)（通訊、計算、存儲）有較深刻的理解；</p><p>6、有良好的編程習(xí)慣，包括好的設(shè)計文檔，單元測試，代碼審查；</p><p>7、有大規(guī)模分布式項目, 高性能大并發(fā)項目經(jīng)驗優(yōu)先；</p><p>8、有ADX和DSP系統(tǒng)相關(guān)開發(fā)經(jīng)驗的優(yōu)先。</p>
<div class="mt10">
<p class="fp">
<span class="label">職能類別：</span>
<span class="el">軟件工程師</span>
</p>
</div>
<div class="share">
<a track-type="jobsButtonClick" event-type="6" class="a" href="javascript:void(0);" id="fenxiang">分享</a>
<div class="shareBox">
<div id="weixinMa_fx" style="display:none;"><img width="198" height="198" alt="二維碼" src="https://jobs.51job.com/comm/qrcode.php?url=https%3A%2F%2Fm.51job.com%2Fsearch%2Fjobdetail.php%3Fjobid%3D95956655"></div>
<a class="icon_b i_weixin" href="javascript:;" onclick="weixinMa();">微信</a>
<a class="icon_b i_mail" target="_blank" >郵件</a>
</div>
</div>
<div class="clear"></div>
</div>
選出所有的職位信息：
for( let i of document.querySelectorAll("div[class='bmsg job_msg inbox']>p")){
console.log(i)}
這個選擇器的注意點是，div > p選擇所有父元素為div的p元素。
同理可得，div[class='bmsg job_msg inbox']>p,是選擇所有父元素是div[class='bmsg job_msg inbox']的p元素。
還可以選擇父類元素
需求：想拿到文本信息，已知 i1 是唯一的。
<span class="sp4"><em class="i1"></em>無工作經(jīng)驗</span>
通過父元素來獲?。?/p>
document.querySelector("em[class='i1']").parentNode.innerText
通過父元素獲取子元素
https://www.jb51.net/article/51158.htm
