JS选取DOM元素的方法
摘自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元素的方法的更多相关文章
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- JS----获取DOM元素的方法(8种)
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- JS添加或删除HTML dom元素的方法实例分析
本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- Js为Dom元素绑定事件须知
为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- JS获取HTML DOM元素的方法
JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- JS复制DOM元素文字内容
要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: <html> <head> <title>Copy text De ...
随机推荐
- 深度学习—caffe框架训练文档
转存:LMDB E:\机器学习2\caffe资料\caffe_root\caffe-master\Build\x64\Release>convert_imageset.exe E:/机器学习2/ ...
- 改革春风吹满地,安卓新系统Q上线腾讯WeTest
“刚要适配安卓派,Q就来了.” 3月14日谷歌推出了期待已久的Android Q的首个测试版本Android Q Beta 1 ,这是Android系统推出以来的第十个大版本. 安卓Q相比之前的版本, ...
- spring-boot2.x Application properties属性配置
# =================================================================== # COMMON SPRING BOOT PROPERTIE ...
- 【微服务架构】SpringCloud组件和概念介绍(一)
一:什么是微服务(Microservice) 微服务英文名称Microservice,Microservice架构模式就是将整个Web应用组织为一系列小的Web服务.这些小的Web服务可以独立地编译及 ...
- 关于jsp中引用css外部样式无效时的处理方法
今天做项目遇到的一个小问题,如下所示: <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet ...
- 2.深入解析数据类型与变量——《Excel VBA 程序开发自学宝典》
2.1 数据类型 数据类型 所占字节 Byte 1 Boolean 2 Integer 2 Long 4 Single 4 Double 8 Currency 8 Decimal 14 Date 8 ...
- shell小记
1.以#!/bin/bash 开头2.执行方式 bash sh ./ `script`3.变量: 系统变量 自定义变量 --->export 可导出为全局环境变量 set显示所 ...
- 可道云kodexplorer搭建私有云后的配置优化
一.上传下载速度优化首先明确可道云没有对上传下载做任何限制,速度快慢和网络环境有关.可道云是基于http上传,所以和其他http上传速度基本一致:可以对比其他web系统或网站说附件上传速度.同其他例如 ...
- 蹭课神器NABCD分析
特点:添加了课程分类,同学们可以根据自己的兴趣蹭课N(need):众所周知,大学是丰富多彩的自有天堂,学生能够在课余去旁听一些自己有兴趣的课,我们项目要解 决的就是同学们对校园课程有针对性的选择.A( ...
- 【贪心算法】POJ-2376 区间问题
一.题目 Description Farmer John is assigning some of his N (1 <= N <= 25,000) cows to do some cle ...