1.通过id获取DOM元素的方法：document.getElementById("id名")

2.通过class获取DOM元素的方法：document.getElementsByClassName("class名")

从函数的名字可以知道，通过getElementsByClassName获取到的是一个数组，包括多个DOM元素，所以要执行DOM元素的方法，必须加一个索引，比如document.getElementsByClassName("class名")[0]。

而由于id是唯一的，所以通过getElementById只有一个DOM元素，可以直接调用DOM方法。

比如隐然DOM元素

1、document.getElementById("id名").style.display="none"

2、document.getElementsByClassName("class名")[0].style.display="none"

通过class和id获取DOM元素的区别的更多相关文章

  1. document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

    想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,   尤其是 document.getElementById 和 document.getElementsByClassName, ...

  2. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  3. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  4. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  5. Vue系列之 => ref获取DOM元素和组件

    可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  7. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  8. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  9. 第六章 组件 67 使用ref获取DOM元素和组件引用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. C# 十进制与十六进制互转

    1.从十六进制转换为十进制 /// <summary> /// 十六进制转换到十进制 /// </summary> /// <param name="hex&q ...

  2. How to build a GUI in ROS with Qt / C++

    p { margin-bottom: 0.1in; direction: ltr; line-height: 120%; text-align: left; widows: 2; orphans: 2 ...

  3. STORM_0010_Message passing implementation/消息传递的实现

    下面是0.8.0之前的表述,之后的已经基于Disruptor改造过了 这个文章演示了发射和转移tuple是怎么在storm中工作的   Worker为消息传递负责 当zk中的任务出现了变化或者每个ta ...

  4. XML约束——Schema约束

    XML Schema 也是一种用于定义和描述 XML 文档结构与内容的模式语言,其出现是为了克服 DTD 的局限性 XML Schema VS DTD: •XML Schema符合XML语法结构. • ...

  5. jQuery细节总结

    1.mouseover和mouseenter 区别 mouseenter指鼠标进入元素时触发,鼠标在元素子元素上不触发. mouseover指鼠标进入元素时触发,在元素进入子元素会触发. 在此引用一个 ...

  6. c++ vector 简单实现。

    第二次修改: 1)熟悉基本的模板编程,头文件和定义必须放到一起. 2)熟悉内存管理模板类 allocator<T>. 1.使用标准库的内存管理类 allocator<T> 代替 ...

  7. python中super关键字的用法

    http://python.jobbole.com/86787/ class A: def __init__(self):    print "enter A"    print ...

  8. Linux的中断 & 中断和异常的区别

    参考 http://www.yesky.com/20010813/192117.shtml 结构化程序设计思想认为:程序 ＝ 数据结构 + 算法.数据结构体现了整个系统的构架,所以数据结构通常都是代码 ...

  9. 【Todo】Lucene系统学习

    之前已经写过一篇关于Lucene安装学习的文章:http://www.cnblogs.com/charlesblc/p/5980525.html 还有一篇关于Solr安装使用的文章:http://ww ...

  10. 数据库索引B+树

    面试时无意间被问到了这个问题:数据库索引的存储结构一般是B+树,为什么不适用红黑树等普通的二叉树? 经过和同学的讨论,得到如下几个情况: 1. 数据库文件是放在硬盘上,每次读取数据库都需要在磁盘上搜索 ...