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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
通过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
建立文件交换功能的脚本(一)
2006/10/09 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
Vue组件中slot的用法
2018/01/30 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python对象属性自动更新操作示例
2018/06/15 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python timeit模块原理及使用方法
2020/10/10 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
活动策划邀请函
2014/02/06 职场文书
文科生自我鉴定
2014/02/15 职场文书
2014年冬季防火方案
2014/05/21 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
实习单位指导教师评语
2014/12/30 职场文书
2015年征兵工作总结
2015/07/23 职场文书
学习党史心得体会2016
2016/01/23 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电