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中alert()与console.log()的区别
Aug 26 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
vue中 v-for循环的用法详解
Feb 19 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
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python使用matplotlib画饼状图
2018/09/25 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
四年大学生活的自我评价范文
2014/02/07 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
食品销售计划书
2014/04/26 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
一个都不能少观后感
2015/06/04 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
python 多态 协议 鸭子类型详解
2021/11/27 Python