[ 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 ...
随机推荐
- HDU 3785 找寻大富翁
2019-06-06 08:30:03 坚持!!! 做这些水题,都觉得心累,特别是HDU的题,我PE了3发
- 八皇后问题---详解---参考<<紫书>>
在一个8*8的棋盘上 放置八个皇后 , 使得他们互相不攻击(皇后攻击范围为 同行同列同对角线) , 方法一 : 从64个格子中 选一个子集 , 使得 " 子集 中恰好有八个元素 , 且任意 ...
- HashMap的尾部遍历问题--Tail Traversing
在看网上HashMap的resize()设计时,提到尾部遍历. JDK1.7的HashMap在实现resize()时,新table[]的列表采用LIFO方式,即队头插入.这样做的目的是:避免尾部遍 ...
- 使用Dreamweaver在一张图片上添加多个热点链接
所有代码: <html> <head> <meta charset="utf-8"> <title>无标题文档</title& ...
- no斜体 背景图片坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- TCP的send与recv函数小结
Send函数: 在阻塞模式下, send函数的过程是将应用程序请求发送的数据拷贝到发送缓存中发送并得到确认后再返回.但由于发送缓存的存在,表现为:如果发送缓存大小比请求发送的大小要大,那么send函数 ...
- JS高级——浏览器的线程
基本概念 1.js的执行过程是单线程的模式,也就是同步进行,只有前面的代码执行完了才会往下面执行 2.但是执行js代码也只是浏览器的线程之一所负责的事情,这个线程被称为js引擎,浏览器还具有其他线程: ...
- CSS——样式隐藏
overflow:hidden: 溢出隐藏 visibility:hidden: 隐藏元素 隐藏之后还占据原来的位置. display:none: 隐藏元素 隐藏之后不占据 ...
- mysql常用命令介绍
mysql适用于在Internet上存取数据,支持多种平台 1.主键:唯一标识表中每行的这个列,没有主键更新或删除表中的特定行很困难. 2.连接mysql可以用Navicat 要读取数据库中的内容先要 ...
- PHP递归复制文件夹以及传输文件夹到其他服务器。
项目中需要复制整个文件夹,有时候还需要将整个文件夹传输到远程服务器. 这里就要递归遍历整个文件夹了,想看递归遍历文件夹的代码. function deepScanDir($dir) { $fileAr ...