您现在的位置是:首页 > Javascript
当前栏目
JS-获取DOM元素的五种方法
2023-03-31 10:40:54 时间
介绍
本文主要介绍通过JS获取DOM元素的5种方法:
- 根据id名获取元素:getElementById;
- 根据标签名获取元素:getElementsByTagName,返回一个数组;
- 根据类名获取元素:getElementsByClassName,返回一个数组;
- 根据name属性值获取元素:getElementsByName,返回一个数组;
- 根据选择器获取元素:
- querySelector:获取一个元素,推荐使用 用法类似写css;
- querySelectorAll:返回一个元素数组。
一、根据id名获取元素:getElementById
语法:document.getElementById(“id属性的值”);
返回值:是一个元素对象,即当前id的对象(获取到元素则返回该元素,如果页面上没有你所获取的id,则返回null)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1"></div>
</body>
<script type="text/javascript">
console.log(document.getElementById("d1"));
console.log(document.getElementById("d2"));
</script>
</html>
运行结果如下:
二、根据标签名获取元素:getElementsByTagName
语法:document.getElementsByTagName(“标签的名字”);
返回值:是一个伪数组,所以页面上没有对应标签的时候返回空数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div name="d1"></div>
<div name="d2"></div>
</body>
<script type="text/javascript">
console.log(document.getElementsByTagName("div"));
console.log(document.getElementsByTagName("p"));
</script>
</html>
运行结果如下:
三、根据类名获取元素:getElementsByClassName
语法:document.getElementsByClassName(“类样式的名字”);
返回值:是一个伪数组,所以页面上没有对应标签的时候返回空数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c2"></div>
</body>
<script type="text/javascript">
console.log(document.getElementsByClassName("c1"));
console.log(document.getElementsByClassName("c2"));
</script>
</html>
运行结果如下:
四、根据name属性的值获取元素:getElementsByName
语法:document.getElementsByName(“name属性的值”);
返回值:是一个伪数组,所以页面上没有对应标签的时候返回空数组
这个方法不推荐使用,因为在IE和欧朋浏览器中,通过这个方式会获取到相同的id的元素
五、根据选择器获取元素
1.1 document.querySelector();
语法:document.querySelector(“选择器”);
返回文档中匹配指定的选择器组的第一个元素
1.2 document.querySelectorAll();
语法:document.querySelectorAll(“选择器”);
返回文档中匹配指定的选择器组的所有元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
</body>
<script type="text/javascript">
console.log(document.querySelector(".c1"));
console.log(document.querySelectorAll(".c1"));
</script>
</html>
运行效果如下:
更多数据信息的获取,详见《JS-获取屏幕/显示器、浏览器、网页、DOM元素的宽高距离位置信息》
------------- The End -------------
许可协议: 转载请保留原文链接及作者。
相关文章
- 一文把三个经典求和问题吃的透透滴
- IT工程师都需要掌握的容器技术之DockerCompose
- 树 | 突然间,看了这篇文章,树我懂了!
- 响应式网页中的高度设计,你认真的吗?
- 聊聊十四个 JavaScript 的优化代码建议
- 前端如何实现一键截图功能?
- 报名启动 | 2020中国数字营销发展大会议程重磅首发11.28@北京
- 排名前5的JavaScript框架:趋势和前景
- 分布式监控系统之Zabbix主动、被动及web监控
- 阻塞队列—PriorityBlockingQueue源码分析
- JavaScript Lazy evaluation:可迭代对象与迭代器
- 避开低代码应用开发的三大陷阱
- 手写React核心原理,再也不怕面试官问我React原理
- 5分钟带你领略CSS常用技巧
- 「建议收藏」送你一份精心总结的3万字ES6实用指南(下)
- 打工人最爱技能:JavaScript的未来会走向何方?
- 什么是AVIF?如何在你的网站上使用AV1图像格式的图像
- 前端 | 嘿,Nest.js实战开发系列之使用TypeORM操作数据库
- 手把手教你如何在生产环境检查 Vue 应用程序
- 十分钟快速实战Three.JS感受它的无限魅力!