js选择器全面解析


Posted in Javascript onJune 27, 2016

原生JS选择器有getElementById、getElementsByName、getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法。

1.getElementById(通过ID获取元素)

用法:document.getElementById("Id");Id为要获取的元素的id属性值。

2.getElementsByName(通过name属性获取元素)

用法:document.getElementsByName("Name");Name为要获取元素的name属性值,这个方法一般适用于提交表单数据,当元素为form、img、iframe、applet、embed、object的时候设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

3.getElementsByTagName(通过元素名称获取元素)

用法:document.getElementsByTagName(TagName);TagName为要获取元素的标签名称,当TagName为*的时候表示获取所有的元素,document也可以换成DOM元素,但是这样就只能获取到该DOM元素后面的子集元素。

4.getElementsByClassName(通过CSS类来获取元素)

用法:document.getElementsByClassName(ClassName);ClassName为要获取元素的CSS类名称,如果要同时获取多个的话,在每个CSS类后面用空格隔开。 如document.getElementsByClassName("class2 class1")就会获取到class1和class2样式的元素,document也可以换成DOM元素,这样也是只能获取到该DOM元素后面的子集元素。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
<div>我是通过标签获取</div>
<div id="box">我是通过id获取</div>
<div class="box1">我是通过class获取</div>
<form action="" name="box2">
  我是通过name获取
</form>
</body>
<script type="text/javascript">
  var div = document.getElementsByTagName("div");
  var box = document.getElementById("box");
  var box1 = document.getElementsByClassName("box1");
  var box2 = document.getElementsByName("box2");
</script>
</html>

以上就是小编为大家带来的js选择器全面解析全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 #Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 #Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 #Javascript
全面了解javascript三元运算符
Jun 27 #Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 #Javascript
使用vue.js制作分页组件
Jun 27 #Javascript
js编写一个简单的产品放大效果代码
Jun 27 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
PHP实现简单登录界面
2019/10/23 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python函数参数分类原理详解
2020/05/28 Python
Python项目跨域问题解决方案
2020/06/22 Python
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
财务人员个人求职信范文
2013/12/04 职场文书
上课说话检讨书大全
2014/01/22 职场文书
驾驶员培训方案
2014/05/01 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android