了解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解析XML的实现代码
Nov 12 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 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
用mysql内存表来代替php session的类
2009/02/01 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP使用数组实现队列
2012/02/05 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
工地安全标语
2014/06/07 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
go开发alertmanger实现钉钉报警
2021/07/16 Golang
python画条形图的具体代码
2022/04/20 Python