js原生:封装document.getElementByClassName()函数

//接口封装:封装document.getElementByClassName()函数
function getElementsByClassName (cName,domTag,root) {//该函数有三个参数:第一个参数是class名(必选,字串形式);第二个参数是父容器(可选),默认为body节点;第三个参数是该DOM节点的标签名(字串形式)
    if (root) {
        root = typeof root == "string" ? document.getElementById(root) : root;
    } else{
        root = document.body;
    };
    domTag = domTag || "*";
    var els = root.getElementsByTagName(domTag);
    var arr = [];
    for (var i = 0,n = els.length; i < n; i++) {
        for (var j = 0,k = els[i].className.split(" "),l = k.length; j < l; j++) {
            if (k[j] == cName) {
                //console.log(els[i]);//这就是输出的标签DOm元素对象
                // return els[i];els[i]就是Dom节点对象,追加到数组中保存
                arr.push(els[i]);
                break;
            }
        }
    }
    return arr;//返回的虽然是数组,但是数组存储的都是一个个Dom元素节点,在外面要调用节点的话,用arr[0]这种方法调用即可
}

时间: 2024-11-05 16:28:52

js原生:封装document.getElementByClassName()函数的相关文章

js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var LG=(function(lg){ var objURL=function(url){ this.ourl=url||window.location.href; this.href="";//?前面部分 this.params={};//url参数对象 this.jing="&q

js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素

<html> <head> <script type="text/javascript"> window.onload = function() { var topMenus = getClass('li','topMenu'); for(var i=0;i < topMenus.length; i++) { alert(topMenus[i].innerHTML); } } function getClass(tagName,classNam

js原生封装自定义滚动条

1 /* 2 * @Author: dothin前端 3 * @Date: 2015-11-21 00:12:15 4 * @Last Modified by: dothin前端 5 * @Last Modified time: 2015-11-21 00:29:12 6 */ 7 ! function() { 8 var EventUtil = { 9 addHandler: function(obj, type, handler) { 10 if (obj.addEventListener)

用js同时封装两个函数,任意调用不同格式选项卡

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } .tab{ width: 500px; height: 300px; margin: 0 auto; position: relative; ov

原生JS写Ajax的请求函数

原文:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 1 ajax({ url: "./TestXHR.aspx", //请求地址 2 type: "POST", //请求方式

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) {   var oDate=new Date();   oDate.setDate(oDate.getDate()+iDay);   document.cook

手动封装js原生XMLHttprequest异步请求

Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var fnName in fnJson){ targetObj[fnName]=fnJson[fnName]; } return targetObj; }; HttpAjax = (function(){ function HttpAjax(options){ var settings={ type:'po

JS的document.anchors函数使用示例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS的document.anchors函数使用示例</title> </head> <body> <a name="first">First anchor</a><br /> <a name="seco

JS的document.all函数使用示例

JS的document.all函数虽然被document.getElement......代替,但是在使用中还是较为常见,下面为大家详细介绍下具体的使用示例: 一: document.all是页面内所有元素的一个集合.例如:  document.all(0)表示页面内第一个元素  二: document.all可以判断浏览器是否是IE if(document.all){ alert("is IE!"); } 三: 也可以通过给某个元素设置id属性(id=aaaa),然后用documen