JavaScript----第五章

1. 浏览器对象模型

• 浏览器对象模型BOM(Broswer Object Model)

• 给我们提供了一套操作浏览器属性与方法的语法(API)

2. window

• window是浏览器当中的顶级对象

• window操作的属性与方法可以省略window不写

• 在全局作用域当中定义的变量就是window的属性,在全局作用域当中定义的函数就是window的方法

3. 操作浏览器的属性与方法

A. 浏览器的宽高

• window.innerHeight => 获取浏览器的高度

• window.innerWidth => 获取浏览器的宽度

比如

//获取浏览器的宽度 => 包含滚动条
console.log(window.innerWidth);
console.log(window.innerHeight);

B. 浏览器的标签页面

• window.open(URL地址) => 打开一个标签页

• window.close() => 关闭当前标签页

比如

<button id="btn1">打开一个标签</button>
<button id="btn2">关闭当前标签</button>
<script>
    //操作浏览器的标签页面
​
    //打开一个标签页
    btn1.onclick = function(){
        window.open("http://ng.chenfeng.online")
    }
​
    //关闭一个标签页
    btn2.onclick = function(){
        window.close();
    }
</script>

C. 浏览器的弹出层

• window.alert() => 弹出框

• window.confirm() => 确认框

• window.prompt() => 输入框

比如

/* 
    操作浏览器的弹出层
    共同点: 阻断代码往后面执行
    alert => 没有返回值
    confirm => 有返回值,点击确认返回true,点击取消返回false
    prompt => 有返回值,点击确认返回输入的内容,点击取消返回null
*/
alert("弹出")
​
var res1 = confirm("您确定要删除吗?")
console.log(res1);
​
var res2 = prompt("请输入您的姓名?")
console.log(res2);

D. 浏览器的历史记录

• window.history.forward() => 前进一页

• window.history.back() => 返回一次

• window.history.go

  • go(2) => 前进两页

  • go(-2) => 返回两页

  • go(0) => 刷新页面

比如

<h1>我是A页面</h1>
<a href="B.html">去往B</a>
<button id="btn1">前进一页</button>
<button id="btn2">前进二页</button>
<button id="btn3">后退一页</button>
<button id="btn4">后退二页</button>
<script>
​
    //前进一页
    btn1.onclick = function(){
        window.history.forward()
    }
    //前进两页
    btn2.onclick = function(){
        window.history.go(2)
    }
​
    //后退一页
    btn3.onclick = function(){
        window.history.back();
    }
​
    //后退两页
    btn4.onclick = function(){
        window.history.go(-2)
    }
</script>

E. 浏览器的事件

• window.onload => 当页面的一些资源加载完毕(html,css,js,视频,音频...),再执行,页是一个异步代码

• window.onscroll => 当浏览器的滚动条发生改变的时候,那么就执行

• window.onresize => 当浏览器的窗口发生改变的时候,执行

比如

<style>
    html,body{
        height: 3000px;
    }
</style>
​
<img src="https://img0.baidu.com/it/u=1618935365,4217565704&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="">
<script>
    //当浏览器的一些资源(HTML,css,js...)
    window.onload = function(){
        console.log("浏览器的加载事件....");
    }
</script>
<img src="https://img0.baidu.com/it/u=2405175533,3664722999&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="">
​
​
<script>
    //当滚动条发生改变的时候,那么就执行函数
    window.onscroll = function(){
        console.log("window.onscroll");
    }
</script>
​
​
<script>
    //当浏览器的窗口发生改变之后,那么就执行这个函数
    window.onresize = function(){
        console.log("window.onresize");
    }
</script>

F. 浏览器的location

• window.location.reload() => 是一个方法,刷新页面

• window.location.href => 相当地址栏,当代码执行,会跳转到href后面的地址

比如

<button id="btn1">刷新页面</button>
<button id="btn2">去晨锋</button>
<script>
    btn1.onclick = function(){
        //点击刷新页面
        window.location.reload();
    }
​
    btn2.onclick = function(){
        //跳转到某一个地址
        window.location.href = "http://ng.chenfeng.online"
    }
</script>

G. 浏览器的卷出

• 如果有<!DOCTYPE> 存在,那么卷出的高度为 document.documentElement.scrollTop

• 如果没有<!DOCTYPE> 存在,那么卷出的高度为 document.body.scrollTop

• 上下综合: var scrollH = document.documentElement.scrollTop || document.body.scrollTop

• 左右综合: var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft

比如

<style>
html,body{
    height: 3000px;
    width: 3000px;
}
</style>
<script>
//浏览器的滚动事件
window.onscroll = function(){
    //获取浏览器的卷出高度 => 
    // 当<!DOCYTPE>存在,那么获取卷出的高度为 document.documentELement.scrollTop
    // 当<!DOCTYPE>不存在的时候,那么获取卷出的高度为 document.body.scrollTop
    // console.log(document.documentElement.scrollTop);
    // console.log(document.body.scrollTop);
​
    //当左边为0(false),那么就会将右边的内容返回返回值,如果左边不false,那么就将左边的内容返回返回值
    var scrollH = document.documentElement.scrollTop || document.body.scrollTop
    console.log(scrollH);
​
    var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft
    console.log(scrollL);
}
</script>

H. 浏览器卷到

• 方式一 => window.scrollTo(X轴,Y轴)

• 方式二 => window.scrollTo({top:yyy,left:xxx})

• 方式三 => window.scrollTo({top:yyy,left:xxx,behavior:"smooth"})

比如

<style>
    html,body{
        height: 3000px;
        width: 3000px;
    }
</style>
<button id="btn">卷到</button>
<script>
    btn.onclick = function(){
        // 浏览器卷到 X轴卷到100px的位置,y轴要卷到200px的位置
        // 方式一
        window.scrollTo(100,200)
​
        //方式二
        window.scrollTo({
            top:200,
            left:300
        })
​
        //方式三
        window.scrollTo({
            top:1100,
            left:2200,
            behavior:"smooth" //纵享丝滑
        })
​
    }

I. 浏览器的存储

特点

storage是浏览器的存储地方
storage特点:
1. 存储的空间大概5M,不同的浏览器,略有差异
2. 存储的结构键值对
3. localStorage持久化存储,只要存储进去之后,不人为的干涉,那么就一直存储在浏览器当中
    sessionStorage会话存储,当我们关闭浏览器之后,那么存储的内容消失
4. storage里面不能存储对象,数组,存储对象或者数组的时候,需要将对象或者数组转换成JSON数据

• 持久化存储localStorage

  • 增加 => window.localStorage.setItem(key,value)

  • 删除 => window.localStorage.removeItem(key)

  • 获取 => window.localStorage.getItem(key)

  • 清除 => window.localStorage.clear()

• 会话存储sessionStorage

  • 增加 => window.sessionStorage.setItem(key,value)

  • 删除 => window.sessionStorage.removeItem(key)

  • 获取 => window.sessionStorage.getItem(key)

  • 清除 => window.sessionStorage.clear()

比如

//增加
window.localStorage.setItem("name","张三")
window.localStorage.setItem("obj",JSON.stringify({name:"张三",age:18}))
window.localStorage.setItem("age",111)
//删除
window.localStorage.removeItem("age")
//获取
var res1 = window.localStorage.getItem("name")
var res2 = JSON.parse(window.localStorage.getItem("obj"))
console.log(res1);
console.log(res2);
// 全部清除
window.localStorage.clear();
​
​
​
//session的用法
//添加
sessionStorage.setItem("name",'李四')
sessionStorage.setItem("obj",JSON.stringify({name:"张三",age:18}))
sessionStorage.setItem("age",18)
//删除
sessionStorage.removeItem("age")
//获取
var res1 = sessionStorage.getItem("name")
var res2 = JSON.parse(sessionStorage.getItem("obj"))
console.log(res1);
console.log(res2);
//清除所有的会话存储
sessionStorage.clear();

4. 获取页面的元素

1. ID => 身份证,可以直接获取,得到的是一个

2. document.getElementById("") => 根据ID获取元素,得到是一个

3. document.getElementsByClassName("") => 根据类名获取,得到的是一个伪数组

4. document.getELementsByTagName("") => 根据标签名获取,得到的是一个伪数组

5. document.querySelector("") => 根据选择器获取,得到是选择器中的第一个

6. document.querySelectorAll("") => 根据选择器获取,得到的是伪数组

比如

<ul class="box1">
    <li>111</li>
    <li id="i11">222</li>
    <li>333</li>
    <li class="c1">444</li>
    <li class="c1">444</li>
</ul>
<ul class="box2">
    <li>111</li>
    <li id="i12">222</li>
    <li>333</li>
    <li class="c1">444</li>
    <li class="c1">444</li>
</ul>
<script>
console.log(i1);
​
var i1 = document.getElementById("i1")
console.log(i1);
​
var lis = document.getElementsByTagName("li")
console.log(lis[0]);
​
var cc = document.getElementsByClassName("c1")
console.log(cc[1]);
​
var l1 = document.querySelector("ul>li:nth-child(1)")
console.log(l1);
​
var l2 = document.querySelector("#i11")
console.log(l2);
​
var cc = document.querySelectorAll("ul>.c1")
console.log(cc);
​
var cc = document.querySelectorAll(".box1>.c1")
console.log(cc);
​
var c2 = document.querySelectorAll(".box2>.c1")[1]
console.log(c2);
</script>

5. 操作元素的属性

A. 原生属性

• 设置 => 标签.属性名 = 属性值

• 获取 => 标签.属性

比如

<input type="text" id="box" value="11" >
<script>
    /* 
    操作元素的属性
        原生属性
            一个标签自带的属性
            设置 => 标签.属性名 = 属性值
            获取 => 标签.属性
    */
    var box = document.querySelector("#box")
    //设置
    box.abc = "33333"
    box.value = "222222222222222"
    box.id = "1111"
    box.type = "password"
    //获取
    console.log(box.id);
    console.log(box.type);
    console.log(box.abc);
</script>

B. 自定义属性

• 设置 => 标签.setAttribute(key,value)

• 获取 => 标签.getAttribute(key)

• 删除 => 标签.removeAttribute(key)

比如

<input type="text" id="a" value="aaa">
<script>
    /* 
        操作元素的自定义属性
            设置 => 标签.setAttribute(key,value)
            获取 => 标签.getAttribute(key)
            删除 => 标签.removeAttribute(key)
    */
    var inp = document.querySelector("input")
    //设置
    inp.setAttribute("value","月亮不睡我不睡,我是陈锦小宝贝")
    inp.setAttribute("abc","123456")
    inp.setAttribute("id","iii")
    //获取
    console.log(inp.getAttribute("value"));
    console.log(inp.getAttribute("id"))
    console.log(inp.getAttribute("abc"))
    //删除
    inp.removeAttribute("id")
    inp.removeAttribute("abc")
</script>

C. H5自定义属性

• 设置 => 标签.dataset.属性名 = 属性值

• 获取 => 标签.dataset.属性名

• 删除 => delete 标签.dataset.属性名

• 缺点: 但我们使用驼峰命名的时候,他会将驼峰命名转换成多个单词中划线的写法

比如

<div>你好</div>
<script>
    /* 
        HTML5自定义属性
            当我们使用H5自定义属性设置属性的时候,这个属性会在 `data-` 的后面
            
            设置 => 标签.dataset.属性名 = 属性值
            获取 => 标签.dataset.属性名
​
            缺点: 但我们使用驼峰命名的时候,他会将驼峰命名转换成多个单词中划线的写法
                比如: 
                    data-goodsList => data-goods-list
                    所以我们后面使用自定义属性的时候,最好不要使用驼峰命名法
    */
    var box = document.querySelector("div")
    //设置
    box.dataset.index = 1;
    box.dataset.abc = "123"
    box.dataset.goodsList = "商品列表"
    //删除
    delete box.dataset.abc
    //获取
    console.log(box.dataset.index);
    console.log(box.dataset.abc);
    console.log(box.dataset.goodsList);
</script>