了解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 相关文章推荐
jquery 经典动画菜单效果代码
Jan 26 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
Puppet的一些技巧
Sep 17 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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将向Java靠拢
2006/10/09 PHP
ip签名探针
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
js 实现菜单上下显示附效果图
2013/11/21 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
angularjs 缓存的使用详解
2018/03/19 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
angularjs http与后台交互的实现示例
2018/12/21 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
学习python类方法与对象方法
2016/03/15 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
如何强制垃圾回收
2015/10/06 面试题
导购员的岗位职责
2014/02/08 职场文书
一年级班主任感言
2014/03/08 职场文书
大学生简历求职信
2014/06/24 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
丧事主持词
2015/07/02 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android