• 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";
            }
     
  • 相关阅读:
    旧键盘 (20)
    人口普查(20)
    打印沙漏(20)
    程序运行时间(15)
    反转链表 (25)
    科学计数法 (20)
    组个最小数 (20)
    python yield使用
    python如何优雅判断类型
    python中如何优雅使用import
  • 原文地址:https://www.cnblogs.com/wnwn/p/10980697.html
Copyright © 2020-2023  润新知