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. JQuery 选中Radio

    <tr> <td> <input type="radio" name="rdb" value="启用" che ...

  2. poj 1265 Area (Pick定理+求面积)

    链接:http://poj.org/problem?id=1265 Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions:  ...

  3. POJ 3669 Meteor Shower（流星雨）

    POJ 3669 Meteor Shower(流星雨) Time Limit: 1000MS    Memory Limit: 65536K Description 题目描述 Bessie hears ...

  4. iOS : 静态库(.framework)合并

    如果写了一个Framework,根据Build时选择的机器类型,会分为模拟器Framework和真机Framework,两者是不能混用的. 此时可以通过配置一个Run Script,在Script中使 ...

  5. DOM 操作XML(CRUD)

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><书架> ...

  6. html5 和css3的小知识！

    阿里web字体的使用 (1)进入官网  点击webfont (2)输入对应的文字 然后选择添加字体 (3)可以直接引用线上地址或者本地下载,引用线上地址需要添加http,(在服务器环境下可以不用),如 ...

  7. 转载---jboss简单使用

    初学Jboss,对于Jboss的基础认识以及配置做一些记录 Jboss基础: JBoss是什么–基于J2EE的应用服务器–开放源代码–JBoss核心服务不包括支持servlet/JSP的WEB容器,一 ...

  8. asmca无法创建ASM磁盘

    现象 grid用户使用asmca无法创建asm磁盘,如下图 分析 如图所示,报错说是 Grid Infrastructure 出了问题.那么 Grid Infrastructure 是什么 ? 在安装 ...

  9. iOS 沙盒(sandbox)机制和文件操作

    本文参看了 http://www.uml.org.cn/mobiledev/201209211.asp#1 这篇文章中的介绍,尊重原著. 1.IOS沙盒机制 IOS应用程序只能在本应用程序中创建的文件 ...

  10. c语言数据结构：递归的替代-------回溯算法

    1.要理解回溯就必须清楚递归的定义和过程. 递归算法的非递归形式可采用回溯算法.主要考虑的问题在于: 怎样算完整的一轮操作. 执行的操作过程中怎样保存当前的状态以确保以后回溯访问. 怎样返回至上一次未 ...