使用javascript通过className来获取元素
在网页中除了需要用id, name, tag等来获取元素外,也需要用css的class来获取。
今天找了下资料,记录一下。
原理: 用document.getElementsByTagName('*');来获取所有元素,然后取得相同Class的元素。
- function getElementsByClassName(n) {
- var classElements = [],allElements = document.getElementsByTagName('*');
- for (var i=0; i< allElements.length; i++ )
- {
- if (allElements[i].className == n ) {
- classElements[classElements.length] = allElements[i];
- }
- }
- return classElements;
- }
使用方法如下:
- var redClassElements = getElementsByClassName('red');
- for (var i=0; i<redClassElements.length; i++) {
- redClassElements[i].style.display = "none";
- }
使用javascript通过className来获取元素相关推荐
- js通过classname来获取元素
原生JS有3种方式来获取元素: getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElemen ...
- JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法
今天做了一个frameset的集合页面,其中有多个iframe页面,其中点击frame=leftMenu里的按钮元素后,需要修改frame=Header页面里的一个div元素属性. 1.主页面架构 & ...
- JavaScript 获取元素方法
仅供学习,转载请注明出处 获取元素方法一 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如 ...
- Javascript通过元素id和name直接获取元素
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
- JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- JavaScript笔记8-DOM中的事件、获取元素、操作元素
目录 1.API和Web API 2.DOM简介 3.获取元素 3.1 根据 ID 获取 3.2 根据标签名获取 3.3 根据类名返回元素对象集合 3.4 根据选择器返回元素 3.5 获取特殊元素(b ...
- js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
- JavaScript 获取元素的8种方法
DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是 DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我 ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
最新文章
- Excel常用公式记录
- 2018-4-15狼群算法以及改进的总结
- Python中递增和递减运算符的行为
- python输出中文加数字_python处理“#”开头加数字的html字符方法
- HiveSQL常用数据处理语句
- 问:新来的同事都自愿996,这是内卷还是努力啊?
- 5脚12v继电器接线图解_【电器元件002】你真的懂汽车继电器么
- Mock server的实现 - run Fiori application using mock data in offline mode
- 编程判断元素归类_如何使用jquery判断一个元素是否含有一个指定的类(class)...
- BP神经网络分类实战项目(深度学习笔记)原创!基础篇||PCA降维、反向传播公式、梯度下降、标准化、倾斜样本处理、独热编码、Adam优化算法、权值初始化、F1-Score、ROC、模型可视化
- iOS根据经纬度获得地理名称
- Telnet命令检测远程主机上的端口是否开启
- FortiGate设备管理
- Linux kernel路由机制分析(下)
- 关于djangorestframework
- 【软件测试】:测试通过标准
- ucore_os_lab lab1 report
- 尚学堂马士兵struts2 课堂笔记(二)
- 今天咱们不谈学习,只聊风(sha)月(diao))
- wps2019数据分析加载项_wpsexcel数据分析工具在哪里