javascript DOM学习，编写简单的操作DOM类

自己动手写了点简单的DOM操作，只是为了更加深刻里面的观念还有浏览器之间的区别

直接上代码

/* basic dom operation
*   Jackey
*   2014-3-28
*   ie789 chrome firefox 下测试正常
*/

//根据id获取元素
function getById(id) {
    if (id) {
        return document.getElementById(id);
    }
    return null;
}

//根据name 获取元素 ie下只有input等表单元素才拥有name,未解决
function getByName(name) {
    var result = [];
    var elements = document.getElementsByName(name);
    for (var i = 0; i < elements.length;i++ ) {//不能用for(var i in elements)因为会把item length 等等属性带出来
        if (elements[i].nodeType) {
            result.push(elements[i]);
        }
    }
    return result;
}
//兼容 获取name元素
function getByNames(name) {
    var elements = document.getElementsByTagName("*");
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].nodeType == 1 && getAttr(elements[i], "name") == name) {
            result.push(elements[i]);
        }
    }
    return result;
 }

//根据class获取元素
function getByClassName(className) {
    if(className) {
        var elements = document.getElementsByTagName("*");
        var result = [];
        for (var i in elements) {
            if (elements[i].className == className) {
                result.push(elements[i]);
            }
        }
        return result;
    }
    return null;
}

//获取样式值
function getCss(obj, styleName) {
    var realStyle = null;
    if (obj.currentStyle)
        realStyle = obj.currentStyle[styleName];
    else if (window.getComputedStyle)
        realStyle = window.getComputedStyle(obj, null)[styleName];
    return realStyle;
}

//设置样式
function setCss(obj,styleName,value) {
    if (obj) {
        obj.style[styleName] = value;
    }
}

//获取属性
function getAttr(obj, attr) {
    if (obj) {
        return obj.getAttribute(attr) ? obj.getAttribute(attr) : null;
    }
}

//设置属性
function setAttr(obj, attr, value) {
    if (obj) {
        obj.setAttribute(attr,value);
    }
 }

测试的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Jackey.js" type="text/javascript"></script>
    <style type="text/css">
        .father{background-color:yellow; }
    </style>
</head>
<body>
    <div class="father" id="father" mark="mark" style="200px; height:400px;">gfhfh</div>
    <div name="child" class="div"></div>
    <input type="text" name="child" class="input"/>
    <select name="child" class="select"></select>
    <textarea name="child" class="textarea"></textarea>
    <textarea name="childs" class="textarea"></textarea>

    <div class="same">same1</div>
    <div class="same">same2</div>
    <div class="same">same3</div>
    <input class="same" />
</body>
<script type="text/javascript">
    var father = getById("father");
    //getCss测试
    var bg = getCss(father, "backgroundColor"); //注意要用backgroundColor
    var width = getCss(father, "width");
    console.log("getCss测试：");
    console.log("内嵌样式：" + width);
    console.log("内联样式：" + bg); //ie ：yellow, firefox ，chrome下显示rgb
    //setCss测试
    setCss(father, "width", "400px");//兼容
    setCss(father, "color", "white");//兼容
    setCss(father, "colorrr", "white");//无报错
    setCss(father, "backgroundColor", "red"); //兼容
    //getAttr测试
    var mark = getAttr(father, "mark");
    console.log(mark); //兼容
    //setAttr
    setAttr(father, "mark", "mark1"); //兼容

    //getByName测试 ie下拿不到非表单的元素
    var names = getByName("child");
    var len = names.length;
    for (var k in names) {
        console.log("className:"+names[k].className);
    }
    //console.log(names[0].className);
    console.log(len);
    var t = document.getElementsByName("child");
    console.log(t[0].className);

    //getByClassName 不存在表单和非表单元素的区分
    var classs = getByClassName("same");
    console.log("classNameTEST:" + classs.length);
    for(var i in classs){
        classs[i].innerHTML = "SAME";
    }

    //getByNames
    names = getByNames("child");
    var len = names.length;
    for (var k in names) {
        console.log("className:" + names[k].className);
    }
</script>
</html>

javascript DOM学习 ，编写简单的操作DOM类

javascript DOM学习，编写简单的操作DOM类