JS-BOM

Posted 2020-09-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-BOM相关的知识，希望对你有一定的参考价值。

這一周還學習了BOM我已經被BOM和DOM搞得神志不清了，先説説BOM的簡捷吧：

这是浏览器运行时中的两个不同的概念。

BOM 浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

DOM 文档对象模型

        DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是html和XML的API，DOM把整个页面规划成由节点层级构成的文档。
        DOM本身是与语言无关的API，它并不与Java，javascript或其他语言绑定。
特定语言的DOM
     针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础。


我們用Bom做了移動DIV，輪播，著是輪播的代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 800px;
            height: 600px;
            /*border: 1px solid gray;*/
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        #div1 img{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1">
    <img src="img/1.jpg"  width="800"/>
    <img src="img/2.jpg"  width="800"/>
    <img src="img/3.jpg"  width="800"/>
    <img src="img/4.jpg"  width="800"/>
    <img src="img/5.jpg"  width="800"/>
    <img src="img/6.jpg"  width="800"/>
    <img src="img/7.jpg"  width="800"/>
</div>
<div id="div2"></div>
<script>
    var div1 = document.getElementById(‘div1‘);
    var div2 = document.getElementById(‘div2‘);
    var imgs = div1.getElementsByTagName(‘img‘);
    window.onload=function(){
        for(var i=0; i<imgs.length; i++){
            imgs[i].style.left = i*800+‘px‘;
        }
    };

    function imgMove(){
//        div2.innerHTML="";
        var bl = true;
        for(var i=0; i<imgs.length; i++){
            imgs[i].style.left = imgs[i].offsetLeft-1+‘px‘;
//            div2.innerHTML+=imgs[i].offsetLeft+",,";

            if(imgs[i].offsetLeft==0){
                bl = false;
                if(i==0)
                    imgs[imgs.length-1].style.left=(imgs.length-1)*800+1+‘px‘;
                else
                    imgs[i-1].style.left=(imgs.length-1)*800+1+‘px‘;
            }

        }
        if(bl)
            setTimeout(imgMove, 10);
        else
            setTimeout(imgMove, 1000);
    }

    setTimeout(imgMove, 1000);
</script>
</body>
</html>

以上是关于JS-BOM的主要内容，如果未能解决你的问题，请参考以下文章