对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题。

那么须要模拟出getElementsByClassName  须要採用className属性,这里就涉及到javascript中的getAttribute问题。

在ie 6/7 中,对于getAttribute存在Bug

须要採用className 获取例如以下:

var node = document.getElementById("test");
var name = node.className;

对于标准浏览器,则能够直接使用className 也能够使用 getAttritbute,结果一样:

node.getAttritbute("class");

可是假设是ie 6/7 ,则getAttribute()存在问题。

所以getElementsByClassName 能够使用例如以下方式:

getElementsByClazzName = document.getElementsClassName ?
function(name){
return document.getElementsClassName(name);
}:function(name){
var nodes = document.getElementsByTagName("*"),
result = [];
for(var node in nodes){
if(node.className && node.className.indexOf(name)){
result.push(node);
}
}
return result;
}

这里的实现方式比較简单。

1:常规属性建议使用:node.xxx。

2:自己定义属性建议使用: node.getAttribute("xxxx")。

3:当获取的目标是 javascript 里的keyword时建议使用node.getAttribute("xxx")。如label中的for。

4:当获取的目标是保留字,如:class,请使用className取代。

[ javascript ] getElementsByClassName与className和getAttribute!的更多相关文章

  1. Javascript:getElementsByClassName

    背景: 由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况,所以,这里舍弃了原生的方法调用   方法一: function getElement ...

  2. javascript getElementsByClassName扩展函数

    代码: function getElementsByClassName(){ if(!arguments[0]){return []};//未指定任何参数,直接返回 var args=argument ...

  3. javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式

    一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一 ...

  4. document.getElementsByClassName() 原生方法 通过className 选择DOM节点

    <div id="box"> <div class="box">1</div> <div class="bo ...

  5. javascript 之 className属性

    Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化. 1.用className 属性修改节点的css类别 代码如下: <html> ...

  6. 表单美化-原生javascript和jQuery多选按钮(兼容IE6)

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

  7. javascript dom编程艺术笔记第三章:DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  8. JavaScript DOM详解

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52727448 本文出自:[余志强的博客] 一.DOM概述 D: Do ...

  9. javascript的一些常用知识点

    1. 查看你的html文档中一共有多少个节点 :   document.getElementsByTagName(" * ").length; 2.  document.getEl ...

随机推荐

  1. Contact

    UF3000: 1.wafer进去prober后,默认probercard不会跟chuck上的wafer接触. 2.通过prober界面上的按钮向上移动,使得prober card和wafer的距离为 ...

  2. JS高级——歌曲管理

    1.将歌曲管理的CURD方法放到原型中 2.在构造函数中,我们只有一个属性是songList,因为音乐库不是共有的,如果将songList放入原型中,任何一个人的一次修改songList,都将把son ...

  3. jQuery——节点操作

    创建节点 1.$():创建一个li标签 $("<li class='aaa'>我是li标签</li>") 2.html():创建一个li标签并同时添加到ul ...

  4. HDU_3549_网络流(最大流)

    Flow Problem Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...

  5. 在vue中通过js动态控制图片按比列缩放

    1.html 通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸.外层div是固定大小,因此,图片有两种情况去适应外部div的尺寸.一种是宽度大于高度的情况, ...

  6. ES6学习历程(变量的解构赋值)

    一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1;  b:2;  c:3; let [x, , y] = [1, 2, 3];  x:1   y ...

  7. STL源码分析之迭代器

    前言 迭代器是将算法和容器两个独立的泛型进行调和的一个接口. 使我们不需要关系中间的转化是怎么样的就都能直接使用迭代器进行数据访问. 而迭代器最重要的就是对operator *和operator-&g ...

  8. 逆元Inv(模板+应用)

    逆元: 如果满足公式,则有a 是 b的逆元同时b也是a的逆元. 逆元的应用: 设c为b在对m取余的意义下的逆元: 在求解公式 (a / b) % m的时候,如果b可能会非常的大,所以会出现爆精度的问题 ...

  9. web前端学习总结--JQuery

    jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户 ...

  10. 关于 BaseHTTPServer 的介绍

    简介: (1) 基础的web服务器是一个模板,其其角色是客户端和服务器端完成必要的HTTP交互,在basehttpserver模块中可以找到一个名字叫HTTPServer 的服务器基本类 (2)处理程 ...