7-80 HTML5新增的JS选择器
7-80 HTML5新增的JS选择器
学习要点
- HTML5新增的JS选择器
在传统的 JavaScript 开发中，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。
现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
HTML5新增的JS选择器
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。
- document.querySelector('selectors');
该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素
- document.querySelectorAll('selectors');
该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。
- 注意事项
参数selectors 可以包含多个CSS选择器，用逗号隔开:element = document.querySelector('selector1,selector2,...');br>elementList = document.querySelectorAll('selector1,selector2,...');
这种方法查找元素是非实时的，即不支持有动态添加元素情况下的查找
- document.getElementsByClassName("selector");返回文档中所有指定类名的元素集合，作为 NodeList 对象。
IE8以下的浏览器中，无法通过Class标签getElementsByClassName函数获取元素。ie9以上及主流浏览器均支持通过Class获取元素，ie8及以下的解决办法：
可以用jQuery代替 引用jQuery后，使用$(".ClassName")等方法获取元素。
自己写getElementsByClassName函数方法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>7-79 课堂演示</title>
<style type="text/css">
</style>
</head>
<body>
<h3> 标题2</h3>
<h2> 标题1</h2> <div class="content">
<ul id="u1">
<li>列表项1</li>
<li class="ll">列表项2</li>
<li class="ll">列表项3</li>
<li class="ll">列表项4
<p>u1里的段落</p>
</li>
<li>列表项5</li>
</ul>
<ul id="u2">
<li>列表项11</li>
<li class="bb">列表项12</li>
<li class="bb">列表项13</li>
<li class="bb">列表项14</li>
<li>列表项15</li>
</ul>
</div>
<script>
//快捷的通过class ID 元素名称查找元素
function myFun1(){
// document.querySelector("li").style.backgroundColor = "red";
// document.querySelector("#u2").style.backgroundColor = "blue";
document.querySelector(".bb").style.backgroundColor = "blue";
}
//结合CSS3的选择器进行更精确的查找
function myFun2(){
document.querySelector("#u2>li+li").style.backgroundColor = "red";
document.querySelector("#u1 li p").style.backgroundColor = "red";
}
//只匹配第一个符合条件的元素
function myFun3(){
document.querySelector("h2, h3").style.backgroundColor = "red";
}
myFun3()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>7-80 课堂演示</title>
<style type="text/css">
</style>
</head>
<body>
<h3> 标题2</h3>
<h2> 标题1</h2> <div class="content">
<ul id="u1">
<li>列表项1</li>
<li class="ll">列表项2</li>
<li class="bb">列表项3</li>
<li class="ll">列表项4
<p>u1里的段落</p>
</li>
<li>列表项5</li>
</ul>
<ul id="u2">
<li>列表项11</li>
<li class="bb">列表项12</li>
<li class="bb">列表项13</li>
<li class="bb">列表项14</li>
<li>列表项15</li>
</ul>
</div>
<script>
//快捷的通过class ID 元素名称查找元素
function myFun1(){
// document.querySelector("li").style.backgroundColor = "red";
// document.querySelector("#u2").style.backgroundColor = "blue";
document.querySelector(".bb").style.backgroundColor = "blue";
}
//结合CSS3的选择器进行更精确的查找
function myFun2(){
document.querySelector("#u2>li+li").style.backgroundColor = "red";
document.querySelector("#u1 li p").style.backgroundColor = "red";
}
//只匹配第一个符合条件的元素
function myFun3(){
document.querySelector("h2, h3").style.backgroundColor = "red";
} //querySelectorAll返回的是一个集合
function myFun4() {
var x=document.querySelectorAll("li");
x[3].style.backgroundColor = "green"
//alert(x.length)
for (var i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
} function myFun5(){
var x=document.querySelectorAll("#u1 .bb")
for (var i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "green";
}
} //querySelectorAll查找元素不是实时的
function myFun6(){
var u1=document.getElementById('u1')
// var arr=document.querySelectorAll("#u1>li")
var arr=u1.getElementsByTagName('li')
alert(arr.length)
var newli=document.createElement('li')
newli.innerHTML='newli'
u1.appendChild(newli)
alert(arr.length)
} //通过className查找元素
function myFun7() {
var x = document.getElementsByClassName("bb");
for (var i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
}
myFun7()
</script>
</body>
</html>
浏览器兼容性
- 版本较低的浏览器有会存在兼容性问题。
- 很多框架中封装了解决浏览器兼容性的问题的方法，比如JQ;使用合适的框架不但可以解决兼容性还可以节省很多时间，效率更高
- 在不用框架的情况下可以自己编写一个解决兼容性的函数，或者直接引用一个解决兼容问题的函数
- 相信随着浏览器的更新和语言的规范这些目前的兼容性问题未来很可能就不存在了
理解全局对象Global
- 全局属性和函数可用于所有内建的 JavaScript 对象。全局对象是所有全局方法的拥有者，用来同意管理全局方法，全局方法也就是全局函数。
- parseInt() 函数可解析一个字符串，并返回一个整数。
- parseFloat() 解析一个字符串并返回一个浮点数。
注意:可以将数字开头的字符串转换成数值，但是不可以转换非数字开头的字符串
- isNaN(x)函数用于检查其参数是否是非数字值。
可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。
如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。
- ......
变量的作用范围
- 作用域是指有效范围，JS变量的作用域有全局和局部之分
- "全局变量"：申明在函数之外的变量
- "局部变量"：申明在函数体中的变量，并且只能在当前函数体内访问
- 如果函数内部有定义变量，即使在定义之前输出但会先执行后面定义语句，然后判断输出结果
全局变量的优点：可以减少变量的个数，减少由于实际参数和形式参数的数据传递带来的时间消耗。
全局变量缺点:使函数的代码可读性降低。由于多个函数都可能使用全局变量，函数执行时全局变量的值可能随时发生变化，对于程序的查错和调试都非常不利。
结束语
- 在本套课程中详细讲解了JavaScript的基础知识，还有如下内容没有讲解道：
- 函数的高级复杂部分
- cookie对象与存储
- Ajax应用
- JS面向对象
- JQ框架的使用
- ......
在您学习到这节课的时候，我想我们的第二套课程《HTML5进阶课程第一季---JavaScript入门到精通》《HTML5进阶课程第二季---CSS3实战技巧案例专题》也已经快要与大家见面了，在进阶课程中我们会进一步的为大家详解JS的其他知识。
7-80 HTML5新增的JS选择器的更多相关文章
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...
- HTML5新增属性data-*和js/jquery之间的交互
HTML5新增属性data- data-自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状 书写实例 <div data-role="page" data-last ...
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- html5新增及删除标签
一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- HTML5新增的一些属性和功能之一
大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...
随机推荐
- BZOJ4873 LuoguP3749 寿司餐厅
题面太长,请诸位自行品尝—>寿司餐厅 分析: 首先题目中给了限制条件,假如选了D(i,j)(i<j),那么也就选了D(i+1,j)和D(i,j-1)两个点. 于是我们一下就明白了,哦,最大 ...
- 笔试算法题（37）：二叉树的层序遍历 & 最长递增的数字串
出题:要求层序遍历二叉树,从上到下的层次,每一层访问顺序为从左到右,并将节点一次编号,输出如下:如果只要求打印指定的level的节点,应该如何实现. a b c d e f g h i 分 ...
- [0] Hello World
受不了CSDN了,广告多,慢,编辑器难用,还限制博客数量.
- Java权限管理（授权与认证）
CRM权限管理 有兴趣的同学也可以阅读我最近分享的:Shiro框架原理分析 (PS : 这篇博客里面介绍了使用Shiro框架的方式实现权限管理) https://www.cnblogs.com/y ...
- Python之字符串计算（计算器）
Python之字符串计算(计算器) import re expression = '-1-2*((60+2*(-3-40.0+42425/5)*(9-2*5/3+357/553/3*99/4*2998 ...
- MySQL-----备份（转储）
备份: **备份数据表结构+数据** mysqldump -u root 要备份的数据库表名 > 要备份的数据的备份名(这里也可以指定路径) -p **备份数据表结构** mysqldump - ...
- 每周一赛（E题，广搜求方案）
Description In this problem, you are given an integer number s. You can transform any integer number ...
- IDEA 2018集成MyBatis Generator 插件 详解
1.修改maven的pom文件 只需要将如下依赖添加到pom.xml文件中即可.(注意此处是以plugin的方式,放在<plugins> </plugins>中间即可) < ...
- Leetcode 166.分数到小数
分数到小数 给定两个整数,分别表示分数的分子 numerator 和分母 denominator,以字符串形式返回小数. 如果小数部分为循环小数,则将循环的部分括在括号内. 示例 1: 输入: num ...
- 【转】Java读写文件大全
使用Java操作文本文件的方法详解 最初java是不支持对文本文件的处理的,为了弥补这个缺憾而引入了Reader和Writer两个类,这两个类都是抽象类,Writer中 write(ch ...