关于javascript dom扩展:Selector API
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于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的主要内容,如果未能解决你的问题,请参考以下文章