DOM API querySelector与querySelectorAll的用法
DOM API querySelector与querySelectorAll的用法: http://www.qttc.net/201309371.html
querySelectorAll与querySelector的区别是querySelectorAll找出所有匹配的节点并返回数组,querySelector找到一个后就返回节点对象。
找出所有标签 document.querySelectorAll("*")
找出head
下所有的标签 document.head.querySelectorAll("*")
找出body
标签下的第一个div
标签
document.body.querySelectorAll("div")[0]
document.body.querySelector("div")
找出所有class=box
的标签 document.querySelectorAll(".box")
找出所有class=box
的div
标签 document.querySelectorAll("div.box")
找出所有id=lost
的标签 document.querySelectorAll("#lost")
找出所有p
标签并且id=lost
的标签 document.querySelectorAll("p#lost")
找出所有name=qttc
的标签 document.querySelectorAll("*[name=qttc]")
找出所有存在name
属性的标签 document.querySelectorAll("*[name]")
document.querySelectorAll("p.hot[name]")
document.querySelectorAll("p[class=hot][name]")
在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素
document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示
varemphasisText = document.querySelectorAll(".emphasis");
for( vari = 0 , j = emphasisText.length ; i < j ; i++ )
{
emphasisText[i].style.fontWeight = "bold";
}
document.querySelector('button').addEventListener('click', function(){
logger.updateCount();
});
DOM API querySelector与querySelectorAll的用法的更多相关文章
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll
使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...
- javascript 高级选择器:querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流 ...
- 原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- javascript DOM扩展querySelector()和和querySelectorAll()
选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配 ...
- HTML5中querySelector()和querySelectorAll()
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器 ...
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
随机推荐
- Oracle 客户端注册表字符集修改-----解决乱码 .
本地ORACLE连接创建好后,默认是GBK的字符集,如果连接服务器不是同样的GBK字符集就会出现中文乱码的问题,这种情况我们需要修改本地的字符集来和服务器匹配. 通过注册表修改 HKEY_LOCA ...
- 摘:"error LNK2019: 无法解析的外部符号 该符号在函数 中被引用" 错误原因
例如“error LNK2019: 无法解析的外部符号error LNK2001: 无法解析的外部符号“private: static struct _OVERLAPPED CUsbCom::g_Wr ...
- USES_CONVERSION的使用和注意
USES_CONVERSION是用来转换类型的,比如我们很常见的问题: 在Socket编程时候,我们的IP地址从界面上输进去一般都使用CString类型的,可是在SOCKADDR_IN中的inet_a ...
- DataGridView添加右键菜单等技巧
1). 添加一个快捷菜单contextMenuStrip1:2). 给dataGridView1的CellMouseDown事件添加处理程序: 程序代码 private void DataGridV ...
- laravel路由之分组路由
laravel下的分组路由可以嵌套如下: Route::group(['prefix'=>'admin'],function(){ Route::group(['prefix'=>'dtk ...
- .atitit.web 推送实现解决方案集合(3)----dwr3 Reverse Ajax
.atitit.web 推送实现解决方案集合(3)----dwr3 Reverse Ajax 1. 原理实现 1 2. Page 增加配置,增加回调函数dwr.engine.setActiveRev ...
- python爬虫解析库之re模块
re模块 一:什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中, ...
- jquery 情况form表单的所有内容
#project_file_upload 为表单的id $(':input','#project_file_upload') .not(':button, :submit, :reset, :hidd ...
- 实现在edittext中任意插入图片
Myedittext: public class MyEditText extends EditText { public MyEditText(Context context) { super(co ...
- URL与URI
1.URI是统一资源标识符,是一个用于标识某一互联网资源名称的字符串. 该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交互操作.URI由包括确定语法和相关协议的方案所定义.由是三个 ...