JavaScript-API-笔记

最新推荐文章于 2024-07-12 16:27:40 发布

黑人的乔丹鞋

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量195

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/HeiRen_QDX/article/details/115710191

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

API文档简介

概念：API是程序员提供的一种工具，一些预先定义的函数，以便能方便的实现想要完成的程序及功能。

Web API 文档

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

DOM简介

文档对象模型(Document Object Model 简称DOM)，是3WC组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

名词解析

文档：一个页面就是一个文档，DOM中使用document表示。

元素：页面中的所有标签都是元素，DOM中使用element表示。

节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

DOM把以上内容都是对象。

获取元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

根据ID获取

使用getElemenetByld()方法可以获取带有ID的元素对象。

[Document]的方法 [getElementById()]返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

语法

var 对象名= document.getElementById(id);

参数

id是大小写严格区分的字符串，代表需要查找元素的唯一ID。

返回值

返回匹配到ID的MOD element 对象。若是查找ID元素不存在，那么就返回null。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- 创建标签 -->
    <div id="hi">hi~</div>
    <!-- 因为我们的游览器是自上而下的运行代码，获取id对象的前提就是有id元素，所以需要将script标签写在后面 -->
    <script>
        //getElementById 获取 元素 通过，理解为：通过id获取元素
        var element = document.getElementById('hi');
        //打印对象（控制台）
        console.log(element);
    </script>
</body>

</html>

结果

在这里插入图片描述

根据标签名获取

使用getElementsByTagName()方法可以返回标签对象的集合

[Document]的方法[getElementsByTagName()]通过指定的标签字符串获取改标签的集合（伪数组）。

语法

var 对象名= document.getElementsByTagName(标签);

参数

**标签**是字符串形式html5中标签名，也是区分大小写的。

返回值

返回值是传参标签的标签集合，传参标签不存在，则返回null。是一个伪数组。动态的，随着内容改变而改变。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建标签 -->
    <ul>
        <li>知否知否，应是等你好久。</li>
        <li>知否知否，应是等你好久。</li>
        <li>知否知否，应是等你好久。</li>
        <li>知否知否，应是等你好久。</li>
        <li>知否知否，应是等你好久。</li>
    </ul>
    <!-- 创建js标签书写js代码 -->
    <script>
        //getElementsByTagName 获取 元素 通过 标签 名称 理解为 通过标签名获取元素
        var element = document.getElementsByTagName('li');
        //打印查询结果
        console.log(element);
    </script>
</body>

</html>

结果

在这里插入图片描述

注意事项

当我们想获取子标签Document对象，时出现多个相同父标签。我们可以给父标签添加id，再通过getElementById()获取父标签Document对象，之后再通过getElementsByTagName()获取子标签Document对象。

通过HTML5新增的方法获取

通过getElementsByClassName()类名获取对象。

语法

var 对象名= document.getElementsByClassName(类名);

参数

类名是一个字符串，严格区分大小写。

返回值

返回值是传参类名的集合，传参不存在就返回null。返回值是一个伪数组，也是动态的，随着内容变化。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建演示标签 -->
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <!-- 创建js标签，书写js代码 -->
    <script>
        //getElementsByClassName 获取 元素 通过 类 名称 理解为 通过类名获取元素
        var elements = document.getElementsByClassName('box');
        //打印结果
        console.log(elements);
    </script>
</body>

</html>

结果

在这里插入图片描述

通过HTML5新增的方法获取2

通过[Document]对象[querySelector('选择器')]方法，获取元素对象。

语法

var 对象名= document.querySelector(选择器);

参数

选择器和css的选择器类似，参数是一个字符串。

querySelector('标签名')

querySelector('.类名')

``querySelector(’#id名’)`

选择器：与css相同。

返回值

返回值是页面符合条件的第一个元素。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建演示标签 -->
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <!-- 创建js标签，书写js代码 -->
    <script>
        //1.通过getElementsByClassName()类名获取元素集合
        //getElementsByClassName 获取 元素 通过 类 名称 理解为 通过类名获取元素
        var elements = document.getElementsByClassName('box');
        //打印结果
        console.log(elements);
        //2.通过querySelector()查询选择器获取元素，但只获取页面符合第一个元素对象。
        //querySelector 查询 选择器 理解为 查询选择器
        var boxs = document.querySelector('.box');
        console.log(boxs);
    </script>
</body>

</html>

结果

在这里插入图片描述

通过HTML5新增的方法获取3

通过[Document]对象[querySelectorAll()]方法，获取元素对象集合。

语法

var 对象名= document.querySelectorAll(选择器’);

参数

选择器和css的选择器类似，参数是一个字符串。

querySelectorAll('标签名')

querySelectorAll('.类名')

``querySelectorAll(’#id名’)`

返回值

返回值是所有符合条件的元素集合，是一个伪数组。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建演示标签 -->
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <!-- 创建js标签，书写js代码 -->
    <script>
        //1.通过getElementsByClassName()类名获取元素集合
        //getElementsByClassName 获取 元素 通过 类 名称 理解为 通过类名获取元素
        var elements = document.getElementsByClassName('box');
        //打印结果
        console.log(elements);
        //2.通过querySelector()查询选择器获取元素，但只获取页面符合第一个元素对象。
        //querySelector 查询 选择器 理解为 查询选择器
        var boxs = document.querySelector('.box');
        console.log(boxs);
        //3.通过querySelectorAll() 查询选择器获取所有元素
        //querySelectorAll 查询 选择器 所有 理解为 所有都查询选择器
        var boxss = document.querySelectorAll('.box');
        console.log(boxss);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

</html>

结果

在这里插入图片描述

获取特殊元素

1获取body标签元素

通过[Document]的[body]属性获取body元素对象。

语法

var 对象名= document.body;

2.获取html标签元素

通过[Document]的[documentElement]属性获取body元素对象。

语法

var 对象名 = document.documentElement;

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        //获取body标签
        var element = document.body;
        console.log(element);
        //获取html元素
        var htmlElement = document.documentElement;
        console.log(htmlElement);
    </script>
</body>

</html>

结果

在这里插入图片描述

事件基础

当我们点击网页中的按钮，触发按钮的功能。这个过程就是事件。触发反应机制。

事件的组成

事件源：谁触发的？触发事件的对象。

事件类型：如何触发事件，如鼠标点击、鼠标悬停、键盘输入等。

事件处理程序：触发之后，应该做什么？

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建按钮 -->
    <button id="button">唐伯虎</button>
    <script>
        // 1.获取按钮对象->获取事件源
        var btn = document.getElementById('button');
        // 2.事件的触发类型：(onclick)点击
        // 3.事件处理程序
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

</html>

结果

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序(采用函数赋值形式)

鼠标事件

鼠标事件	触发条件
cilck	点击鼠标左键
mouseover	鼠标悬停时
mouseout	鼠标离开时
focus	获取鼠标焦点时
blur	失去鼠标焦点时
mousemove	鼠标拖动时
mouseup	鼠标弹起时
mousedown	鼠标按下时
contextmenu	鼠标右键菜单，配合事件对象的阻止默认行为，可以做到禁止鼠标右键的效果。
selectstart	鼠标选择。加上鼠标右键，配合事件阻止默认行为，就可以做到禁止复制的效果
mouseenter	鼠标进入时触发。与mouseover相似，但是mouseenter事件当鼠标经过绑定元素的子盒子不会触发。而mouseover会触发。因为mouseenter不会冒泡
mouseleave	鼠标离开时触发。与mouseout相似，但是mouseleave事件当鼠标经过绑定元素的子盒子不会触发。而mouseout会触发。因为mouseleave不会冒泡

文字禁止复制示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>这段文字禁止复制呢！</p>
    <script>
        var p = document.querySelector('p');//获取对象
        p.addEventListener('contextmenu', function(e) {//绑定contextmenu事件
            e.preventDefault();//阻止默认事件行为
        });
        p.addEventListener('selectstart', function(e) {//绑定selectstart事件
            e.preventDefault();//阻止默认事件行为
        });
    </script>
</body>

</html>

常用的鼠标对象属性或方法

属性名	说明
鼠标事件对象.clientX	鼠标相对于可视窗口的X坐标
鼠标事件对象.clientY	鼠标相对于可视窗口的Y坐标
鼠标事件对象.pageX	鼠标的X坐标
鼠标事件对象.pageY	鼠标的Y坐标
鼠标事件对象.screenX	鼠标相当于屏幕的X坐标
鼠标事件对象.screenY	鼠标相当于屏幕的Y坐标

操作元素

改变元素的内容

通过元素对象的[innerText]属性赋值改变内容。
通过元素对象的[innerHTML]属性赋值改变内容。

注意事项

innerText是不识别html标签的，innerHTML是识别html标签的。
innerText和innerHTML属性都是可读的，可以获取元素的内容。当然使用innerText属性读取的内容是空格和换行的，使用innerText属性读取的内容则是由空格、换行和标签的。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p></p>
    <script>
        //1.获取元素对象
        var btn = document.querySelector('button');
        var divElement = document.querySelector('div');
        var p = document.querySelector('p');
        //2.注册事件
        btn.onclick = function() {
                //3.处理事件
                divElement.innerText = getDates();
                p.innerHTML = '<strong>' + getDates() + '<strong/>';
            }
            //获取当前系统时间
        function getDates() {
            var date = new Date();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return date.getFullYear() + '年' + date.getMonth() + '月' + date.getDate() + '日 ' + arr[date.getDay()] + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

图片属性

src：图片路径。

title：图标标题，鼠标悬停时显示。

alt：图片无法正常加载时显示。

以上内容都可以通过元素对象赋值，修改其内容。

示例

<!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>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        button {
            width: 60px;
            height: 30px;
            background-color: #fff;
            line-height: 20px;
            border: 1px solid black;
            /* outline: none; */
        }
        
        img {
            margin-top: 20px;
            width: 400px;
            height: 300px;
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button><br>
    <img src="images/timg.jpg" alt="" title="张学友">
    <script>
        //1.获取元素对象
        var ldh = document.querySelector('#ldh');
        var zxy = document.querySelector('#zxy');
        var img = document.querySelector('img');
        //2.注册事件
        ldh.onclick = function() {
            //3.事件触发处理
            img.src = "images/timg2.jpg"; //src属性修改
            img.title = '刘德华';
        }
        zxy.onclick = function() {
            //3.事件触发处理
            img.src = "images/timg.jpg"; //src属性修改
            img.title = '张学友';
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

表单属性

value：input表单内容。其他标签是用innerHTML属性，而表单的内容是通过input查询、修改的。

disabled：禁止使用表单元素，按钮也可以使用disabled禁止使用。

注意：disabled为true是禁止，为null是启用。

type：表单属性。

示例

<!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>
        /* 创建css配置 如：衣服 */
        
        button {
            width: 80px;
            height: 25px;
            line-height: 19px;
            font-size: 14px;
        }
        
        input {
            width: 215px;
            height: 25px;
            line-height: 25px;
            color: #000;
            text-indent: 10px;
        }
    </style>
</head>

<body>
    <!-- 创建标签，也就是骨架 -->
    <button>按钮</button>
    <input type="text" name="" id="" value="" placeholder="请输入">
    <!-- 创建行为 -->
    <script>
        // 获取元素对象
        var btn = document.querySelector('button');
        var text = document.querySelector('input');
        // 注册事件
        btn.onclick = function() {
            // 处理事件
            text.value = '按钮被点击了';
            text.disabled = true;
            this.disabled = true;
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

示例

<!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>
        /* 创建css配置 皮肤或衣服 */
        
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: 0;
        }
        
        .box label {
            position: absolute;
            right: 10px;
            top: 3px;
        }
        
        .box label img {
            height: 24px;
            width: 24px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <!-- 创建标签 骨架-->
    <div class="box">
        <label for=""><img src="images/眼睛.png" alt=""></label>
        <input type="password" name="" id="">
    </div>
    <!-- 创建行为 -->
    <script>
        // 获取元素对象
        var label = document.querySelector('label');
        var input = document.querySelector('input');
        var img = document.querySelector('img');
        // 创建标记
        var b = false;
        // 注册事件
        label.onclick = function() {
            // 处理事件
            b = !b;
            if (b) {
                input.type = 'text';
                img.src = 'images/闭眼.png';
            } else {
                input.type = 'password';
                img.src = 'images/眼睛.png';
            }


        }
    </script>
</body>

</html>

结果

在这里插入图片描述

复选框选择状态

我们可以通过checked获取复选框当前的选择状态。

链接属性

设置href属性值为javascript:void(0)或者javascript:;阻止链接跳转。

标签样式-style

通过元素对象的style属性修改样式。

注意事项

style属性下**.**出来的样式都是采用驼峰命名法。如：backgroundColor、fontSize等。
这种修改的样式属于行内样式，比外链样式权重更高。

示例

<!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>
        /* 创建装饰 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 创建骨架 -->
    <div>div盒子</div>
    <!-- 创建行为 -->
    <script>
        var div = document.querySelector('div'); //获取元素对象
        div.onclick = function() { //注册事件
            div.style.backgroundColor = 'green'; //处理触发的事件，通过元素对象的style属性修改元素的样式。
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

示例

通过修改元素的style属性，中的dispaly`样式关闭广告。

<!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>
        /* 创建装饰-衣服 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 10px auto;
            position: relative;
            width: 115px;
            height: 115px;
            background-color: #fff;
            border: 1px solid red;
            display: block;
            /*此时为block显示，当·点击关闭·按钮·时，更改为none隐藏。*/
        }
        
        .box .ewm {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 110px;
            height: 110px;
        }
        
        .box .gb {
            position: absolute;
            top: -4px;
            left: -23px;
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <!-- 创建骨架 -->
    <div class="box">
        <img src="images/二维码.jpg" alt="" class="ewm">
        <img src="images/关闭.png" alt="" class="gb">
    </div>
    <!-- 创建行为 -->
    <script>
        var box = document.querySelector('.box'); //获取元素对象
        var gb = document.querySelector('.gb'); //获取元素对象
        gb.onclick = function() { //注册事件
            box.style.display = 'none'; //处理触发事件
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

循环显示精灵图

通过修改style样式中的背景位置，调整精灵图。

代码实现

<!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>
        /* 创建css样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
            align-content: flex-start;
        }
        
        .box ul li {
            margin: 15px;
            width: 24px;
            height: 24px;
            list-style: none;
            background: url(images/淘宝精灵图.png) no-repeat;
        }
    </style>
</head>

<body>
    <!-- 创建html网页骨架 -->
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 创建js网页行为 -->
    <script>
        var lis = document.querySelectorAll('li'); //获取元素对象
        for (var i = 0; i < lis.length; i++) { //通过循环，改变li标签背景中的精灵图。
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px'; //赋值给背景位置样式属性。
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

表单事件

onfocus 和 onblur

我们可以通过 onfocus 获取焦点属性，注册该事件和进行事件处理。

我们可以通过 onblur 失去焦点属性，注册该事件和进行事件处理。

注意事项：添加focus();代码可以是表单获取焦点。

示例

<!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>
        /* 创建css网页样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        
        input[type='text'] {
            display: block;
            position: fixed;
            left: 50%;
            margin-left: -100px;
            margin-top: 100px;
            width: 200px;
            height: 24px;
            color: #ccc;
            font-size: 14px;
            text-indent: 5px;
            outline: none;
            border: 1px solid skyblue;
        }
    </style>
</head>

<body>
    <!-- 创建html网页骨架 -->
    <div>
        <input type="text">
    </div>
    <!-- 创建js网页行为 -->
    <script>
        var input = document.querySelector('input'); //获取元素对象
        input.value = '手机'; //修改元素对象内容
        input.onfocus = function() { //注册事件：元素对象获取焦点
            input.style.color = '#000'; //处理事件
            if (input.value === '手机') {
                input.value = '';
            }
        }
        input.onblur = function() { //注册事件：元素对象失去焦点
            if (input.value === '') { //处理事件
                input.value = '手机';
                input.style.color = '#ccc';
            }
        }
    </script>
</body>

</html>

结果

ClassName

通过ClassName我们可以快速的修改元素对象多个样式属性。

ClassName给元素对象赋值一个类名，这样他就可以调用css预先准备的样式文件。达到快速修改多条样式目的。

注意事项

ClassName赋值的类名会覆盖之前的类名，如果想保留原先的类名，那么赋值时可以一起赋值给元素对象。

示例

<!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>
        /* 创建css网页样式 */
        
        div {
            margin: 150px auto;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            color: #000;
            font-size: 14px;
            text-align: center;
            line-height: 200px;
        }
        
        .change {
            background-color: #fff;
            color: red;
            font-size: 18px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <!-- 创建html网页骨架 -->
    <div>123</div>
    <script>
        // 创建js网页行为
        var div = document.querySelector('div'); //获取元素对象
        div.onclick = function() { //注册事件
            div.className = 'change'; //处理事件：赋值一个类名给元素对象，这样他就可以调用css中预先写的样式。
        }
    </script>
</body>

</html>

结果

点击div盒子前:

在这里插入图片描述

点击div盒子后：

排除异己

概要：当我们想实现，同时给同类型标签多个元素对象设置css样式时，但是有需要再选择其一时，选择的元素对象样式与其他元素对象样式不同。那么我们可以先统一给所有元素对象的样式，在单独设置选择元素对象的样式。

示例

<!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>
        /* 创建css网页样式 */
        
        button {
            width: 60px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            border: 0;
        }
    </style>
</head>

<body>
    <!-- 创建html网页骨架 -->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 创建js网页行为
        var btns = document.getElementsByTagName('button'); //获取元素对象组
        for (var index = 0; index < btns.length; index++) { //遍历
            var element = btns[index]; //获取元素对象组中的元素
            element.onclick = function() { //注册事件
                for (var i = 0; i < btns.length; i++) { //处理事件，先给所有元素css样式
                    const element2 = btns[i];
                    element2.style.backgroundColor = '#fff';
                    element2.style.border = '1px solid #000';
                    element2.style.outline = 'none';
                }
                this.style.backgroundColor = 'pink'; //再单独设置选择中的元素
            }
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

元素属性

获取元素对象的属性

我们除了通过 对象名.属性 获取元素对象的属性之外，我们还可以通过 getAttribute('属性') 方法获取元素对象的属性。

区别

对象名.属性：获取元素对象的内置属性。

getAttribute('属性')：主要获取自定义属性（标准），我们程序员自定义的属性。

修改元素对象的属性

通过赋值给对象名.属性修改元素对象的属性值，但也是可以通过setAttribute('属性名','元素值')方法修改元素对象的属性值。

区别

对象名.属性：修改元素对象的内置属性。

setAttribute('属性名','元素值')：主要修改自定义属性（标准），我们程序员自定义的属性。

注意事项

setAttribute('属性名','元素值')：在修改元素对象的class属性时，和对象名.className不同。它可以直接这样修改setAttribute('class','元素值')。

删除元素对象的属性

通过removeAttribute('属性名')方法就可以删除元素对象的属性。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo"></div>
    <script>
        //获取元素对象的属性
        var div = document.querySelector('div');
        //1.通过 对象名.属性 获取
        console.log(div.id);
        //2.通过 getAttribute('属性')方法获取属性
        console.log(div.getAttribute('id'));
        //修改元素对象的属性
        //1.通过 对象名.属性 赋值修改
        div.id = 'test';
        //2.通过 setAttribute('属性','元素值')方法修改属性
        div.setAttribute('id', 'test2');
        //删除元素对象的属性
        div.removeAttribute('id');
    </script>
</body>

</html>

自定义属性

为什么使用自定义属性呢？

用于保存和使用数据，因为有些数据不需要保存到数据库中。即建即用。

怎么区分自定义和内置属性呢？

为了解决这样问题，H5规定所有的自定义属性必须由data-开头。

H5新增操作自定义的方法

通过对象名.dataset.属性值获取自定义属性。

或者对象名.dataset.['属性值']获取自定义属性。

注意事项

对象名.dataset.属性值:中的书写属性值不需要加data-。

节点操作

为什么学习节点操作？节点操作是什么？

之前我们获取元素是通过DOM（文档对象模型）文档获取的方式逻辑性差，操作繁琐。通过节点则有较强的逻辑性、操作也较为简易。

概述

网页中所有内容都是节点（标签、属性、文本、注释等）,在DOM中，节点使用node来表示。HTML DOM树中所有节点都可以通过JavaScript进行访问，所有HTML元素（节点）均可被创建、修改、删除等。

节点至少拥有nodeTpye（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点nodeType为1、属性节点nodeType、文本节点nodeType为3（文本包含文字、空格、换行等）。

在实际开发中，我们主要是操作元素节点。

节点层级

常见的有父子兄层级关系。

父级节点

通过节点对象.parentNode获取最近父级节点-亲爹。

子级节点

通过节点对象.childNodes获取子级节点。

子元素节点

通过节点对象.children获取子元素节点。不过他是一个非标准的。但是所有的游览器都支持。

获取第一个子节点

节点对象.firstChild

获取最后一个节点

节点对象.lastChild

获取第一个元素节点

节点对象.firstElementChild,存在兼容性问题。

获取最后一个元素节点

节点对象.lastElementChild,存在兼容性问题。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>第一个li标签</li>
        <li></li>
        <li></li>
        <li>最后一个li标签</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //firstChild 获取第一个子节点
        console.log(ul.firstChild);
        //lastChild 获取最后一个子节点
        console.log(ul.lastChild);

        //firstElementChild 获取第一个元素子节点
        console.log(ul.firstElementChild);
        //lastElementChild 获取最后一个元素子节点
        console.log(ul.lastElementChild);
    </script>
</body>

</html>

结果

在这里插入图片描述

兄弟节点

获取上一个兄弟节点

节点对象.nextSibling，

获取下一个兄弟节点

节点对象.previousSibling

获取下一个兄弟元素节点

节点对象.nextElementSibling,找不到则返回null。

获取上一个兄弟元素节点

节点对象.previousElementSibling

创建节点

我们可以通过document.createElement('元素')创建节点（元素）。原本网页没有，是通过JS代码创建的，所以它是一种动态创建元素。

创建节点的流程

在这里插入图片描述

放置节点

父元素对象.appendChild(元素对象)追加在子元素尾部。
父元素对象.insertBefore(插入节点,指定节点)在指定子节点之前插入节点。

删除节点

我们可以通过父元素节点.removeChild(子元素对象)

创建和删除节点示例

<!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>
        /* 创建css网页样式 */
        
        * {
            padding: 0;
            margin: 0;
        }
        
        a {
            text-decoration: none;
            color: red;
        }
        
        li {
            list-style: none;
        }
        
        textarea {
            margin: 10px 20px;
            width: 400px;
            height: 250px;
            outline: none;
            resize: none;
            font-size: 15px;
        }
        
        button {
            margin-left: 380px;
        }
        
        ul {
            margin: 10px 20px;
            border: 1px solid skyblue;
            width: 600px;
            font-size: 14px;
        }
        
        ul li a {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 创建html网页骨架 -->
    <textarea name="" id="" cols="30" rows="10"></textarea><br>
    <button>发布</button>
    <h3>评论区</h3>
    <ul>

    </ul>
    <!-- 创建js网页行为 -->
    <script>
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var value = text.value; //获取文本域默认值
        var ul = document.querySelector('ul');
        btn.onclick = function() {
            if (text.value !== value) { //判断是否为默认值，不为默认值就进行添加
                var li = document.createElement('li'); //创建节点
                li.innerHTML = text.value + '<a href="javascript:void(0)">删除</a>'; //赋值内容，添加链接方便后续操作
                ul.insertBefore(li, ul.firstChild) //将节点放置在第一个子元素之前。
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode); //删除子节点
                    }
                }
            }
        }
    </script>
</body>

</html>

结果

复制节点

我们可以通过节点对象.cloneNode(布尔值)复制节点，布尔值为空或者false时只复制元素，不复制内容。布尔值为true时即复制元素，也复制内容。

动态创建节点的三种方法

document.write('标签')：直接在网页body主体末端写入标签，但是文档流执行完毕，则它会导致页面全部重绘。
元素对象.innerHTML：通过**+=**拼接字符串来创建标签，创建的标签在元素对象的末端。
document.createElement('元素')：相对于元素对象.innerHTML创建大量标签时，document.createElement('元素')效率更高。当然如果是一次就创建，元素对象.innerHTML就更快，就像是用数组提前装好，再装换为字符床写入。

总结

不管是什么浏览器元素对象.innerHTML单次创建速度最快。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>初始内容</div>
    <script>
        document.write('<div>标签1</div>');
        document.body.innerHTML += '<div>标签2</div>';
        var div = document.createElement('div');
        div.innerHTML = '标签3';
        document.body.appendChild(div);
    </script>
</body>

</html>

结果

事件

概述：当我们点击网页中的按钮，触发按钮的功能。这个过程就是事件。触发反应机制。

注册事件

给元素添加事件，就是注册事件或者绑定事件。

注册事件有两种方法：传统方式和方法监听注册方式。

传统方式

利用on开头的事件，如：onclick。

特点：注册事件的唯一性。同一个元素同事件只能设置一个处理函数，最后面的处理函数会覆盖之前的。

方法监听注册方式

可以给同一个元素对象添加多个监听器。同事件类型，按顺序执行。

元素对象.addEventListener(事件类型,事件处理函数,布尔值);

事件类型：click这类事件的触发类型，注意这个字符串。

事件处理函数：与传统方式的赋值型处理事件函数一样。

布尔值：是否为DOM事件流的捕获阶段，默认false。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="on">传统事件</button>
    <button class="methed">方法注册事件</button>
    <script>
        //传统事件
        var btn = document.querySelector('.on');
        btn.onclick = function() {
                alert('123');
            }
            //方法注册事件
        var btn2 = document.querySelector('.methed');
        btn2.addEventListener('click', function() {
            alert('456');
        }, false);
    </script>
</body>

</html>

结果

在这里插入图片描述

attachShadow

i9专属 attachShadow（事件类型,处理函数）方法添加事件，不建议使用。

删除事件

删除元素的事件，就是删除事件，也称解绑事件。

删除事件分为两种：传统方式和

传统方式

元素对象.onclick = null;

方法监听删除方式

元素对象.removeEventListener(事件类型,事件处理函数的对象);

注意事件类型是字符串。

detachEventListener

元素对象.detachEventListener(事件类型,事件处理函数对象);

DOM事件流

事件流描述的是页面中接收事件的顺序。

事件发生时会在元素节点之间按照指定顺序传播，这个传播的过程即DOM事件流。

在这里插入图片描述

捕获阶段：从最顶层往下，逐级传播到具体元接收的过程。

冒泡阶段：IE最早提出，事件开始由最开始的元素接收，然后逐级向上传播到DOM最顶层的过程。

注意事项：

JS代码中只执行捕获或者冒泡其中一个阶段。
onclick和attachShadow()（ie）只能是冒泡阶段。
如果addEventListener()布尔值参数为false，那么就处于冒泡阶段。

事件对象

事件对象就是跟事件的相关一系列信息集合，它有很多的属性和方法。如鼠标点击事件的x，y轴坐标，触发的事件类型等。

元素对象.事件类型 = function(事件对象) {
    
}
元素对象.addEventListener(事件类型, function(事件对象) {
    
});

注意事项：ie 678版本不支持，它们使用的是window.event。

事件对象的常用属性和方法

属性名	说明
事件对象.type	事件触发类型，不带on
事件对象.target	事件触发对象。它this不同，this是绑定事件对象。
window.event.srcElement	ie 678版本事件触发对象（兼容性问题）
事件对象.preventDefault（）	阻止默认行为（有兼容性问题）
事件对象.returnValue	阻止默认行为（低版本）
return false	阻止默认行为（无兼容性问题），缺点return后面代码不执行。而且只支持传统注册方式。

了解：currentTarget与this相似，都是指绑定事件的对象。

阻止事件冒泡的两种方式

属性名	说明
事件对象.stopPropagation()	阻止事件冒泡阶段
事件对象.cancelBubble = true	ie 678版本阻止事件冒泡阶段

事件委托

事件委托也称为事件代理，在JQuery里面称为事件委派。

事件委托的原理

事件委托的原理是不是在每个元素上绑定事件，而是通过监听器设置在父节点上。然后利用冒泡原理的影响设置在每个点上。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>支付支付，穷叮当~</li>
        <li>支付支付，穷叮当~</li>
        <li>支付支付，穷叮当~</li>
        <li>支付支付，穷叮当~</li>
    </ul>
    <script>
        var ul = document.querySelector('ul'); //获取父节点
        ul.addEventListener('click', function(e) { //父节点添加点击事件
            e.target.style.backgroundColor = 'pink';
            alert('穷叮当~');
        });
    </script>
</body>

</html>

结果

键盘事件

属性名	说明
keyup	键盘任意键位，松开时触发
keydown	键盘任意键位，按下时触发
keypress	键盘任意键位，按下时触发（除了功能键）

注意：

如果是使用传统方式注册事件，需要在前方添加on。
如果keydown和keypress都被绑定，触发时keydown优先。
keyup和keydown，不区分字母大小写。
keypress区分字母大小写。

常用键盘事件对象属性和方法

属性名	说明
keycode	触发键盘事件的键位-ASCII值
key	触发键盘事件的键位值（存在兼容性问题）

BOM

BOM浏览器对象模型，它是提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM由一系列相关的对象构成，并且每一个对象都提供了很多方法。

BOM是缺乏标准的。JavaScript是由ECMA指定标准的，DOM是由W3C制定标准的。BOM最早是由Netscape浏览器标准的一部分。

浏览器对象模型
把浏览器看做一个对象
BOM的顶级对象是window

BOM结构

BOM比DOM大，BOM包含DOM。

window对象是游览器的顶级对象，它具有双重身份。

它是JS访问游览器窗口的接口。
它是一个全局对象。定义在全局作用域的变量、函数都会成为window对象的属性和方法。

注意：在调用时我们可以省略window。

window中一个特殊属性window.name。

window对象的常用事件

窗口加载事件

window.onload是窗口（页面）加载事件，当文档全部加载完时触发该事件（包括图像、脚本文件、CSS文件等）。

**window.addEventListener(‘load’,事件处理函数);**也可以注册事件。

DOMContentLoaded是当DOM加载完毕，时触发。不包括样式表、图片、falsh等。i9以上支持。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load', function() { //页面所有内容加载完时触发
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('按钮被点击了');
            });
        });
        window.addEventListener('DOMContentLoaded', function() { //DOM内容已经加载完，触发
            alert('123');
        });
    </script>
</head>

<body>
    <button>按钮</button>
</body>

</html>

结果

在这里插入图片描述

调整窗口大小事件

window.onresize 或 **window.addEventListener(‘resize’,事件处理函数);**是调整窗口大小加载事件，当触发时就调用的处理函数。

示例

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('DOMContentLoaded', function() { //当DOM加载完毕后触发
            window.addEventListener('resize', function() { //当调整窗口时触发
                var div = document.querySelector('div');
                console.log('调整窗口大小事件触发。');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            });
        });
    </script>
    <div></div>
</body>

</html>

结果

调整窗口大小，窗口宽度小于800像素时，隐藏div盒子。

重新加载页面事件

window.onpageshow或者

window.addEventListener('pageshow',事件处理函数（e）{
if (e.persisted){//persisted判断是否为缓存中取出来的。
    
}
});

页面重新加载时触发。由于火狐存在“往返缓存”的问题，不会触发load事件。此时使用pageshow事件触发。这是事件是给window对象的。

定时器

var 变量名(定时器标识符) = setTimeout(事件处理函数,倒计时（毫秒）);//原理如定时炸弹一样，到了时间就炸。

注意：

倒计时可以省略，省略默认为0秒。
事件处理函数还可以写成，‘函数名()’。不提倡。
当页面出现多个定时器时，可以赋值给变量用于区分。
定时器的事件处理函数，也称回调函数callback。倒计时到再回去调用函数。

终止定时器

window.clearTimeout(定时器对象);//清除指定定时器。

间隔定时器

setInterval(事件处理函数,倒计时（毫秒）);//倒计时到一次就调用一次处理函数。反反复复。

注意：

倒计时可以省略，省略默认为0秒。
事件处理函数也可以写成，‘函数名()’。不提倡。

示例

<!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>
        div {
            margin: 100px 100px;
        }
        
        div span {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgb(241, 128, 52);
            color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">88</span>
        <span class="minute">88</span>
        <span class="second">88</span>
    </div>
    <script>
        var hour = document.querySelector('.hour'); //获取小时
        var minute = document.querySelector('.minute'); //获取分钟
        var second = document.querySelector('.second'); //获取秒钟
        var inputSeconds = +new Date('2020-10-29 20:30:00'); //传参目的时间
        conutDown();//初始化倒计时的值
        setInterval(conutDown, 1000); //间隔倒计时

        function conutDown() {
            //第一步：获取当前时间 和 用户输入的时间 之间的差（秒）
            var seconds = +new Date();
            var time = (inputSeconds - seconds) / 1000; //计算当前时间距离用户输入时间的好秒差
            //第二步：转换时间
            var h = parseInt(time / 60 / 60 % 24); //计算小时
            var m = parseInt(time / 60 % 60); //计算分数
            var s = parseInt(time % 60); //计算秒数
            hour.innerHTML = h;
            minute.innerHTML = m;
            second.innerHTML = s;
        }
    </script>
</body>

</html>

结果

在这里插入图片描述

终止间隔定时器

clearInterval(间隔定时器对象);//清除指定的间隔定时器。

this

在全局作用域内指向谁？普通函数中又指向谁？定时器中指向的是谁？

答：以上都是指向window。其实这些调用的对象就是window，只是隐藏了。

方法调用是指向谁？

答：指向调用者。

构造函数指向谁呢？

答：构造函数指向实例化对象。

所以this指向的对象就是调用者。

JavaScript单线程

JavaScript编程语言是单线程的，简单的说就是在同一时间段，只能做一件事情。换而言之事要一件一件做。

但是当出现上一个任务执行时间太长，那么它的下一个任务就需要等待。使页面不连贯。

异步同步

为了解决上述的问题，利用多核CPU的计算性能。HTML5提出Web Worker标准，允许JavaScript脚本创建了多个线程。于是，JS就有了同步和异步。

同步：简单来说就是一个任务接着一个任务来做。一心一意

异步：简单来说在做一任务时还可以做其他任务。一心多意

同步任务

为了解决异步和同步发生冲突，所以把所有任务分成两大类：同步任务和异步任务。

同步任务都在主线程上执行，形成一个执行栈。

异步任务

JS的异步任务是通过回调函数实现的。

普通事件
资源加载
定时器

异步任务相关回调函数添加到任务队列中（也称消息队列）。

JS执行机制

回调函数调用时才会进入任务队列,事件也是只有触发时在进入任务队列。

事件循环

由于主线程不断的获取任务、执行任务、再获取任务、再执行，所以这种机制称为事件循环（loop event）。

location对象

window对象给我们提供了一个location属性用于获取或者设置窗体的URL。并可以使用于解析URL。因为这个返回属性就是一个对象，所以我们称它为location对象。

URL:统一资源定位符是互联网上标准的资源的地址。互联网上的每一个文件都有唯一的URL。它包含信息指出了文件的位置以及游览器应该如何处理它。

通信协议://主机[:端口]/路径/[?参数]#片段

组成	说明
通信协议	通信的使用的协议
主机	主机（域名）
端口	端口号[可选]，省略是使用默认端口。如HTML的默认端口为80
路径	文件的路径，一般由`/`分隔
参数	参数键值对的形式，通过`&`分隔
片段	常用的链接锚点

常用属性

属性	说明
location.href	获取整个URL字符串
location.host	获取主机（域名）
location.port	获取端口
location.pathname	获取路径
location.search	获取参数
location.hash	获取片段

常用方法

方法名	说明
assign(URL地址)	转到指定URL地址，具有记录可返回。
replace(URL地址)	转到指定URL地址，不具有记录不可返回。
reload()	刷新页面。如果传参true，则为强制刷新。

navigator对象

navigator对象包含有关游览器的信息，它有很多属性。我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部值。

history对象

window对象提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户访问过的URL。

方法	说明
back()	后退
forward()	前进
go()	参数正数为前进，参数负数为后退

offset系列属性

offset偏离量，我们可以使用offset系列相关的属性动态的获取该元素的位置（偏移），大小等。

常常使用在获取元素的位置。

offset系列	说明
offsetParent	返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回body
offsetTop	返回元素相对带有定位父级元素上方的偏移
offsetLeft	返回元素相对带有定位父级元素左方的偏移
offsetWidth	返回自身包括padding、边框、内容区的宽度，返回值不带单位 [padding + border + content]
offsetHeight	返回自身包括padding、边框、内容区的高度，返回值不带单位 [padding + border + content]

offset和style区别

offset可以获取任意样式表中的样式，而style只能获取行内样式表中的样式值。
offset获取的宽高没有单位，style获取的宽高带有单位。
offset获取的宽高包含padding和border，style不包括。
offset只能获取，不能修改。style可以读写。

client系列属性

client客户端，我们可以使用client系列相关的属性获取元素可视区的相关内容。通过client系列的相关属性可以动态的获得该元素的边框大小、元素大小等。

client系列	说明
clientWidth	返回该元素的宽度，返回值不带单位 [padding + content]
clientHeight	返回该元素的高度，返回值不带单位 [padding + content]
clientTop	返回该元素的上边框，不带单位
clientLeft	返回该元素的左边框，不带单位

常常用于获取元素的宽高。

立即执行函数

一般的函数都是需要调用才会执行，但是立即执行函数不用调用，马上执行。

立即函数的好处就是，它创建了一个独立的作用域，其中的所有变量都是局部变量。

语法：

(function(参数列表) {
    函数体;
})(传参列表)[;]//如果出现多个立即执行函数，需要分号隔开。
或者
(function(参数列表) {
    函数体;
}(传参列表));

物理像素比

window.devicePixelRatio物理像素比。

scroll系列属性

scroll和浏览器的滚动条有关。

scroll系列	说明
scrollTop	返回被“卷”上去的上方距离，返回值不带单位[元素使用]
scrollLeft	返回被“卷”上去的左方距离，返回值不带单位
scrollWidth	返回自身实际（内容）的宽度，不含边框，返回值不带单位。内容溢出部分计算[padding + content]
scrollHeight	返回自身实际（内容）的高度，不含边框，返回值不带单位。内容溢出部分计算[padding + content]
window.pageYOffset	获取页面被“卷”上去部分的偏移量。[document使用]
window.pageXOffset	获取页面被“左滚”部分的偏移量。[document使用]

元素对象.addEventListener('scroll',处理函数);//当滚动条发生变化时，触发。

动画函数封装

动画核心原理：通过定时器setInterval()不断移动盒子。

手动触发事件

元素.事件();//如：button.click();手动触发按钮点击事件

窗口滚动

window.scroll(x,y);//调节窗口的滚动位置，如：window.scroll(0,0);返回顶部

黑人的乔丹鞋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-API-笔记

API文档简介概念：API是程序员提供的一种工具，一些预先定义的函数，以便能方便的实现想要完成的程序及功能。Web API 文档Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。DOM简介文档对象模型(Document Object Model 简称DOM)，是3WC组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口名词解析文档：一个页面就是一个文档，DOM中使用document表示。元素：页面中的所有标签都是元素，DOM中使用element
复制链接

扫一扫

专栏目录