微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

JavaScript跨浏览器获取页面中相同class节点的方法_javascript技巧

php中文网
发布： 2016-05-16 16:11:27
原创
1471人浏览过

网页开发时，在很多时候我们需要操作相同类名的元素，即class相同的元素。昨天参加笔试，有一道相关的题目没答上来：

JavaScript获取页面中class为test的节点

于是收集了一些相关的资料，在本文中列举了两种我觉得比较好的方法，不足之处，还望大家批评指正。如果大家有更好的方法，希望可以分享。

Solution1 Jeremy Keuth方案

Tellers AI
Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

Tellers AI 78
查看详情 Tellers AI

Jeremy Keuth大叔在《JavaScript DOM 编程艺术》（第2版）（英文：DOM Scripting-Web Design with JavaScript and the Document Object Model）一书的第三章第四节中讲到了getElementsByClass这个方法，并讲到了如何在不支持该属性的浏览器（IE6，IE7和IE8，让我们鄙视他们）中应用这一方法，摘录在此，个别地方有修改。

立即学习“Java免费学习笔记（深入）”；

HTML5 DOM中新增了一个方法让我们通过class属性中的类名来访问元素，这就是：getELementsByClassName，由于方法比较新，某些的DOM实现里还没有，因此在使用的时候要当心。下面我们先来看一看这个方法能帮我们做什么，然后在讨论怎么可靠的使用该方法。
与getELementsByTagName方法类似，getElementsByClassName也只接受一个参数，就是类名：

复制代码 代码如下:

getElementsByClassName(class)

这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组，下面这行代码返回的就是一个数组，其中包含类名为“sale”的所有元素：
复制代码 代码如下:

document.getElementsByClassName("sale")

使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名，只要在字符串参数中用空格分隔类名即可。例如，在<script>标签中添加下面这行代码：<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="71155" class="copybut" id="copybut71155" onclick="doCopy('code71155')"><U>复制代码 代码如下:<div class="codebody" id="code71155"><br /> alert(document.getElementsByClassName("sale important").length);<br /> <p><strong>完整代码 <p><div class="codetitle"><span><a style="CURSOR: pointer" data="10676" class="copybut" id="copybut10676" onclick="doCopy('code10676')"><U>复制代码 代码如下:<div class="codebody" id="code10676"><br /> <!DOCTYPE html><br /> <html> <br /> <head><br /> <meta charset="utf-8"> <br /> <title>Shopping List<br /> <br /> <body><br /> <h1>What to buy<br /> <p title="a gentle reminder">Don't forget to buy this stuff.<br /> <ul id="purchase"><br /> <li>A thin of beans<br /> <li class="sale">Cheese<br /> <li class="sale important">Milk<br /> <br /> <script><br /> alert(document.getElementsByClassName("sale important").length);<br /> </script>
相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JS烟花背景效果实现方法_javascript技巧 下一篇：JS实现鼠标点击展开或隐藏表格行的方法_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Apache ECharts 标题样式：文本颜色与阴影效果的精确配置 本教程详细讲解如何在ApacheECharts中正确设置图表标题的文本颜色和阴影效果。核心在于利用textStyle属性控制标题文本颜色，并通过为标题区域设置backgroundColor来激活并显示阴影效果，确保标题样式按预期呈现，提升图表的可视化表现力。
2025-11-21 12:25:13
422
解决JavaScript动态修改图片src属性后图片不显示的问题 本教程旨在解决JavaScript动态修改标签src属性后图片无法显示的问题。核心原因通常是图片路径设置不正确。文章将详细阐述如何正确指定图片路径，并通过示例代码演示在HTML、CSS和JavaScript中协同工作，确保图片能够成功加载并显示。
2025-11-21 12:24:05
611
JavaScript类型数组_TypedArray操作指南 TypedArray是JavaScript中用于操作ArrayBuffer上特定类型数值的视图统称，包含Int8Array、Uint8Array等多种类型，常用于高性能场景如音视频处理。通过new关键字可创建指定长度或基于ArrayBuffer的实例，支持索引读写、遍历及set/slice等操作，但长度固定且不支持push/pop。多个TypedArray可共享同一buffer，需注意数据重叠影响。选择合适类型能提升性能，如Uint8ClampedArray用于像素，Float32Array用于
2025-11-21 12:20:39
359
解决使用 EAS BUILD 导致 iOS 应用启动崩溃的常见问题与策略 本教程旨在解决使用ExpoEASBUILD后iOS应用启动崩溃的问题。文章详细分析了导致此类崩溃的四个主要原因：导航库依赖缺失、环境变量配置不当、字体包未安装以及依赖版本不兼容。通过提供具体的解决方案和检查步骤，帮助开发者确保本地与构建环境的一致性，从而顺利发布应用。
2025-11-21 12:03:46
466
JavaScript记忆化_函数缓存与计算结果复用 记忆化是用空间换时间的优化策略，通过缓存函数输入与结果的映射，避免重复计算。适合纯函数、计算密集型且参数重复调用的场景，如递归、React的useMemo、API去重等。手动实现可用Map或WeakMap存储键值对，JSON.stringify生成键但需注意边界问题，对象参数推荐WeakMap防止内存泄漏。需警惕内存占用，可结合LRU控制缓存大小。
2025-11-21 11:58:41
993
动态管理复选框关联子项：基于AJAX和数据属性的解决方案 本文旨在解决多选框联动场景中，动态加载和移除子项的常见问题。通过引入数据属性（data-*）为子项标记所属父级，并结合AJAX请求与jQuery选择器，实现当父级复选框被选中时添加对应子项，取消选中时精确移除特定子项，避免不必要的全局清空操作，从而提升用户体验和页面交互的精准性。
2025-11-21 11:54:21
228
优化JavaScript点击动画：解决元素重复点击时的位置偏移问题 本教程旨在解决JavaScript点击动画中，元素在重复点击同一位置后发生偏移的常见问题。文章深入分析了event.target属性变化导致坐标计算错误的根源，并提供了两种解决方案：一是通过简化坐标计算并结合pointer-events:noneCSS属性，二是通过动态创建元素，确保动画元素始终在正确的点击位置出现，从而避免布局错乱并提升用户体验。
2025-11-21 11:26:28
712
JavaScript动态图片切换：解决图片路径不正确导致显示失败的问题 本教程旨在解决JavaScript动态修改标签src属性时，图片无法显示而只显示alt文本的常见问题。核心原因通常是JavaScript中设置的图片相对路径与实际文件结构不符。文章将通过一个交互式案例，详细演示如何正确构建和修正图片路径，并提供HTML、CSS及修正后的JavaScript代码，帮助开发者有效调试并确保动态加载的图片能够正确显示。
2025-11-21 11:09:24
253
实现可选择性拖拽与取消选中功能的教程 本教程详细介绍了如何构建一个交互式UI系统，实现对多个组件（widgets）的选择、区域选择和拖拽功能。核心在于优化mousedown事件处理逻辑，确保当用户点击或拖拽一个未选中的组件时，所有已选中的组件自动取消选中；而当点击或拖拽一个已选中的组件时，则允许所有当前选中的组件一同被拖拽，从而提供直观的用户体验。
2025-11-21 10:59:22
338
JavaScript点击动画：解决元素定位偏移的常见问题 本文深入探讨了在JavaScript点击动画中，当重复点击同一位置时，元素可能出现定位偏移的常见问题。通过分析事件对象e.target的变化如何影响坐标计算，我们揭示了导致动画元素意外移动的根本原因。教程提供了详细的解决方案，指导开发者如何利用e.clientX和e.clientY精确获取点击位置，从而确保动画元素始终在预期位置正确显示，避免重复点击时的定位错误。
2025-11-21 10:52:27
652
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部