了解JavaScript中的选择器


Posted in Javascript onMay 24, 2019

在html5之前只有下面四种选择器

.getElementById("id")id选择器;
.getElementsByName("name")name选择器;
.getElementsByTagName("tagname")tag标签名选择器;
.getElementsByClassName(".classname").class名选择器

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript选择器</title>
<style>
 
 .div{
  border: 2px solid red;
 } p{
  color: red;
 }
</style>
</head>
<body>
 <p>id选择器</p>
 <div id="first"></div>
 <p>name选择器</p>
 <div name="first"></div>
 <div name="first"></div>
 <p>tag标签选择器</p>
 <span></span>
 <span></span>
 <p>css中.class选择器</p>
 <div class="div"></div>
 <div class="div"></div>
</body>
<script>
 document.getElementById("first").innerHTML="<h4>我是id选择器效果</h4>";
 document.getElementsByName("first")[0].innerHTML="<h4>我是第一个name选择器效果</h4>";
 document.getElementsByName("first")[1].innerHTML="<h4>我是第二个name选择器效果</h4>";
 document.getElementsByTagName("span")[0].innerHTML="<h4>我是第一个tag选择器效果</h4>";
 document.getElementsByTagName("span")[1].innerHTML="<h4>我是第二个tag选择器效果</h4>";
 document.getElementsByClassName("div")[0].innerHTML="<h4>我是第一个.class选择器效果</h4>";
 document.getElementsByClassName("div")[1].innerHTML="<h4>我是第二个.class选择器效果</h4>";
</script>
</html>

运行截图:

了解JavaScript中的选择器

从结果可以看出各个返回值类型

.getElementById("id")id选择器-----node单节点型(第一个id【具有唯一性】相同元素)
.getElementsByName("name")name选择器----nodelist类数组型
.getElementsByTagName("tagname")tag标签名选择器----nodelist类数组型
.getElementsByClassName(".classname").class名选择器—nodelist类数组型

在html5产生后,就产生了另外两种选择器,用法与css选择器类同
querySelector():根据选择器规则返回第一个符合要求的元素(node)
querySelectorAll():根据选择器规则返回所有符合要求的元素(nodelist)

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript选择器</title>
<style>
	.div{
		border: 2px solid red;
	}
	p{
		color: red;
	}
	h3{
		color: darkblue;
	}
</style>
</head>
<body>
	<h3>querySelector()根据选择器规则返回第一个符合要求的元素 </h3>
	<p>通过id获取单节点</p>
	<div id="second"></div>
	<p>通过.class获取单节点</p>
	<div class="div"></div>
	<h3>querySelectorall()根据选择器规则返回所有符合要求的元素 </h3>
	<div></div>
</body>
<script>
	document.querySelector("#second").innerHTML="<h4>我是通过id选择效果</h4>";
	document.querySelector(".div").innerHTML="<h4>我是通过.class选择效果</h4>";
	document.querySelectorAll("div")[2].innerHTML="<h4>我是通过tag选择第三个的效果</h4>";
</script>
</html>

运行截图:

了解JavaScript中的选择器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js改变文章字体大小的实例代码
Nov 27 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
js隐式转换的知识实例讲解
Sep 28 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
Javascript通过控制类名更改样式
May 24 #Javascript
redux.js详解及基本使用
May 24 #Javascript
javascript获取元素的计算样式
May 24 #Javascript
运用js实现图层拖拽的功能
May 24 #Javascript
了解javascript中let和var及const关键字的区别
May 24 #Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 #Javascript
小程序登录/注册页面设计的实现代码
May 24 #Javascript
You might like
PHP 简单数组排序实现代码
2009/08/05 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
QQ登录简单实现代码
2021/03/09 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
采用call方式实现js继承
2014/05/20 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
详解Django通用视图中的函数包装
2015/07/21 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python的re模块正则表达式操作
2016/05/25 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
动物科学专业毕业生的自我评价
2013/11/29 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
婚礼主持词
2014/03/13 职场文书
我的画教学反思
2014/04/28 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
员工辞职信范文大全
2015/05/12 职场文书