总结获取元素的方式

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. 基于webpack实现多html页面开发框架六 提取公共代码

    一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...

  2. JavaScript&&jQuery创建新节点和操作属性对比

    JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...

  3. 纯CSS与HTML实现垂直时间轴

    原创YouTube HTML源码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. [TimLinux] JavaScript 面向对象程序设计

    1. 面向对象 面向对象语言有一个标志:都有类的概念.通过类可以创建任意多个具有相同属性和方法的对象.ECMAScript中没有类的概念,因此JavaScript中的对象夜雨基于类的语言中的面向对象有 ...

  5. MDS 多活配置

    CephFS 介绍及使用经验分享 阅读 1179 收藏 2 2019-01-14 原文链接:www.jianshu.com WebRTC SFU中发送数据包的丢失反馈juejin.im 目录 Ceph ...

  6. CSS之position属性

    层级的话可以用z-inde进行设置

  7. django基础之day04,聚合查询和分组查询

    聚合查询: 聚合函数必须用在分组之后,没有分组其实默认整体就是一组 Max Min Sum Avg Count 1.分组的关键字是:aggretate 2.导入模块 from django.db.mo ...

  8. 《MySQL数据库》MySQL数据库安装(windows)

    MySQL安装包和操作工具 链接: https://pan.baidu.com/s/1BTfrHwVR1uNBuB_E27N55g 提取码: dhbv 1.首先解压文件包,我这解压到E:\instal ...

  9. Dc:7 Vulnhub Walkthrough

    靶机下载地址: https://www.vulnhub.com/entry/dc-7,356/ 主机扫描: http://10.10.202.161/ Google搜索下: SSH 登录 以上分析得出 ...

  10. 无法Google的解决方案

    献给新入开发行业的小伙伴. 本文不会事无巨细的讲解每一个细节,只是为读者提供一个路线图,并提供相应的参考资料. 为了更高效的解决各种技术问题,有时不得不到墙外去寻找解决方案.每个开发者效率高了,宏观来 ...