getElementByClassName

在JavaScript 内建的核心中，document对象及element对象总共可以通过三个方式来获取其下的元素，分别是:getElementById('id') 、getElementsByName('name') 、getElementsByTagName('tag') 。这些方法就跟它们的名字一样，分别是依照id, name, tag来获取元素。
    因在同一份文件中，id 是具有唯一性的，所以 getElementById(id) 的回传值是单一物件可以直接使用；而其他则会传回一个依照具有该属性的元素在文件中出现顺序排列的数组，使用时必须指定数组索引，如: array[0] 代表第一个元素。可是在设计网页时，最常常需要使用到的class却没有相对应的方法可以去获取className相同的元素。没有没关系，我们自己写一个，而且代码非常简短只有下面几句。
function getElementsByClassName(className) {
    var el = new Array();
    var _el = document.getElementsByTagName("*");
    for (var i=0; i<_el.length; i++ ) {
        if (_el[i].className == className) {
            el[el.length] = _el[i];
        }
    }
    return el;
}
    上面这段代码将会传回一个对象数组，这些对象的class名相同。该方法的缺点是只能在页面加载完成后才能获得正确结果，因为如果直接使用document.getElementsByTagName("*")得不到全部标签，只能得到body、head、script、body等几个自动加载或已经加载的标签。解决方法：可以将相关代码放到最后以便body标签加载完成后才执行。下面这段代码是 getElementsByClassName(className) 众多应用的其中一种，可以将文件中所有 className 为oldClassName的元素的className改为newClassName。
function changeClassName(oldClassName, newClassName) {
    var classTest = getElementsByClassName(oldClassName);
    for (var i=0; i<classTest.length; i++) {
        classTest[i].className = newClassName;
    }
}

getElementByClassName相关推荐

getElementByClassName()不兼容的解决办法
在获取元素时候采用getElementByClassName()方法是比较方便的,但是对于IE6不兼容,可以采用以下代码来自定义这个方法: window.οnlοad=function(){ if(! ...
如何定制一款12306抢票浏览器——处理预订页面和验证码自动识别功能
判断是否进入预订页面我们先看一下预订页面的结构(转载请指明出于breaksoftware的csdn博客) 可以见得,这个页面也是嵌入了两个IFrame.关于IFrame的跨域问题,我已经在前一篇文章 ...
如何定制一款12306抢票浏览器——实现自动查询和预订功能
检查是否进入订票页面判断是否进入订票页面,我是确定了两个标准:(转载请指明出于breaksoftware的csdn博客) 1 网址是否为http://www.12306.cn/mormhweb/ky ...
如何定制一款12306抢票浏览器——用户界面
用户界面我不打算写个Windows界面.因为这个软件的全部就是个浏览器.我准备将"浏览器"进行到底,所以我选择使用html作为我们的用户界面.我也并不打算从头开始写一个浏览器,我 ...
JS-DOM-元素节点
查看元素节点: 1.getElementById():通过 id 取到唯一节点;如果 id 重名,只能取到第一个 getElementByName(): 通过name属性 getElementByTa ...
JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中文本框取出来 ...
15DOM之获取元素方法
技术交流QQ群:1027579432,欢迎你的加入! 1.DOM简介文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的 ...
HTML Window.document
1.Window.document对象一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =doc ...
通过JavaScript简单的操作DOM（一）
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...

getElementByClassName

getElementByClassName相关推荐

最新文章

热门文章