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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jquery实用代码片段集合
Aug 12 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP获取文件夹内文件数的方法
2015/03/12 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python 调用有道api接口的方法
2019/01/03 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python 并发下载器实现方法示例
2019/11/22 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
销售自我评价
2013/10/22 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
董事长助理岗位职责
2014/02/18 职场文书
美容院经理岗位职责
2014/04/03 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers