之前,我们介绍了HTML5中的选择器querySelector()。今天,我们继续为大家分享HTML5中新添加的选择器querySelectorAll()。
querySelectorAll()方法接收的参数也是CSS选择符,但是返回的是所有匹配元素,而querySelector()方法返回的是第一个匹配的元素。
querySelectorAll()方法返回的是一个NodeList的实例。NodeList是带有所有属性和方法的实例。其底层实现相当于一组元素的快照,并不是文档进行搜索的动态查询。这样可以避免使用NodeList对象通常会引起的性能问题。
只要给querySelectorAll()方法中传的参数是有效的,这个方法不管找到的元素有多少个都会返回一个NodeList对象。如果没有找到匹配的元素,NodeList就会是空的。下面看一个小例子更好的为大家说明。
HTML代码
<p id="all" class="all"> <i>梦龙小站</i> <p class="box"> <em class="span">梦龙小站</em> </p> <i class="span">梦龙小站</i> <p class="box"> <em>梦龙小站</em> </p> </p>
JavaScript代码
//获取类名为all的<p>中所有的<i>元素,类似于getElementsByTagName("i") var i = document.getElementById("all").querySelectorAll("i"); //获取类名为span的所有元素 var span = document.querySelectorAll(".span"); //获取所有<p>标签中的所有<em>元素 var em = document.querySelectorAll("p em");
要获取返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法,小例子如下。
HTML代码
<p id="all" class="all"> <i>梦龙小站</i> <p class="box"> <em class="span">梦龙小站</em> </p> <i class="span">梦龙小站</i> <p class="box"> <em>梦龙小站</em> </p> </p>
JavaScript代码
//获取所有<p>标签中的所有<em>元素 var em = document.querySelectorAll("p em"); var i, len, emOne; for(i=0, len = em.length; i<len; i++){ emOne = em[i]; //或者 em.item(i); emOne.className = "meng"; }
如果在querySelectorAll()方法的参数中传入了浏览器不支持的选择符或者选择符中存在语法错误,那么querySelectorAll()方法会报出错误。
HTML5实战与剖析之CSS选择器——querySelectorAll()就为大家介绍到这里,querySelectorAll()方法仅仅是HTML5中的小小部分。在学习HTML5的道路上,我们消化每个小小的知识,一步一个脚印走向终点。感谢大家对梦龙小站的支持,HTML5实战与剖析还在继续,欢迎大家继续追踪。
以上就是HTML5实战与剖析之CSS选择器——querySelectorAll()的内容,更多相关内容请关注PHP中文网(www.php.cn)!

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载
最流行的的开源编辑器