关于javascript dom扩展:Selector API
众多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的更多相关文章
- DOM扩展-Selectors API(选择符 API)、元素遍历
DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...
- javascript DOM扩展querySelector()和和querySelectorAll()
选在符的API的核心有两个方法:querySelector()和querySelectorAll() querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配 ...
- JavaScript DOM位置尺寸API
我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeig ...
- DOM扩展札记
Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...
- 《JAVASCRIPT高级程序设计》DOM扩展
虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...
- JavaScript基础笔记(八)DOM扩展
DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...
- DOM扩展:DOM API的进一步增强[总结篇-上]
DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DO ...
- js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
- DOM扩展:DOM API的进一步增强[总结篇-下]
本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档 ...
随机推荐
- Java实现Http服务器(三)
下面重点介绍上篇文章介绍的HttpServerImpl类当中的ServerImpl类 sun.net.httpserver.ServerImpl 600行左右的类,是整个HttpServer的核心 ...
- TCP带外数据读写
#include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include &l ...
- nutch 采集效率问题
http://hi.baidu.com/jacklin/item/a8fbccf479f6a1d042c36a7c再附一篇:http://blog.csdn.net/laigood/article/d ...
- h.264宏块与子宏块类型
宏块类型mb_type 宏块类型表示的是宏块不同的分割和编码方式,在h.264的语法结构中,宏块类型在宏块层(macroblock_layer)中用mb_type表示(请参考h.264语法结构分析中的 ...
- SpringMVC控制器接收不了PUT提交的参数的解决方案
摘要: SpringMVC控制器接收不了PUT提交的参数的解决方案 这次改造了下框架,把控制器的API全部REST化,不做不知道,SpringMVC的REST有各种坑让你去跳,顺利绕过它们花了我不少时 ...
- 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 ...
- poj3709
首先我们发现将一段数变为同一个数比间隔着搞肯定优,因为数列是升序的,然后不难得到方程式f[i]=min(f[j]+sum[i]-sum[j]-(i-j)*a[j+1]) (i-j>=m)简单的斜 ...
- bzoj3208: 花神的秒题计划Ⅰ
3208: 花神的秒题计划Ⅰ Time Limit: 16 Sec Memory Limit: 128 MBSubmit: 323 Solved: 211[Submit][Status] Desc ...
- 查看Mysql执行计划
使用navicat查看mysql执行计划: 打开profile分析工具: 查看是否生效:show variable like ‘%profil%’; 查看进程:show processlist; 选择 ...
- 【转】LaTeX 符号命令大全
函数.符号及特殊字符 声调 语法 效果 语法 效果 语法 效果 \bar{x} \acute{\eta} \check{\alpha} \grave{\eta} \breve{a} \ddot{y} ...