了解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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 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将session放入memcached的设置方法
2014/02/14 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
python循环监控远程端口的方法
2015/03/14 Python
Python实例一个类背后发生了什么
2016/02/09 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python学生信息管理系统(初级版)
2018/10/17 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
消防安全员岗位职责
2014/03/10 职场文书
《春天来了》教学反思
2014/04/07 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
大学开学计划书
2014/04/30 职场文书
企业文化标语口号
2014/06/09 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
在职证明范本
2015/06/15 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript