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动画方法 jquery.animate()

    目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...

  2. eclipse 技巧

    1. eclipse中xml中提示需有xsd文档 如在线eclipse将自动网络获取.xsd 否则 手动本地添加(在xml catalog参数设置选项) 2.当明确实现功能时,可将已有方法抽取成接口, ...

  3. 【Todo】Nginx架构学习

    要进行Web服务,绕不开的就是Nginx.这已经是大型网站的标配.对Nginx进行一定程度的深入学习. http://www.ituring.com.cn/article/4436 http://bl ...

  4. ios 开发之 Xcode6 No valid signing identities (i.e. certificate and private key pair) matching...

    之前的项目用证书真机测试过,我想再无证书Build,出现下面的报错提示! 下面的team我无法改成None!一点击None选的还是Unhonw name(JPGE28K3W9)这个是报错的关键 最后由 ...

  5. iOS之Photos：访问某个相册通过collectionView显示

    文中相关知识点较多,只记载重点思路,相关部分都有对应注释说明,部分还需要优化,只是工作学习的一种思路. @import AVFoundation; @import Photos;   导入框架 - ( ...

  6. Linux命令：traceroute（windows中为tracert）

    通过traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...

  7. hdu1907(anti-sg入门)

    改变了下规则,现在变成了最后拿的人输. 如果对于单纯的nim的话,只需要判断每堆都是1个石子的特殊情况. 因为如果存在有大于1个石子的堆话,类似于nim的取法,处于必胜状态的一方只需要在 对方取完后只 ...

  8. 转：C++中Static作用和使用方法

    转自:http://blog.csdn.net/artechtor/article/details/2312766 1.什么是static?       static 是C++中很常用的修饰符,它被用 ...

  9. 转！！！Mysql无法创建外键的原因

    在Mysql中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1.  两个字段的类型或者大小不严格匹配.例如,如果一个 ...

  10. AngularJS的directive（指令）配置选项说明

    js代码如下: var appModule = angular.module("appModule", []); appModule.controller("Ctrl&q ...