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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
vue实现倒计时功能
Mar 24 Vue.js
通过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
PHP中一个控制字符串输出的函数
2006/10/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
Javascript的比较汇总
2016/07/25 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
vue axios用法教程详解
2017/07/23 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
法律专业推荐信范文
2013/11/29 职场文书
安全负责人任命书
2014/06/06 职场文书
好人好事演讲稿
2014/09/01 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
旷工辞退通知书
2015/04/17 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
nginx 配置指令之location使用详解
2022/05/25 Servers
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL