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 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
微信小程序转发事件实现解析
Oct 22 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
VUE中v-model和v-for指令详解
2017/06/23 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
深入理解Django的自定义过滤器
2017/10/17 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
CSMA/CD介质访问控制协议
2015/11/17 面试题
公司成立感言
2014/01/11 职场文书
高校教师自荐信范文
2014/03/13 职场文书
太太口服液广告词
2014/03/20 职场文书
保护环境倡议书300字
2014/05/19 职场文书
法人授权委托书范本
2014/09/17 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers