JS选取DOM元素的简单方法


Posted in Javascript onJuly 08, 2016

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

今天试了下各种选取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox)

选取文档元素的方法:

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)使用方法:element.getElementsByTagName("tagName")
   其中,element是有效的DOM元素(包括document)

tagName是DOM元素的标签名

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标准的选择器语法

以上这篇JS选取DOM元素的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Javascript 构造函数详解
Oct 22 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
封装获取dom元素的简单实例
Jul 08 #Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 #Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 #Javascript
Augularjs-起步详解
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 #Javascript
Angularjs---项目搭建图文教程
Jul 08 #Javascript
You might like
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
keras导入weights方式
2020/06/12 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
什么是会话Bean
2015/05/14 面试题
J2EE面试题
2016/03/14 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
应付会计岗位职责
2013/12/12 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
经典演讲稿开场白
2014/08/25 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2014年德育工作总结
2014/11/20 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android