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=boxdiv标签 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的用法的更多相关文章

  1. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  2. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  3. 原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  4. 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll

    使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...

  5. javascript 高级选择器:querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流 ...

  6. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  7. javascript DOM扩展querySelector()和和querySelectorAll()

    选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配 ...

  8. HTML5中querySelector()和querySelectorAll()

    HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器 ...

  9. 抛弃jQuery:DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

随机推荐

  1. Oracle 客户端注册表字符集修改-----解决乱码 .

    本地ORACLE连接创建好后,默认是GBK的字符集,如果连接服务器不是同样的GBK字符集就会出现中文乱码的问题,这种情况我们需要修改本地的字符集来和服务器匹配. 通过注册表修改   HKEY_LOCA ...

  2. 摘:"error LNK2019: 无法解析的外部符号 该符号在函数 中被引用" 错误原因

    例如“error LNK2019: 无法解析的外部符号error LNK2001: 无法解析的外部符号“private: static struct _OVERLAPPED CUsbCom::g_Wr ...

  3. USES_CONVERSION的使用和注意

    USES_CONVERSION是用来转换类型的,比如我们很常见的问题: 在Socket编程时候,我们的IP地址从界面上输进去一般都使用CString类型的,可是在SOCKADDR_IN中的inet_a ...

  4. DataGridView添加右键菜单等技巧

    1). 添加一个快捷菜单contextMenuStrip1:2). 给dataGridView1的CellMouseDown事件添加处理程序:  程序代码 private void DataGridV ...

  5. laravel路由之分组路由

    laravel下的分组路由可以嵌套如下: Route::group(['prefix'=>'admin'],function(){ Route::group(['prefix'=>'dtk ...

  6. .atitit.web 推送实现解决方案集合(3)----dwr3 Reverse Ajax

    .atitit.web 推送实现解决方案集合(3)----dwr3 Reverse Ajax 1. 原理实现 1 2. Page  增加配置,增加回调函数dwr.engine.setActiveRev ...

  7. python爬虫解析库之re模块

    re模块 一:什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中, ...

  8. jquery 情况form表单的所有内容

    #project_file_upload 为表单的id $(':input','#project_file_upload') .not(':button, :submit, :reset, :hidd ...

  9. 实现在edittext中任意插入图片

    Myedittext: public class MyEditText extends EditText { public MyEditText(Context context) { super(co ...

  10. URL与URI

    1.URI是统一资源标识符,是一个用于标识某一互联网资源名称的字符串. 该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交互操作.URI由包括确定语法和相关协议的方案所定义.由是三个 ...