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 ...
随机推荐
- ssm 使用中的一些问题
1.问题:[org.mybatis.spring.SqlSessionUtils] - Creating a new SqlSession [org.mybatis.spring.SqlSession ...
- [Python3网络爬虫开发实战] 3.2.1-基本用法
1. 准备工作 在开始之前,请确保已经正确安装好了requests库.如果没有安装,可以参考1.2.1节安装. 2. 实例引入 urllib库中的urlopen()方法实际上是以GET方式请求网页,而 ...
- MySQL-----改
改 **修改用户名** rename user 'username'@'IP address' to 'new username'@'IP address'; **修改密码** set passwor ...
- 九度oj 题目1074：对称平方数
题目1074:对称平方数 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6422 解决:2912 题目描述: 打印所有不超过n(n<256)的,其平方具有对称性质的数. 如11*11 ...
- 动态规划之最长递增子序列（LIS）
在一个已知的序列{ a1,a2,……am}中,取出若干数组成新的序列{ ai1, ai2,…… aim},其中下标 i1,i2, ……im保持递增,即新数列中的各个数之间依旧保持原数列中 ...
- DEA中MAVEN项目有多个子目录，如何加载构建
ddts这个项目有三个子目录,每个子目录下面也都有一个 pom.xml 此时需要 右键子目录的 pom.xml,选择Add as Maven Project,在上图中cli.core两个目 ...
- Codeforces Round #489 (Div. 2) B、C
B. Nastya Studies Informatics time limit per test 1 second memory limit per test 256 megabytes input ...
- PostgreSQL及PostGIS使用
基础知识 参考文档:http://www.postgis.net/docs/ PostGIS支持的GIS对象是OpenGIS Consortium(OGC)定义的“简单特征”的超集.OpenGIS规范 ...
- SpringBoot学习day01
SpringBoot目的在于创建和启动新的基于Spring框架的项目.SpringBoot会选择最合适的Spring子项目和第三方开源库进行整合.大部分SpringBoot应用只需要非常少量的配置就可 ...
- iframe显示滚动条
子页面通过iframe加载,出现了竖向滚动条 最后查出原因:文档申明 iframe有滚动条的页面的文档申明 <!DOCTYPE html> 改成如下就行了 <!DOCTYPE HTM ...