zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    一个模式的四个基本要素
    【原】基础篇:第一篇,本节主要向大家介绍Ext的最基础的话题
    一些基本的设计模式
    沈老板位置
    977
    设计模式的原则
    hash算法的介绍 【清晰易懂】
    字符编码知识:Unicode、UTF8、ASCII、GB2312等编码之间是如何转换的?
    字符编码知识:Unicode、UTF8、ASCII、GB2312等编码之间是如何转换的?
    vbs生成域账号
  • 原文地址:https://www.cnblogs.com/ztz13125073098/p/3596771.html
Copyright © 2011-2022 走看看