JS web api

最新推荐文章于 2023-08-12 16:02:46 发布

Blue www

最新推荐文章于 2023-08-12 16:02:46 发布

阅读量155

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_46191169/article/details/116272033

版权

本文介绍了WebAPI的概念，如何通过BOM和DOM操作浏览器元素，包括getElementById、getElementsByTagName、新特性方法如getElementsByClassName和querySelector。同时涵盖了DOM树结构、事件基础、元素操作、属性操作和案例演示。

摘要由CSDN通过智能技术生成

JS Web API

API的概念

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

Web APIs的概念

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）

API和Web API总结

API是为程序员提供的一个接口，帮助我们实现某种功能。
Web API 主要针对浏览器提供的接口，主要针对浏览器做交互效果。
Web API一般都有输入和输出（函数的传参和返回值），WebAPI很多都是方法（函数）
学习API可以结合前面学习内置对象方法的思路学习

DOM介绍

文档对象模型（Document Object Model，简称DOM）,是处理可扩展标记语言的标准编程接口。

DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ip7CDwI-1619685420165)(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601353196467&di=aacd3b004eb6c9f5a0b1a7d2cb1f3ff7&imgtype=0&src=http%3A%2F%2Fimage.mamicode.com%2Finfo%2F201806%2F20180615101840561539.png)]

DOM数又称为文档数模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所用内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常成为元素节点，又简称为“元素”，使用element表示

获取元素

根据ID获取

语法：docuemnt.getElementById(“id”)
作用：根据ID获取元素对象
参数id值，区分大小写的字符串
返回值：元素对象 或 null

  <div id=one></div>
    <script>
        var one = document.getElementById("one");
        one.style.backgroundColor="red"
        one.style.width="100px"
        one.style.height="100px"
    </script>

根据标签名获取元素

语法：document.getElementsByTagName(“标签名”)

作用：根据标签名获取元素对象

参数：标签名

返回值：元素对象集合（伪数组，数组元素是元素对象）

    <div></div>
    <div></div>
    <div></div>
    <script>
        var one = document.getElementsByTagName("div");
        //控制台查看返回数组
        console.log(one)
        //循环输出
        for(var i = 0; i<one.length; i++ ){
          one[i].style.width='100px';
          one[i].style.height="100px"
          one[i].style.backgroundColor="red"
        }

H5新增获取元素方式

document.getElementsByClassName(“类名”)//根据类名返回数组对象集合

    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <script>
        var one = document.getElementsByClassName("one")
        console.log(one)
    </script>

document.querySelector(“选择器”)//根据指定选择器返回第一个元素对象

    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <script>
        var one = document.querySelector(".one")
        console.log(one)
    </script>

document.querySelectorAll(“选择器”)//根据指定选择器返回

    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <script>
        var one = document.querySelectorAll(".one")
        console.log(one)
    </script>

获取特殊元素（body，html）

获取body元素

document.body

 document.body.style.backgroundColor="red"

获取html元素

document.documentElement

document.documentElement.style.color="red"

事件基础

事件三要素

事件源（谁）：触发时间的元素
事件类型（什么事件）：例如click点击事件

事件处理程序（做什么）：事件触发后要执行的代码

<button>点击事件</button>
<script>
    var btn = document.querySelector("button")
    btn.onclick = function(){
        alert("我在这")
    }
</script>

常见的鼠标事件

事件	说明
onClick	鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onfocus	获得鼠标焦点
onblur	失去鼠标焦点
onMouseOut	当鼠标离开某对象范围时触发的事件
onDblClick	鼠标双击事件
onMouseDown	鼠标上的按钮被按下了
onMouseUp	鼠标按下后，松开时激发的事件
onMouseOver	当鼠标移动到某对象范围的上方时触发的事件
onMouseMove	鼠标移动时触发的事件

键盘事件

事件	说明
onkeydown	按下键盘时运行脚本
onkeypress	按下并松开时运行脚本
onkeyup	事件会在键盘按键被松开时发生

操作元素

改变元素内容

element.innerText

从起始位置到终止位置的内容，但去除html标签

<button>点击事件</button>
<script>
    var btn = document.querySelector("button")
    btn.onclick = function(){
        btn.innerText="<strong>我变粗了</strong>"
    }

element.innerHTML

从起始到终止位置的全部内容，包括html标签

<button>点击事件</button>
<script>
    var btn = document.querySelector("button")
    btn.onclick = function(){
        btn.innerHTML="<strong>我变粗了</strong>"
    }

区别

获取内容时
- innerText会去除空格和换行，innerHTML会保存
设置内容时的区别
- innerText不识别HTML，innerHTML会识别

案例：点击获取当前时间

<button>点击</button>
<div>显示时间</div>
<script>
    var btn = document.querySelector("button")
    var time = document.querySelector("div")
    btn.onclick = function(){
        time.innerHTML= getDate();
    }
    function getDate(){
        var date= new Date();
        var year = date.getFullYear();
        var month  = date.getMonth()+1;
        var dates = date.getDate();
        var day = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
        return `今天是：${year} 年 ${month} 月 ${dates} 日 ${arr[day]}`
    }
</script>

常用的元素的属性操作

inneText、innerHTML
src‘、href
id、alt、title

表单属性操作

type、value、checked、selected、disabled

获取元素的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如disabled、checked、selected，元素对象的这些属性的值是布尔型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            width: 800px;
        }
        th,
        td {
            border: 1px solid #000;
            padding: 15px;
            /* width: 100px; */
            text-align: center;
        }

        .active {
            background: rgb(240, 111, 111);
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input id='all' type="checkbox"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class='cbox' type="checkbox"></td>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input class='cbox' type="checkbox"></td>
                <td>2</td>
                <td>小明</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input class='cbox' type="checkbox"></td>
                <td>3</td>
                <td>小明</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    var trs = document.querySelectorAll('tbody tr');
    var all = document.querySelector("#all")
    var cbox = document.getElementsByClassName("cbox")
    // 全选
    all.onclick = function () {
        for (var i = 0; i < cbox.length; i++) {
            cbox[i].checked = this.checked;
        }
    }
    //反选

    for(var  i = 0; i < trs.length; i++){
        trs[i].onclick= function(){
            var flag = 1;
            for(var i = 0; i<trs.length; i++){
                if(!cbox[i].checked){
                    flag = 0;
                    break
                }
            }
            all.checked=flag
        }
    }
    //悬浮背景
    for (var j = 0; j< trs.length; j++) {
        trs[j].onmouseover = function () {
            this.className = 'active'
        }
        trs[j].onmouseout = function () {
            this.className = ''
        }
    }
    // for (var i = 0; i < trs.length; i++) {
    

    //     if (i % 2 == 0) {
    //         trs[i].style.background = ' yellow'
    //     } else {
    //         trs[i].style.background = 'purple'
    //     }

    // }  
</script>

</html>

样式属性操作

element.style 行内样式操作

element.className 类名样式操作

自定义属性操作

element.属性获取内置属性值
element.getAttribute(‘属性’) 获取自定义的属性值

<body>
    <div id="demo" index="1" class="nav"></div>
</body>
<script>
    var div = document.querySelector("div")
    console.log(div.id)
    console.log(div.getAttribute('id'))
    console.log(div.getAttribute('index'))
</script>

设置属性值

element.属性 = ‘值’ 设置内置属性值

element.setAttribute(‘属性’,‘值’)

    var div = document.querySelector("div")
    div.setAttribute('class','hello')
    div.setAttribute('index',2)

移出属性

element.removeAttribute(‘属性’)
```
div.removeAttribute('index')
```

计数器案例

<script>
    var btn = document.querySelector("button");
    var flag = 0
    btn.onclick = function () {
        if (flag == 0) {
            document.body.style.background = '#000'
            flag = 1
        } else if (flag == 1) {
            document.body.style.background = '#fff'
            flag = 0
        }
    }
</script>

全选与反选案例

<script>
    var all = document.querySelector('.all');
    var box = document.querySelectorAll('tbody input');
    //全选
    all.onclick = function(){
        //设置点击事件
        for(var i = 0; i < box.length; i++){
            box[i].checked = this.checked
            //循环，为每一个 input 设置选中属性
        }
    }
    
    
    //反选
    for(var i = 0; i < box.length; i++){
        //循环出所有的 input 标签
        box[i].onclick = function(){
            //设置点击事件，当点击一个 input 时 判断其他 input 标签状态
            var flag = 1;
            //设置旗帜变量，如果为 1 则反选 
            for(var i = 0; i < box.length; i++){
                if(!box[i].checked){
                    //如果 tbody 中的 input 有一个没有被选中，执行判断语句
                   flag = 0;
                    break;
                }
            }
            all.checked=flag    //结果
        }
    }
</script>

nav案例

 <script>
    var lis = document.querySelectorAll('li');
    //获取全部 li 标签
    var divs = document.querySelectorAll('div');
    //获取全部 div 标签
    for (var i = 0; i < lis.length; i++) {
        //循环 li 标签
        lis[i].setAttribute('index', i);
        //为每一个 li 标签设置 index 属性
        lis[i].onclick = function () {
            //设置点击事件
            for (var i = 0; i < lis.length; i++) {
                //清除所有样式
                lis[i].className = ''
            }
            this.className = 'active';
            //设置点击样式
            
            
            var index = this.getAttribute('index');
            //获取 index 属性
            for(var i  = 0; i<divs.length; i++){
                //循环 div 标签
                divs[i].style.display = 'none';
                //设置所有 div 隐藏
            }
            divs[index].style.display = 'block';
            //设置索引值为 index 的 div 的样式为 显示
        }
    }
</script>