[ 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 里的关键字时建议使用node.getAttribute("xxx"),如label中的for。

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

时间: 2024-10-13 15:35:21

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

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

原文:javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式 一.背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色.一般的做法是我们可以先找到父级元素 ,然后由父级元素找到所有相关tagName,最后,来一个if判断,如果class属性为box,则修改之 var oUl = document.getElementById("ul1");                          

Javascript:getElementsByClassName

背景: 由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况,所以,这里舍弃了原生的方法调用   方法一: function getElementByClassName(parent,tagName,className) { /* *参数说明: *@parent:父元素,默认为document *@tagName:子元素的标签名 *@className: 用空格分开的className字符串 */ var aEls=parent.getEle

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

《JavaScript DOM 编程艺术》(第二版)读书笔记(二)

接下来正式进入DOM的学习 第三章 DOM D代表document(文档),O代表object(对象),M代表model(模型),简单的说DOM把一份文档表示成一颗“树”(数学上的概念). 节点(node),它表示一个网络的连接点.一个网络就是由一些节点构成的集合.DOM也是同样的情况,文档是由节点构成的集合. 1.元素节点(element node) <html>.<head>.<body>.<p>.<ul>等标签的名字就是元素的名字,比如文本

javascript dom编程艺术 第2版

W3C 推出了标准化的DOM, 就是我们现在常用方法, 比如获取一个元素:document.getElementById(id) 语法用JavaScript编写的脚本,都是由一系列指令构成,这些指令叫做语句(statement). 只要按照正确的语法编写出来的语句才能得到正确的解释.JavaScript 每条语句以换行符或分号视为结束. 如下为两条语句:first statementsecond statement也可以放在一行:first statment; second statment;建

The DOM in JavaScript

DOM : Document Object Model D is for document : The DOM cant work without a document . When you create a web page and load it in a web browser, the DOM comes to life. It takes the document that you have written and turns it into an object . O is for

JavaScript学习--Item29 DOM基础详解

看完JavaScript高级程序设计,整理了一下里面的DOM这一块的知识点,比较多,比较碎!DOM在整个页面的地位如图: DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口).DOM描,绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 1.节点层次 DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点

getElementsByClassName的兼容性

/*----------------------------index.html------------------------------------*/ <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Author" con

javascript学习总结(二):DOM常用方法。

1 获取元素节点 a document.getElementById(id),它返回一个对象.是Document对象特有的函数,它还有这些方法: b element.getElementsByTagName(tagname)或document.getElementsByTagName(tagname),它返回一个对象数组 c HTML5 Dom中的新方法:document.getElementsByClassName(className)它返回一个对象数组 若浏览器不支持此方法,则自己写一个: