对于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. Js打开QQ聊天对话窗口

    function openQQ() { var qq = $(this).attr('data-qq');//获取qq号 window.open('http://wpa.qq.com/msgrd?v= ...

  2. Java学习笔记_网络(2)

    单向的客户端发送服务器端接收并显示,没有使用多线程 import javax.swing.*; import java.awt.*; import java.io.*; import java.net ...

  3. Laravel5.1学习笔记20 EloquentORM 关系

    Eloquent: Relationships Introduction Defining Relationships One To One One To Many Many To Many Has ...

  4. phpstorm如何在同一个文件夹打开多个目录

    phpstorm默认一个窗口只显示一个项目,如果新建一个项目,他会给你个选项卡,问你是在新窗口打开新项目还是在本窗口打开. 能不能在一个窗口打开多个项目呢?就像sublime text那样,其实是可以 ...

  5. Android生命周期回顾

    先回顾生命周期 Activity一共有3中状态 运行中 Activity位于前台,并具有用户焦点 暂停 另一个Activity位于屏幕前台并具有用户焦点,但此Activity仍可见.也就是说,另一个A ...

  6. Python三方库xlrd,xlwd-Excel读写

    恩,我是翻译汪,主要内容来自http://www.python-excel.org/ 在xlrd,xlwt这两个库中,Excel的结构表示为workbook整个Excel对象,sheet工作表,row ...

  7. VS2013支持多字节

    使用插件 下载地址:https://www.microsoft.com/zh-cn/search/DownloadResults.aspx?rf=sp&q=mbcs

  8. Power Designer逆向操作(从mysql5.0生成数据库的物理模型)

    Power Designer逆向操作(从mysql5.0生成数据库的物理模型) 环境:powderdesigner12.5:mysql5.0 步骤: 1.  为指定的数据库配置MySQL的ODBC数据 ...

  9. 转录组入门(3):了解fastq测序数据

    sra文件转换为fastq格式 fastq-dump -h --split-3 也就是说如果SRA文件中只有一个文件,那么这个参数就会被忽略.如果原文件中有两个文件,那么它就会把成对的文件按*_1.f ...

  10. Typescript编译设置

    TypeScript MSBuild编译选项,用记事本打开工程文件,进行修改,如<TypeScriptGeneratesDeclarations>true</TypeScriptGe ...