了解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中sort()方法的用法
Nov 04 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
React 组件间的通信示例
Jun 14 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python中的yield使用方法
2014/02/11 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
我就是这样学习Python中的列表
2019/06/02 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python小项目之五子棋游戏
2019/12/26 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
行政部工作岗位职责范本
2014/03/05 职场文书
影视广告专业求职信
2014/09/02 职场文书
运动会加油稿
2015/07/22 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS