总结获取元素的方式

1. 根据id属性的值获取元素,返回来的是一个元素对象
document.getElementById("id属性的值");
document.getElementById("btn");
2. 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByTagName("标签名字");
document.getElementsByTagName("li");
下面的几个,有的浏览器不支持
 
3. 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByName("name属性的值")
document.getElementsByName("name1")
4. 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByClassName("类样式的名字")
document.getElementsByClassName("cls")
5. 根据选择器获取元素,返回来的是一个元素对象
document.querySelector("选择器的名字");
document.querySelector("#btn"); //id,类,标签等选择器用的比较多
6. 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.querySelectorAll("选择器的名字")
 
 

JS---DOM---总结获取元素的方式的更多相关文章

  1. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  2. 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. Appium获取元素的方式

    1.apk包名和launcherActivity 1.1.获取包名 所有应用包名列表 adb shell pm list packages 第三方应用包名列表 adb shell pm list pa ...

  4. DOM——获取元素的方式

    document.getElementById("id属性的值"): //可以通过元素的 id 来获取元素,返回的是一个元素对象 document.getElementByName ...

  5. App自动化之dom结构和元素定位方式(包含滑动列表定位)

    900×383 38 KB 先来看几个名词和解释: dom: Document Object Model 文档对象模型 dom应用: 最早应用于html和js的交互.界面的结构化描述, 常见的格式为h ...

  6. JavaScript中几种 获取元素的方式

    1.根据id获取元素 document.getElementById("id属性的值"); 2.根据标签名字获取元素 document.getElementsByTagName(& ...

  7. JavaScript的DOM操作获取元素实际大小

    clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...

  8. 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制

    这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...

  9. javascript的DOM操作获取元素

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

随机推荐

  1. AI如何驱动软件开发?华为云DevCloud 权威专家邀你探讨

    近期,国际著名咨询公司Gartner 在一份研究报告中将 "AI-Driven Development" 列为 2019 年的 Top 10 Strategic Technolog ...

  2. 联万物,+智能,为行业,华为云升级OceanConnect IoT全栈云服务

    [中国,上海,2019年9月19日] 9月18日,在HUAWEI CONNECT 2019期间,华为云CTO张宇昕在华为云峰会上升级OceanConnect IoT全栈云服务,发布包括端.边.管.云. ...

  3. 【如何让代码变“高级”(二)】-这样操作值得一波666(Java Stream)(这么有趣)

    [如何让代码变“高级”(二)]-这样操作值得一波666(Java Stream)(这么有趣) 开发中的代码 在开发中的代码是不是很常见这样的代码: 这样的? for循环取元素取值 List<Us ...

  4. 自定义 cell

    自定义 cell 1 什么是自定义 cell 自定义 cell 即 tableView,collectionView,scrollView中的 cell 使用的时候不能满足我们使用 cell 的需求, ...

  5. react-native 相对项目路径导入组件 ___ babel-plugin-root-import

    在使用react-native的时候,经常要自定义很多组件,但是只能使用../../../的方式,经常不记得这是多深,有没有一个插件,能自动帮我们解决这样的问题? 使用指南 我们使用的目标要达到以下的 ...

  6. HDU1517 Multiply Game

    Stan and Ollie play the game of multiplication by multiplying an integer p by one of the numbers 2 t ...

  7. 大数据之Linux服务器集群搭建

    之前写过一篇关于Linux服务器系统的安装与网关的配置,那么现在我们要进一步的搭建多台Linux服务器集群. 关于单台服务器的系统搭建配置就不在赘述了,详情见https://www.cnblogs.c ...

  8. 小程序如何支持使用 async/await (构建npm版)

    前言 小程序本身是不支持async/await语法的,但有些应用场景,我们使用async/await会使得代码更简洁,也更易于维护,用过都知道是有多爽的.既然小程序不支持,那我们可以借助 fackbo ...

  9. 将项目部署到github的方法

    GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 We ...

  10. 【赠书】300- 59篇原创带你进入 JavaScript 生态圈

    点击上方"前端自习课"关注,学习起来~ 不知不觉,[前端自习课]已经连续推送300天整(不含删除的文章),每天一篇,正如公众号的 Slogan:每日清晨,享受一篇前端优秀文章. 运 ...