你的位置:首页 > 软件开发 > Java > 新增的querySelector、querySelectorAll测试

新增的querySelector、querySelectorAll测试

发布时间:2016-04-22 19:00:10
从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口querySelector 得到一个DOMquerySelectorAll 得到一组DOM一个个的解释这些选择器也没有必要,我们结合前面的数组知识,写一段代码来说明。页面上有一组元素,然后会依据我们数组中的预订选 ...

从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口

querySelector 得到一个DOM

querySelectorAll 得到一组DOM

一个个的解释这些选择器也没有必要,我们结合前面的数组知识,写一段代码来说明。页面上有一组元素,然后会依据我们数组中的预订选择值选择相应元素,并将背景变红色,同时提示选择器的含义。这样的代码便于运行理解和扩展。

html的结构部分

<body>   <div>     <input type="button" value="开始测试" />     <span></span><span></span>   </div>   <ol>     <li title="abc1">       <h2 title="abc">         Hello</h2>     </li>     <li title="abc2">       <input type="checkbox" checked="checked" />       <input type="checkbox" />       <input type="checkbox" />     </li>     <li title="abc3"></li>     <li title="abc4">       <ul>         <li title="41abc">           <input type="text" readonly="true" />           <input type="text" />         </li>         <li title="42abc">           <input type="button" value="disabled" disabled="disabled" />         </li>         <li title="43abc4"></li>         <li title="44abc4">           <input type="radio" checked="checked" />           <input type="radio" />           <input type="radio" checked="checked" />         </li>       </ul>     </li>     <li title="abc5"></li>     <li title="abc6"></li>     <li title="abc7"></li>     <li title="abc8"><a href="#">go</a></li>     <li title="abc9"></li>   </ol>   <p>     text</p> <a href="http://hovertree.com/">何问起</a></body> 

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:新增的querySelector、querySelectorAll测试

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录