[ javascript ] getElementsByClassName与className和getAttribute!
对于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!的更多相关文章
- Javascript:getElementsByClassName
背景: 由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况,所以,这里舍弃了原生的方法调用 方法一: function getElement ...
- javascript getElementsByClassName扩展函数
代码: function getElementsByClassName(){ if(!arguments[0]){return []};//未指定任何参数,直接返回 var args=argument ...
- javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式
一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一 ...
- document.getElementsByClassName() 原生方法 通过className 选择DOM节点
<div id="box"> <div class="box">1</div> <div class="bo ...
- javascript 之 className属性
Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化. 1.用className 属性修改节点的css类别 代码如下: <html> ...
- 表单美化-原生javascript和jQuery多选按钮(兼容IE6)
前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...
- javascript dom编程艺术笔记第三章:DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
- JavaScript DOM详解
欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52727448 本文出自:[余志强的博客] 一.DOM概述 D: Do ...
- javascript的一些常用知识点
1. 查看你的html文档中一共有多少个节点 : document.getElementsByTagName(" * ").length; 2. document.getEl ...
随机推荐
- 7CSS之超链接
<!-- title="这是鼠标悬停时显示的文字" 鼠标悬停时,显示相关的文字--> <a href="#" title="这是鼠标 ...
- 通过Oracle透明网关连接Sybase
Oracle公司提出的透明网关技术可用于实现与其他多种类型的数据库的互联,实现不同类型数据之间建立连接,方便于使用者进行查询.近日,在公司的某项目的实施过程中,开发人员需要访问Sybase数据库中的某 ...
- Android FrameWork 学习之Android 系统源码调试
这是很久以前访问掘金的时候 无意间看到的一个关于Android的文章,作者更细心,分阶段的将学习步骤记录在自己博客中,我觉得很有用,想作为分享同时也是留下自己知识的一些欠缺收藏起来,今后做项目的时候会 ...
- html5——伸缩比例案例(携程)
1.有图片的盒子,最好是父盒子设置伸缩属性,a标签设置伸缩比例1,img标签宽度100% 2.不要见到父盒子就设置伸缩属性,而是根据子盒子是否占据一行,若是子盒子占据一行,那么只要给子盒子设置伸缩比例 ...
- html5——3D案例(立体导航)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 8、scala面向对象编程之对象
1. Object 2.伴生对象 3.让object继承抽象类 4.apply方法 5.main方法 6.用object实现枚举功能 1. Object Object,相当于class的单个实例, ...
- 【sqli-labs】 less45 POST -Error based -String -Stacked Blind(POST型基于盲注的堆叠字符型注入)
和Less44一个名字 测试一下,发现是')闭合的 login_user=&login_password=1') or sleep(0.1)# 那就是没有错误显示的less42 login_u ...
- select2下拉插件
下拉单选: 1.行内 1)初始化数据: <select class="form-control select5"> <option selected>张三1 ...
- 简述prototype, _proto_, constructor三者的关系
1.prototype 感概:每个函数都有一个prototype这个属性,而这个属性指向一个对象,这个对象称为原型对象 作用: a.节约内存 b.扩展属性和方法 c.实现类与类的之间的继承 2._pr ...
- ModelBinder 请求容错性
代码 //using System.Web.Mvc; public class TrimToDBCModelBinder : DefaultModelBinder { public override ...