JavaScript BOM

BOM

1. BOM

BOM：浏览器对象模型，它提供了和浏览器相关的一些属性和操作方法

2. innerHeight和innerWidth

window：浏览器窗口对象

window . innerHeight：浏览器可视区域的高

window . innerWidth：浏览器可视区域的宽

//onresize事件 窗口尺寸发生改变时，要做些事情
window.onresize = function(){
  console.log(window.innerWidth,window.innerHeight;
}

3. scrollTop和scrollLeft

scrollTop：竖直方向上滚动条的滚动距离

scrollLeft：水平方向上滚动条的滚动距离

//TOP 回顶部按钮
window.onscroll = function(){
//console.log(document.documentElement.scrollTop);
//console.log(document.documentElement.scrollLeft);
    let st = document.documentElement.scrollTop;
    if(st >= window.innerHeight){
        btn.style.display = "block";
    }
    else{
        btn.style.display = "none";
    }
}
btn.onclick = function goTop(){
    window.scrollTo({
        top:0,behavior:"smooth",
    })
    //document.documentElement.scrollTop = 0;//改值
    //window.scrollTo(0,0);
}

4. onload

onload：等页面结构、资料（图片，引入的一些外部文件）加载完毕后才触发

window.onload = function(){
    console.log("onload");
}
console.log("直接");
setTimeout(function (){
    console.log("延时器");
},0)
//异步永远都是在最后执行

5. 弹窗

//提示框alert()
      //输入框 prompt() 用户输入的值用一个变量接收
       let res = prompt("输入内容");
       console.log(res);//点确定 得到输入的值  点取消 得到null

      //确认框 confirm() //根据用户的选择会返回一个布尔值
        btn.onclick = function(){
        let flag = confirm("您确认要删除该条数据吗?");
        console.log(flag);
        if(flag){
            p1.style.display = "none";//虚假的删除
        }
    }

    //open()弹出一个新的页面窗口，属于是新打开一个页面
     window.open("http://www.baidu.com");

    //close()关闭一个窗口，但是在它上面的代码仍然会运行，如：上面的open仍然会弹出一个新页面，随后原页面关闭，但新页面不会关闭
     btn.onclick = function(){
         window.close();
     }

6. location

location：和浏览器的地址（url/网址）相关的一个对象

console.log(location.href);//获取当前页面的完整网址
location.href = "https://www.4399.com";//跳转页面
location.reload();//刷新页面
document.onclick = function(){
    location.reload();
}//点击页面时，刷新页面
//对url地址进行拆分
console.log(location.protocol);//协议
console.log(location.hostname); //主机
console.log(location.port);// 端口号
console.log(location.pathname);//文件路径
console.log(location.search);//查询参数
console.log(location.hash);//哈希值 哈希路由

7. history

//history历史记录    
// history.forward();//前进一页
// history.back();//后退一页
// history.go(n);//前进/后退n页

8. DOM中的查

DOM：文档对象模型 与页面内容（节点）相关的属性和方法

 //通过id名来取
let oP = document.getElementById("dl"); //某个具体的元素节点 就可以直接操作
oP.innerText = "hello";

//通过类名来取
let aTest = document.getElementsByClassName("test"); //一个集合（伪数组）
        //aTest[0].innerText = "aaa";
        //aTest[1].innerText = "bbb"; //通过索引取到具体的元素节点，再去操作
        //通过标签名来取
        let aPs = document.getElementsByTagName("p");//一个集合（伪数组）
        let aSpans = document.getElementsByTagName("span");
        console.log(aPs.length,aSpans.length);
        //通过选择器选择第一个匹配到的元素节点
        let oP1 = document.querySelector("p");
        console.log(oP1);
        console.log(oP1.querySelector("span"));
        //通过选择器选择所有匹配到的元素节点
        let aps = document.querySelectorAll("p");
        console.log(aps);
        //取到所有的p和span
console.log(document.querySelectorAll("p,span")); console.log(document.querySelectorAll("div>span"));