JavaScript BOM对象-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript BOM对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、window对象

顾名思义window是窗口的意思，也就是浏览器的窗口，所有浏览器都支持window对象，因此所有的JavaScript全局对象，函数，变量都是window对象的成员

全局变量是window对象的属性

全局函数是window对象的方法

子对象：

JavaScript BOM对象

属性：

JavaScript BOM对象

方法：

JavaScript BOM对象

二、location 对象

location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面

JavaScript BOM对象

跳转的多种方式

JavaScript BOM对象

案例：点击链接跳转详情页

第一个页面：

  // search 传递多个参数获取
    var search = window.location.search;
    //获取的？之后的字符串去掉问好，其余的分割
    var arr = search.substring(1).split('&');
    // 方法1 字符串截取
    // for(var i = 0;i<arr.length;i++){
    //     var val = arr[i].substring(arr[i].indexOf('=')+1);
    //     console.log(val);
    // }

    //方法2 字符串分割
    for(var i = 0;i<arr.length;i++){
        console.log(arr[i].split('=')[0]);
        console.log(arr[i].split('=')[1]);
    }

JavaScript BOM对象搜索框传参

第二个页面

<style>
        .box{
            display: flex;
        }
        .box div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="./3-detail.html?product_id=1001">
            <div>小米</div>
        </a>
        <a href="./3-detail.html?product_id=1002">
            <div>红米</div>
        </a>
    </div>

第三个页面根据传参渲染数据

<div id="concent">
        详情页
    </div>
    <script>
        var goods = {
            code:200,
            data:[
                {
                id:1001,
                goodnames:'小米',
                price:1900,
                nums:100
            },
            {
                id:1002,
                goodnames:'红米',
                price:3900,
                nums:123
            },
            {
                id:1003,
                goodnames:'紫米',
                price:2900,
                nums:11
            }
            ]
        }
        //传递一个参数跳转
        var search = window.location.search;
        if(!search){
            concent.innerHTML = `出问题啦，请刷新试试`
        }else{
            var id = search.split('=')[1];
            var data = goods.data;
            var str = '';
            for(var i = 0;i<data.length;i++){
                if(data[i].id == id){
                    str += `<p>商品名称${data[i].goodnames}</p>
                    <p>商品名称${data[i].price}</p>
                    <p>商品名称${data[i].nums}</p>`
                }

            }
            concent.innerHTML = str;
        }

三、history 对象

history对象是JavaScript中的一种默认对象，该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法，可以完成类似于浏览器窗口中的前进、后退等按钮的功能

JavaScript BOM对象