zoukankan      html  css  js  c++  java
  • (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样式的方式。

  • 相关阅读:
    图片反转效果
    css实现三角效果
    漂亮的阴影效果
    css名词解释
    偷学来的资料
    Git、GitHub、GitLab三者之间的联系以及区别
    分模块、分工程管理
    Spring AOP面向切面编程
    为什么要用存储过程,什么时候要用存储过程,存储过程的优点
    Spring扫描组件的使用详解
  • 原文地址:https://www.cnblogs.com/nozer1993/p/4371140.html
Copyright © 2011-2022 走看看