【前端】Web API

1.Web API 简介

JS分为三大部分：

ESCMScript：基础语法部分
DOM API：操作页面结构
BOM API：操作浏览器

Web API包含 DOM + BOM

2.DOM基本概念

DOM全称 Document Object Model

重要概念：

文档：一个页面就是一个文档，使用document表示
元素：页面中所有的标签都称为元素，使用element表示
节点：网页中所有的内容都可以称为节点（标签节点，注释节点，文本节点，属性节点），使用node表示

3.获取元素

querySelector & querySelectorAll

html 复制代码

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <h3><span><input type="text"></span></h3>
</body>
<script>
    console.log(document.querySelector('.box1')) //获取box1
    console.log(document.querySelector('h3').querySelector('span')) //获取span中的内容
    console.log(document.querySelector('h3').querySelector('span').querySelector('input')) //获取input中的内容
    console.log(document.querySelectorAll('div')) //获取两个div中的内容
</script>

4.事件

三要素：

事件源：哪个元素触发的
事件类型：点击 / 选中 / 修改
事件处理程序：进一步如何处理（往往是一个回调函数）

4.1点击事件

html 复制代码

<script>
    //事件源
    let button = document.querySelector('input')
    //绑定事件类型
    button.onclick = function(){ //点击事件
        //设定事件处理程序
        alert('hello')
    }
</script>

4.2键盘事件

1> onkeydown

不区分大小写

html 复制代码

<body>
    <input type="text">
</body>
<script>
    //事件源
    let input = document.querySelector('input')
    //绑定事件类型
    input.onkeydown = function(event) {
        //设定事件处理程序
        console.log("键盘正在按下")
        let a = event.keyCode;
        console.log(a)
        let b = String.fromCharCode(a)
        console.log(b)
    }
</script>

2> onkeypress

类似onkeydown，但是区分大小写

3> onkeyup

html 复制代码

<body>
    <input type="text" onkeyup="myOnkeyUp">
</body>
<script>
    //事件源
    let input = document.querySelector('input')
    //绑定事件类型
    function myOnkeyUp() {
        //设定事件处理程序
        console.log("按键被抬起")
    }
</script>

注意：并不是所有按键都可用上述三个事件表示，还有ctlKey、altKey、shiftKey等

5.获取/修改属性

5.1基本元素

html 复制代码

<body>
    <img src="../html/src/休闲.jpg" alt="图片加载失败" title="this is a photo" width="100px" height="100px">
</body>
<script>
    //获取元素属性
    let img = document.querySelector('img')
    console.dir(img)
    //修改元素属性
    img.title = "revised title"
    //绑定事件
    img.onclick = function() {
        alert("点击图片")
    }
</script>

5.2表单元素

1> 音乐播放器

html 复制代码

<body> 
    <input class="btn" type="button" value="播放" onclick="onClick()">
</body>
<script>
    let btn = document.querySelector('.btn')
    //点击"播放"，变成"暂停"
    //点击"暂停"，变成"播放"
    function onClick() {
        if(btn.value == "播放") {
            btn.value = "暂停"
        } else {
            btn.value = "播放"
        }
    }
</script>

2> 计数器

html 复制代码

<body>
    <input class="input" type="text" value="0">
    <input class="add" type="button" value="+1" onclick="Add()">
    <input class="sub" type="button" value="-1" onclick="Sub()">
</body>
<script>  
    function Add() {
        let num = document.querySelector('.input') //获取
        num.value = parseInt(num.value) + 1  //修改
    }
    function Sub() {
        let num = document.querySelector('.input')
        num.value = parseInt(num.value) - 1
    }
</script>

3> 全选按钮

html 复制代码

<body>
    <input class="all" type="checkbox" onclick="selectAll()">全选<br>
    <input class="select" type="checkbox">选项一<br>
    <input class="select" type="checkbox">选项二<br>
    <input class="select" type="checkbox">选项三<br>
    <input class="select" type="checkbox">选项四<br>
</body>
<script>
    let all = document.querySelector('.all')
    let select = document.querySelectorAll('.select')
    //所有选项全选，全选按钮选中
    function selectAll() {
        for(i = 0; i < select.length; i++) {
            select[i].checked = all.checked  //改为选中状态
        }
    }
    //有一个选项没选，全选按钮取消
    for(i = 0; i < select.length; i++) {
        select[i].onclick = function() {
            all.checked = isSelectAll(select)
        }
    }
    function isSelectAll(select) {
        for(i = 0; i < select.length; i++) {
            if(select[i].checked == false) {
                return false
            }
        }
        return true
    }
    console.dir(all)
</script>

5.3样式属性

1> 行内样式操作

通过style直接在标签上指定样式，优先级很高。这种方式修改只能影响到特定样式，其他内联样式的值不变

//点击文字放大字体

html 复制代码

<body>
    <div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
</body>
<script>
    function changeSize() {
        let elem = document.querySelector('div')
        console.log(elem.style)
        //获取属性
        let size = elem.style.fontSize
        console.log(typeof(size)) //string
        //修改属性
        size = parseInt(elem.style.fontSize) + 10
        //法一
        elem.style.fontSize = size + "px"
        //法二
        elem.style.cssText = "font-size:" + size + "px"
    }
</script>

2> 类名样式操作

//开启夜间模式

html 复制代码

//style标签在head标签中
<style>
    //白天模式
    .light {
        background-color: aliceblue;
        color: black;
        width: 100%;
        height: 100%;
    }
    //夜间模式
    .dark {
        background-color: black;
        color: white;
        width: 100%;
        height: 100%;
    }
    body,html {
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <div class="light" onclick="changeStyle()">
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
    </div>
</body>
<script>
    function changeStyle() {
        let elem = document.querySelector('div')
        //当前样式为白天模式，切换为夜间模式
        //否则切换为白天模式
        if(elem.className == "light") {
            elem.className = "dark"
        } else {
            elem.className = "light"
        }
    }
</script>

6.操作节点

6.1插入节点

创建元素节点
使用appendChild或insertBefore把元素节点插入到dom树中

注意：如果针对一个节点插入两次，则只有最后一次生效

html 复制代码

<body>
    <div>
        <p class="p1">这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
    </div>
</body>
<script>
    //创建新节点
    let elem1 = document.createElement('h1')
    elem1.innerHTML = "插入指定节点后"
    let elem2 = document.createElement('h2')
    elem2.innerHTML = "插入指定节点前"
    //使用appendChild将节点插入到dom树中指定节点后
    let div = document.querySelector('div')
    div.appendChild(elem1)
    //使用insertBefore将节点插入到dom树中指定节点前
    //如果指定节点为null，则默认插入节点末尾
    div.insertBefore(elem2,document.querySelector('.p2'))
    div.insertBefore(elem2,document.querySelector('.p1'))
</script>

6.2删除节点

html 复制代码

<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div id="delete">4</div>
    </div>
</body>
<script>
    let parent = document.querySelector('.container')
    let child = document.querySelector('#delete')
    //没有父子关系，删除会报错
    let elem = parent.removeChild(child) //删除
    console.dir(elem)
    //被删除的节点只是从dom树中删除了，仍存在内存中，可随时加入到dom树中
    parent.appendChild(elem) //加入
</script>

7.代码案例

猜数字，表白墙，待办事项......下篇博客再战~