总结获取元素的方式

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. 【开发者portal在线开发插件系列一】profile和基本上下行消息

    前言: 开发者portal支持在线开发profile(即设备建模).在线开发插件.模拟应用管理设备.模拟设备上报数据接收命令.支持离线开发的profile和插件的上传部署,是合作伙伴快速集成设备.对接 ...

  2. STM32F4 阿波罗寄存器 进阶版LED灯

    上一节通过使用操作地址的方式进行了寄存器的操作,接下来通过两个部分,实现进阶版的操作寄存器(将寄存器的地址进行命名,然后使用名字进行调用  比如商场的A座5楼345号为卖玩具的,我们可以定义地址为sh ...

  3. 十大C++实战项目,你会几个?【高薪必备】

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:实验楼   市面上有很多C++的实战项目,从简单到进阶,学习每个项目都 ...

  4. 【hibernate】存储图片

    [hibernate]存储图片 转载: package cn.ycx.study.hibernate.entity; import javax.persistence.Entity; import j ...

  5. 【Eclipse】Spring Tool Suite插件

    Spring Tool Suite插件 最新下载地址:https://spring.io/tools3/sts/all 以前下载地址:https://spring.io/tools3/sts/lega ...

  6. synchronized和volatile区别

    不同一: synchronized可以修饰方法, volatile只能修饰变量 不同二: synchronized是同步的 volatile修饰的变量具有可见性.

  7. python网络编程socket编程(TCP、UDP客户端服务器)

    摘录 python核心编程 使用socket()模块函数创建套接字——通信端点 >>> from socket import * >>> tcpSock = soc ...

  8. SpringCloud-服务注册与实现-Eureka创建服务注册中心(附源码下载)

    场景 SpringCloud学习之运行第一个Eureka程序: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90611451 S ...

  9. CVE-2018-12613-phpmyadmin4.8.1远程文件包含漏洞复现

    CVE-2018-12613-phpmyadmin4.8.1远程文件包含漏洞复现 参考文章1 参考文章2 By:Mirror王宇阳 漏洞原理 攻击者利用发现在服务器上包含(查看和潜在执行)文件的漏洞. ...

  10. 61-如何使用 Weave 网络?

    weave 是 Weaveworks 开发的容器网络解决方案.weave 创建的虚拟网络可以将部署在多个主机上的容器连接起来.对容器来说,weave 就像一个巨大的以太网交换机,所有容器都被接入这个交 ...