(Lesson2)根据类名称和属性获得元素-JavaScript面向对象

描述：在编写选择器的时候遇到的一根问题，我需要实现Jquery的选择器功能，第一个根据ID获取Element非常简单，第二个根据类（class）去获取Element集合，这个相对复杂，而根据name和根据class的返回值是一样的，下面是详细说明：

首先我写了一个方法，这个方法是获得当前HTML的所有元素（标签），然后遍历寻找需要的元素。代码如下：

        function getElementsByClassName (className) {
//获得所有的元素 all是元素集合var all = document.all ? document.all : document.getElementsByTagName('*');var elements = new Array();for (var e = 0; e < all.length; e++) {
//根据class的名称与元素集合内的class比较if (className==all[e].className) {
//写入新的数组elements[elements.length] = all[e];}}
//返回筛选后的数组return elements;}

点击查看代码

在上诉代码中，可以根据修改属性去完成别的筛选，比如name,value等等。返回的是一个elements数组，大家不要忽略了。对于返回结果，下面还是演示个小的Demo，跳过了取值阶段，直接调用上面的function.

function test(){
var a=getElementsByClassName("abc");
for(int i=0;i<a.length;i++)
{
a[i].style.color="blue";
}
}

点击查看代码

即所有的class为abc的元素，他们的文字颜色都变为了蓝色。在写的过程中看到了style，顺带提一下style的用法，上面的直接style.color是一种写法，大家要是为了方便的话可以直接使用style.cssText属性。使用方式：

style.cssText="border:1px solid #000;margin-ledt:10px;background-color:#66CCFF";

类似在元素标签内直接写style样式的方式。

转载于:https://www.cnblogs.com/nozer1993/p/4371140.html

(Lesson2)根据类名称和属性获得元素-JavaScript面向对象相关推荐

我可以编写一个CSS选择器来选择不具有某个类或属性的元素吗？
本文翻译自:Can I write a CSS selector selecting elements NOT having a certain class or attribute? I would ...
CSS类名称/选择器中哪些字符有效？
CSS类选择器中允许使用哪些字符/符号? 我知道以下字符无效 ,但是哪些字符有效 ? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < ...
如何将类添加到给定的元素？
我有一个已经有一个类的元素: <div class="someclass"><img ... id="image1" name="i ...
moviepy音视频剪辑：视频剪辑基类VideoClip的属性及方法详解
☞ ░ 前往老猿Python博文目录 ░ 一.概述在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...
JavaScript(12) jQuery选择器(基本选择器、层级选择器、伪类选择器、属性选择器)
提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器=============== ...
python类的私有属性_Python 的私有属性和‘受保护的’属性
Python 不能像 java 那样使用 private 修饰符创建私有属性,但是 Python 有个简单的机制,能避免子类意外覆盖'私有'属性. 举个例子,有个人编写了一个名为 dog 的类,这个类 ...
请确保此代码文件中定义的类与“inherits”属性匹配，并且该类扩展的基类(例如Page 或UserControl)是正确的。...
编译ASP.NET时,提示"请确保此代码文件中定义的类与"inherits"属性匹配,并且该类扩展的基类(例如Page 或UserControl)是正确的.", ...
用一个类根据Model属性生成SQL语句
想到写这个的原因是我和我的一个朋友在写一个开源项目的时候,我负责了数据库的持久化存储部分,结果他看到了我的数据库数据存储结构之后直接傻眼了,因为个人比较简单粗暴,直接把一个数据Model归档成为二进制 ...
【JetPack】ViewBinding 视图绑定组件 ( 启用模块 | 视图绑定定制 | 绑定类名称生成规则 | 绑定类字段生成规则 | 绑定类获取根视图 | 绑定类获取布局组件 )
文章目录 I . 视图绑定组件简介 II . 视图绑定 ViewBinding 使用前提 ( Android Studio 3.6 ) III . 视图绑定组件启用 IV . 定制视图绑定 ( 启用视 ...

(Lesson2)根据类名称和属性获得元素-JavaScript面向对象

(Lesson2)根据类名称和属性获得元素-JavaScript面向对象相关推荐

最新文章

热门文章