1. 苏葳的备忘录首页
  2. 因特网

CSS中的属性选择器

css 选择器 casperjs有句谚语叫“条条大路通罗马”,本意是说到一个城市可能有许多路径可选。对于CSS选择器也是一样。使用HTML元素中的不同特征点,可以组合出唯一确定某节点的许多种定位方案。有些CSS选择器可能在网页的CSS样式表中很少有机会出场,但在复杂页面的JS脚本中,有可能会用到这些选择器,来对网页的DOM树进行操作。比如网易股票网页(http://money.163.com/stock/#from=stock_index)中有这么一句代码:

<span _ntesquote_="code:US_DOWJONES;attr:price;fixed:2;color:updown;bgchg:price" class="num cRed">17619.51</span>

如果直接用Chrome的开发者工具拷贝此元素的CSS选择器,我们得到:

#market > div.normal.on > div > table > tbody > tr.tab.nb.selected > td.badge_large > span

可以看出,基本上是利用HTML中标签的层级关系来最后定位到这个span元素的。如果拷贝xpath选择器:

//*[@id="market"]/div[3]/div/table/tbody/tr[1]/td[2]/span

换用Firefox的xpath查看器插件:

id('market')/x:div[3]/x:div/x:table/x:tbody/x:tr[1]/x:td[2]/x:span

可以看到两个浏览器的xpath表达式也类似,默认都是利用dom元素间的层级关系来定位。

但问题在于,这个页面上有个鼠标指针联动的选项卡,随着用户鼠标的滑动,会显示不同地区的指数。因而上面的路径,并不能定位到唯一的元素!

比如用casperJS打开网易股票的页面后,若用以上选择器来取值,取到的将是默认第一个选项卡的国内股票指数,而非第三个选项卡的美国股票指数。当然也许可以模拟鼠标行为来让第三个选项卡处于前端。但毕竟不方便。

观察这段span的HTML代码,我们看到有_ntesquote_=”code:US_DOWJONES;attr:price;fixed:2;color:updown;bgchg:price”一句,其中code:US_DOWJONES(美国道琼斯)这句,应该是这个span值的唯一标识。

所以在casperJS中,使用CSS的属性选择器来定位这个元素:

document.querySelector('span[_ntesquote_="code:US_DOWJONES;attr:price;fixed:2;color:updown;bgchg:price"]').innerHTML

果然,得到了正确的道琼斯指数值。

CSS里的各种选择器是相当灵活和完备的,需要自己在使用过程中多加学习和积累。

原创文章,作者:苏葳,如需转载,请注明出处:https://www.swmemo.com/2133.html

发表评论

您的电子邮箱地址不会被公开。