DOM基础二

1、获取计算后的样式：

currentStyle

　　ie所支持的获取非行间样式的方法
　　用法：对象.currentStyle.样式名
　　例：oDiv.currentStyle.width

getComputedStyle

　　非ie所支持的获取非行间样式的方法
　　用法：getComputedStyle(对象，伪类).样式名
　　例：getComputedStyle(oDiv,null).color

function getStyle(obj,styleName){

        if (obj.currentStyle){
            return obj.currentStyle[styleName];
        }
        else{
            return getComputedStyle(obj,null)[styleName];
        }
    }

操作节点
　　createElement("标签名") : 创建新元素
　　createTextNode("") : 创建文本节点

 　　appendChild(node) : 向childNodes末尾插入一个节点node
　　insertBefore(node,targetNode) : 向targetNode之前插入节点node
　　replaceChild(newNode,oldNode) : newNode替换节点oldNode
　　removeChild(node) : 移除父节点的某个子节点

　　getAttribute(name)：获取节点上name属性的值
　　setAttribute(name,value)：设置节点上name属性的值为value
　　removeAttribute(name)：删除节点上的name属性

 

为兼容主流浏览器：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    function getStyle(obj,styleName){

        if (obj.currentStyle){
            return obj.currentStyle[styleName];
        }
        else{
            return getComputedStyle(obj,null)[styleName];
        }
    }

    function fnNext(obj){//获取下一个兄弟节点

        if (obj.nextElementSibling){
            return obj.nextElementSibling;
        }
        else{
            return obj.nextSibling;
        }
    }

    function fnPre(obj){//获取上一个兄弟节点

        if (obj.previousElementSibling){
            return obj.previousElementSibling;
        }
        else{
            return obj.previousSibling;
        }
    }

    function fnFirst(parent){//获取第一个子节点

        if (parent.firstElementChild){
            return parent.firstElementChild;
        }
        else{
            return parent.firstChild;
        }
    }

    function fnLast(parent){//获取最后一个子节点

        if (parent.lastElementChild){
            return parent.lastElementChild;
        }
        else{
            return parent.lastChild;
        }
    }

    window.onload=function (){

        var oUl=document.getElementById("ul1");
        var li2=oUl.children[1];

        // alert(fnPre(li2).innerHTML);
        // alert(li2.parentNode.tagName);
        alert(fnLast(oUl).innerHTML);

        // alert(li2.nextSibling.innerHTML);兼容ie
        // alert(li2.nextElementSibling.innerHTML);兼容现代浏览器
    }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>li1</li>
        <li>li2</li>
        <li><span>li3</span></li>
        <li>li4</li>
    </ul>
</body>
</html>

 

posted @ 2014-03-12 17:13  Ι Believe  阅读(147)  评论(0)  编辑  收藏  举报