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. HDU 5877 Weak Pair（弱点对）

    HDU 5877 Weak Pair(弱点对) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Jav ...

  2. CSS笔记（十五）CSS3之用户界面

    参考:http://www.w3school.com.cn/css3/css3_user_interface.asp 在 CSS3 中,新的用户界面特性包括重设元素尺寸.盒尺寸以及轮廓等. 新的用户界 ...

  3. C#正则表达式编程（二）：Regex类用法

    上一篇讲述了在C#中有关正则表达式的类之间的关系,以及它们的方法,这一篇主要是将Regex这个类的用法的,关于Match及MatchCollection类会在下一篇讲到.对于正则表达式的应用,基本上可 ...

  4. win10系统更新补丁时进度条一直卡在0%不动的解决方案

    为了能够让win10系统更加安全稳定,很多用户都会时不时为自己的电脑安装补丁.不过,部分用户在为win10系统更新补丁时,却会遇到进度条一直卡在0%不动的问题.这该怎么办呢?下面,小编就告诉大家解决该 ...

  5. bootstrap学习笔记<十>（按钮组，导航）

    1)按钮组.样式:class="btn-group" <div class="btn-group"> <button class=" ...

  6. hdu 5340 Three Palindromes

    前几晚 BC 的第二题,官方给出的题解是: 然后我结合昨天刚看的 Manacher 算法试着写了下,发现 pre.suf 数组挺难构造的,调试了好久,然后就对中间进行枚举了,复杂度应该是 O(n2) ...

  7. Android控件之MultiAutoCompleteTextView（自动匹配输入的内容）

    一.功能 可支持选择多个值(在多次输入的情况下),分别用分隔符分开,并且在每个值选中的时候再次输入值时会自动去匹配,可用在发送短信,发邮件时选择联系人这种类型中 二.独特属性 android:comp ...

  8. /dev/sda3: UNEXPECTED INCONSISTENCY; RUN fsck MANUALLY

    系统强制断电后,出现以下错误: /dev/sda3: UNEXPECTED INCONSISTENCY; RUN fsck MANUALLY 启动系统后在字符界面有两个选项,输入root密码进入维护模 ...

  9. jQuery数组的遍历 function的加载

    加载函数时会被覆盖在jQuery中给提供的方案有三种形式 js中只能绑定一个方法 如果多次绑定后者会覆盖前者 最常用的一种 在jQuery中数组的遍历 使用map遍历数组  会返回一个新的数组  如果 ...

  10. c++11 其他特性（一）

    c++11还增加了许多有用的特性,比如: 1. 委托构造函数 如果一个类含有很多构造函数,这些构造函数有一些重复的地方,比如: class A{ public: A(){}; A(int a){ a_ ...