对于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. [Swift通天遁地]九、拔剑吧-(16)搭建卡片页面:Card Peek/Pop动态切换界面

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 数据库mysql原生代码基本操作

    创建表: CREATE TABLE `biao` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '测试表', `createtime` ...

  3. ACM_Alien And Password

    Alien And Password Time Limit: 2000/1000ms (Java/Others) Problem Description: Alien Fred wants to de ...

  4. 浏览器被“hao123.3377.com”主页劫持的解决办法

    问题描述: 浏览器被一个叫做hao123.3377的类似hao123网址导航的家伙,强行贴上.狗皮膏药一样. 问题解决: 尝试了网上说的包括下载360什么的,都不咋好用.后来发现是在激活win10(盗 ...

  5. [转]Linux定时任务Crontab详解

    转自:http://blog.chinaunix.net/uid-7552018-id-182133.html 今天做了个数据库的备份脚本,顺便系统得学习一下Linux下定时执行脚本的设置.Linux ...

  6. Anaconda——Python包管理工具

    Anaconda是一个用于科学计算的Python发行版,支持 Linux, Mac, Windows系统,提供了包管理与环境管理的功能 主要用于Python包管理和版本管理. 下载地址:https:/ ...

  7. 移动web——touch事件应用

    基本概况 1.touch事件在移动端被用来代替click事件,因为click事件的触发会延迟影响了用户体验 2.touch事件还可以与translate构成吸附效果 3.现行有一种排版方式是左边宽度是 ...

  8. O-理解共享池

    我们可以通过show sga命令查看共享池的整体组成部分: ....待截图.... 一.SGA内存结构 Oracle中SGA主要包括: 1.固定数据结构部分(FIXED Size) 2.数据块缓冲区( ...

  9. 【VHDL】组合逻辑电路和时序逻辑电路的区别

    简单的说,组合电路,没有时钟:时序电路,有时钟. ↓ 也就是说,组合逻辑电路没有记忆功能,而时序电路具有记忆功能. ↓ 在VHDL语言中,不完整条件语句对他们二者的影响分别是什么?组合逻辑中可能生成锁 ...

  10. tailf

    功能说明:tailf命令几乎等同于tail -f,与tail -f不同的是,如果文件不增长,那么它不会去访问磁盘文件,也不会更改文件的访问时间.tailf命令在工作中的主要使命就是跟踪日志文件,首先将 ...