众多javascript库中最常用的一项功能,就是根据css选择符选择与某个模式匹配的DOM元素。之前由于对javascript的认识较低,对javascript对DOM操作还停留在getElementById()和getElementsByTagName上,对类的获取不得不强行封装一个函数,比如

function getElementByClassName(TagName,classname){
var tags=document.getElementsByTagName(TagName);
var list=[];
for(var i in tags)
{
var tag=tags[i];
if(tag.className==classname){list.push(tag);}
}
return list;
}
因此在实际开发过程中还是比较麻烦的。今天接触到DOM扩展中的Selector API感觉像是发现了新世界的大门。

selector API是由W3C发起指定的一个标准,致力于让浏览器原生支持css查询。核心方法就是:querySelector()和querySelectorAll().操作起来也比较简单。

querySelector()方法

querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,则返回null。请看下面的例子。

//取得body元素
var body = document.querySelector("body"); //取得id为"text"的元素
var text = document.querySelector("#text"); //取得类名为“selected”的元素
var selected = document.querySelector(".selected"); //取得类为“button”的第一个图片元素
var img = document.body.querySelector("img.button");

querySelectorAll()方法

querySelecyorAll()方法接收的参数与querySelector方法一样,都是一个css选择符,但是返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList实例。看下面的例子。

//取得某div中的所有<p>元素。
var p = document.getElementById("myDiv").querySelectAll("p"); //取得类为“selected”的所有元素
var selecteds = document.querySelectorAll(".selected");

  但是因为获取的是一个数组的形式,因此要操作数组中的每一个元素,可以使用item()方法或者方括号语法 比如:

var i, len, selected;
for(i=0;i<selecteds.len,i++){
selected = selecteds[i]; //或者selecteds.item(i);
selected.style.backgroundColor = "red";
}

第一篇随笔,一步一个脚印,嗯哼!

关于javascript dom扩展:Selector API的更多相关文章

  1. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

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

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

  3. JavaScript DOM位置尺寸API

    我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeig ...

  4. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

  5. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  6. JavaScript基础笔记(八)DOM扩展

    DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...

  7. DOM扩展:DOM API的进一步增强[总结篇-上]

    DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DO ...

  8. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  9. DOM扩展:DOM API的进一步增强[总结篇-下]

    本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档 ...

随机推荐

  1. Java实现Http服务器(三)

    下面重点介绍上篇文章介绍的HttpServerImpl类当中的ServerImpl类 sun.net.httpserver.ServerImpl   600行左右的类,是整个HttpServer的核心 ...

  2. TCP带外数据读写

    #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include &l ...

  3. nutch 采集效率问题

    http://hi.baidu.com/jacklin/item/a8fbccf479f6a1d042c36a7c再附一篇:http://blog.csdn.net/laigood/article/d ...

  4. h.264宏块与子宏块类型

    宏块类型mb_type 宏块类型表示的是宏块不同的分割和编码方式,在h.264的语法结构中,宏块类型在宏块层(macroblock_layer)中用mb_type表示(请参考h.264语法结构分析中的 ...

  5. SpringMVC控制器接收不了PUT提交的参数的解决方案

    摘要: SpringMVC控制器接收不了PUT提交的参数的解决方案 这次改造了下框架,把控制器的API全部REST化,不做不知道,SpringMVC的REST有各种坑让你去跳,顺利绕过它们花了我不少时 ...

  6. Error: opening registry key 'Software\JavaSoft\Java Runtime Environment' Error: could not find java.dll

    java -jar yxCollector-1.1.0.jarError: opening registry key 'Software\JavaSoft\Java Runtime Environme ...

  7. poj3709

    首先我们发现将一段数变为同一个数比间隔着搞肯定优,因为数列是升序的,然后不难得到方程式f[i]=min(f[j]+sum[i]-sum[j]-(i-j)*a[j+1]) (i-j>=m)简单的斜 ...

  8. bzoj3208: 花神的秒题计划Ⅰ

    3208: 花神的秒题计划Ⅰ Time Limit: 16 Sec  Memory Limit: 128 MBSubmit: 323  Solved: 211[Submit][Status] Desc ...

  9. 查看Mysql执行计划

    使用navicat查看mysql执行计划: 打开profile分析工具: 查看是否生效:show variable like ‘%profil%’; 查看进程:show processlist; 选择 ...

  10. 【转】LaTeX 符号命令大全

    函数.符号及特殊字符 声调 语法 效果 语法 效果 语法 效果 \bar{x} \acute{\eta} \check{\alpha} \grave{\eta} \breve{a} \ddot{y} ...