javaScript操作DOM对象

第三章 JavaScript操作DOM对象

 

DOM：Document    Object   Model  文档对象模型

DOM分类：Dom core;HTML Dom;Css Dom;

一、根据层次访问节点：

　　　parentNode 返回节点的父节点
　　　childNodes 返回子节点集合，childNodes[i]
　　　firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
　　　lastChild 返回节点的最后一个子节点
　　　nextSibling 下一个节点
　　　previousSibling 上一个节点

二、解决浏览器兼容问题：　

　　firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
　　lastElementChild 返回节点的最后一个子节点
　　nextElementSibling 下一个节点
　　previousElementSibling 上一个节点

　　例如：ONext = OParent.nextElementSibling || OParent.nextSibling

三、节点信息：

　　nodeName：节点名称

　　nodeValue：节点值

　　nodeType：节点类型

四、操作节点样式：

<script type="text/javascript">
    //第一种方式：元素.style.样式属性
    function whtmouseover(){
        //要让张三字体变小     颜色变绿
        document.getElementById("zs").style.fontSize="15px";
        document.getElementById("zs").style.color="green";
    };
   
   
    function whtmouseout(){
        //要让张三字体变小     颜色变绿
        document.getElementById("zs").style.fontSize="8px";
        document.getElementById("zs").style.backgroundColr="pink";
    };
   
   
    //第二种方式：元素.className    事先在样式中创建名为.className的值的样式列表
    function lbmouseover(){
        document.getElementById("zhao").className="zhao";
    };
   
    function lbmouseout(){
        document.getElementById("zhao").className="zhao";
    };
   
   
    //第三种方式：元素.style.cssText="css属性值"
    function llmouseover(){
        document.getElementById("ww").style.cssText="color:red;font-size:10px";
    }
    function llmouseout(){
        document.getElementById("ww").style.cssText="color:black;font-size:60px";
    }
</script>
五、元素属性：　

　　offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
　　offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
　　offsetHeight 返回元素的高度
　　offsetWidth 返回元素的宽度
　　offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
　　scrollTop 返回匹配元素的滚动条的垂直位置
　　scrollLeft 返回匹配元素的滚动条的水平位置
　　clientWidth 返回元素的可见宽度
　　clientHeight 返回元素的可见高度

六、元素属性应用：　

　　document.documentElement.scrollTop;
　　document.documentElement.scrollLeft;

 

　　或者

　　document.body.scrollTop;
　　document.body.scrollLeft;

七、制作固定广告：

　　

var adver;
        window.onload=function(){
            adver=document.getElementById("adver");
        }
        //onscroll:滚动条滚动时触发
        window.onscroll=function(){
            //获取滚动条滚动大小
            var scorlltop=document.documentElement.scrollTop||document.body.scrollTop;
            var scorllleft=document.documentElement.scrollLeft||document.body.scrollLeft;
            //元素跟随滚动条一起变化
            adver.style.top=scorlltop+30+"px";
            adver.style.left=scorllleft+10+"px";
        }