JavaScipt选取文档元素的方法(推荐)


Posted in Javascript onAugust 05, 2016

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选)

选取文档元素的方法:

1、通过ID选取元素(getElementById)

1)使用方法:document.getElementById("domId")
        其中,domId为要选取元素的id属性值

2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素。

2、通过名称name选取元素(getElementsByName)

1)使用方法:document.getElementsByName("domName")
        其中,domName为要选取元素的name属性值

2)说明:

a. 返回值是一个nodeList集合(区别于Array)

b. 和ID属性不一样,name属性只在少数DOM元素中有效(form表单、表单元素、iframe、img)。这是因为name属性是为了方便提交表单数据而打造的。            

c. 为form、img、iframe、applet、embed、object元素设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

3)兼容性:IE中ID属性值匹配的元素也会一起返回

3、通过标签名选取元素(getElementsByTagName)

1)使用方法:document.getElementsByTagName("tagName")

其中,element是有效的DOM元素(包括document)
                 tagName是DOM元素的标签名

如:var aInput = document.getElementsByTagName("input");

 var aName = aInput[0];

 var pwd = aInput[1];

  var cfm = aInput[2];

2)说明:a. 返回值是一个nodeList集合(区别于Array)

b. 该方法只能选取调用该方法的元素的后代元素。

c. tagName不区分大小写

d. 当tagName为*时,表示选取所有元素(需遵从b.规则)

e. HTMLDocument会定义一些快捷属性来访问标签节点。如:document的images、forms、links属性指向<img>、<form>、<a>标签元素集合,而document.body和document.head总是指向body和head标签(当未显示声明head标签时,浏览器也会创建document.head属性)

4、通过CSS类选取元素(getElementsByClassName)

1)使用方法:element.getElementsByClassName("classNames")

其中,element是有效的DOM元素(包括document)

classNames是CSS类名称的组合(多个类名之间用空格,可以是多个空格隔开),

如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素(样式名称不区分先后顺序)

2)说明:

a. 返回值是一个nodeList集合(区别于Array)  

b. 该方法只能选取调用该方法的元素的后代元素。

3)兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法

5、通过CSS选择器选取元素

1)使用方法:document.querySelectorAll("selector")

其中,selector为合法的CSS选择器

2)说明:a. 返回值是一个nodeList集合(区别于Array)

3)兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法

以上这篇JavaScipt选取文档元素的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
javascript实现的动态文字变换
Jul 28 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
使用Vue生成动态表单
Nov 26 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 #Javascript
jQuery实现定位滚动条位置
Aug 05 #Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 #Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 #Javascript
JavaScript中的this引用(推荐)
Aug 05 #Javascript
JS实现HTML表格排序功能
Aug 05 #Javascript
JavaScript如何实现跨域请求
Aug 05 #Javascript
You might like
php文件上传的两种实现方法
2016/04/04 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
angular分页指令操作
2017/01/09 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
VsCode与Node.js知识点详解
2019/09/05 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
js实现随机抽奖
2020/03/19 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
在Django中创建第一个静态视图
2015/07/15 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
wxPython色环电阻计算器
2019/11/18 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
关于工资低的辞职信
2014/01/14 职场文书
节水倡议书范文
2014/04/15 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
公司总经理岗位职责
2015/04/01 职场文书
送达通知书
2015/04/25 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技