总结获取元素的方式

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. Android手机打造你的Python&Java开发工具!

    开发者桌面 之前写过一篇文章:将Android手机打造成你的python开发者桌面 在安卓手机上通过Termux软件,创建一个模拟Linux系统,它的好处就是无需root,即可在手机中编写Python ...

  2. 模板引擎Thymeleaf

    1.Thymeleaf简介 Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点 Thyme ...

  3. docker tomcat镜像部署springbootwar包

    springboot打war包 1.在pom文件中增加插件 <build> <finalName>xx</finalName> <plugins> &l ...

  4. PC端、移动端页面适配方案

    前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...

  5. rails 构建 API

    我是来鼓吹使用 Rails 写 API 的. 原文在此: https://labs.kollegorna.se/blog/2015/04/build-an-api-now/ 原文有一个很大的缺陷就是读 ...

  6. python 中 and or

    在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样,但是它们并不返回布尔值:而是,返回它们实际进行比较的值之一. 一.and: 在布尔上下文中从左到右演算表达式的值,如果布尔上下 ...

  7. 湖南大学第十四届ACM程序设计新生杯(重现赛)G a+b+c+d=? (16进制与LL范围)

    链接:https://ac.nowcoder.com/acm/contest/338/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536K6 ...

  8. dev gridcontrol简单的动态设置动态表头

    1)使用BandedGridView控件(此处演示BandedGridView控件包含8个列)2)往BandedGridView控件里添加GridBand控件(此处演示添加了4个) 3)///设置添加 ...

  9. UWP GraphQL数据查询的实现

    1. 缘起 Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 年开源,现已经在多种环境下可用,并被各种体量的团队所使用. 在这个链接可以看到更多 ...

  10. js中的对象知识总结

    文章目录: 1. 比较两个对象是否相等 1. 比较两个对象是否相等 通过===运算符,只有在两个变量指向同一个对象时才返回true,否则返回false.要想比较两个对象中的内容是否相等,需要利用遍历对 ...