Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。
文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。 |
querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。请看下面的例子:
//获取body元素
var body = document.querySelector("body");
//获取ID为myDiv的元素
var myDiv = document.querySelecotr("#myDiv");
//获取第一个包含类selected的元素
var selected = document.querySelector(".selected");
//获取第一个包含类button的图像元素
var img = document.body.querySelector("img.button");
当querySelector()方法应用Document类型上时,它会尝试从文档元素开始匹配模式。如果应用与Element类型,查询则只会尝试从该元素的子孙节点中寻找匹配。
CSS查询可以根据需要复杂化或简单化。如果查询中有语法错误或者有不支持选择器,那么querySelector()或抛出一个错误。
querySelector()方法还接受可选的第二个参数,它是一个命名空间解析器,就是一个接受一个命名空间前缀并返回其相关URI的函数,类似于:
var nsresolver = function (prefix) {
switch (prefix) {
case "w3cmm":
return "http://www.w3cmm.com";
//此处其它代码
}
};
命名空间解析器对于在嵌入了其它语言诸如SVG或MathML的XHTML文档中执行查询非常有用,XML文档亦如此。CSS查询中的命名空间是使用一个管道来指定的,如下:
var svgImage = document.querySelector("svgsvg", function (prefix) {
switch (prefix) {
case :"svg":
return "http://www.w3.rog/2000/svg";
}
});
这个例子通过在文档中查找定义为<svg:svg>的元素返回了第一个SVG图像。当在查询中遇到了svg命名空间前缀时,则调用命名空间解析器函数来确定URI。没有命名空间解析器,则会抛出一个错误,因为查询引擎无法辨识svg命名空间前缀。
Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。的更多相关文章
- 网页设计与开发:HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...
- javascript实例教程使用canvas技术模仿echarts柱状图
canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图 ...
- javascript学习教程之---如何从一个tab切换到banner幻灯片的转换
一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- javascript学习教程之---如何从一个tab切换到banner幻灯片的转换2
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript中数组方法和方法的扩展
最近一直在努力的恶补javascript中的各种知识,比如说闭包,作用域,继承,构造函数,变量,内置对象等概念.同时,也在学习着ES6的新知识.最近想给大家分享的就是数组实例方法的练习以及如何去扩展一 ...
- js之querySelector方法
querySelector()接受一个CSS选择符,返回匹配的第一个元素,反之则NULL. 如: var body = document.querySelector('body'); var mydi ...
- javascript中数组的方法你真的都了解吗?
本篇文章主要讲述ES5中的数组,包括数组两种创建方式,属性,以及 9 大类 ,总共23个操作方法,非常全面,看完之后ES5数组这一部分基本都了解了,下一篇文章,我会讲述ES6中对数组的加成,新增了哪些 ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-apply和call的使用方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 设计模式之策略模式(iOS开发,代码用Objective-C展示)
在实际开发过程中,app需求都是由产品那边给出,往往是他给出第一版功能,我们写好代码后,会相应的给出第二版.第三版功能,而这些功能是在实际使用中,根据用户需求而不断增加的.如果在编码之初,我们并未认识 ...
- wamp升级php5.3.10到php5.6.13版本
1. 停止WAMP服务器. 2. 去网站windows.php.net 下载php-5.6.13-nts-Win32-VC9-x86.zip. 不要下载THE INSTALLER. 3. 在wa ...
- [net]ftp ssh http telnet https服务及端口
转自:http://blog.csdn.net/qq_34642668/article/details/52116490 FTP服务器,则是在互联网上提供存储空间的计算机,它们依照FTP协议提供服务. ...
- Putty远程SSH免密码方式链接Linxu
1.首先确保Linxu服务器安装了ssh服务,可以输入ssh命令测试. ssh [-1246AaCfgKkMNnqsTtVvXxYy] [-b bind_address] [-c cipher_spe ...
- RequireJS模块化之循环依赖
如果你定义一个循环依赖关系 (a 依赖b 并且 b 依赖 a),那么当b的模块构造函数被调用的时候,传递给他的a会是undefined. 但是b可以在a模块在被引入之后通过require(‘a’)来获 ...
- Unicode编码:保存中文cookie
中文和英文字符不同,中文属于Unicod字符,在内存中站4个字符,而英文属于ASCII字符,内存中只占2个字符.Cookie中使用Unicode字符时需要对Unicode字符进行编码,否则会乱码.编码 ...
- WinForm中播放视频示例(含源码)
1背景 这几天一老友要求我做个小软件,在WinForm播放视频.印象中微软有个WM控件直接可以使用,晚上研究下 2实现方式 2.1微软草根 最简单的方式,是直接使用微软的WM控件,也是通过COM方式集 ...
- Python 文件操作二
readlines就像read没有参数时一样,readlines可以按照行的方式把整个文件中的内容进行一次性读取,并且返回的是一个列表,其中每一行的数据为一个元素 #coding=utf-8 f = ...
- Ubuntu16.04安装Mininet
Ubuntu16.04源码安装Mininet 本文介绍了VMware虚拟机ubuntu16.04中安装Mininet的方法,物理机中的方法与之相同.主要参考了Mininet官方的教程.官方提供了四种安 ...
- 如何在Windows 10安装和使用Linux的Bash shell
转载自:百度经验 Windwos 10 的周年更新为开发人员提供一个大的新功能:一个完整的,基于Ubuntu的Bash shell中,可以直接在Windows上运行Linux软件. 这使得“Linux ...