JavaScript 入门基础&案例_webapi文档-CSDN博客

本文链接：https://blog.csdn.net/shhghvvh/article/details/127790969

这篇博客介绍了JavaScript的基础知识，包括API与WebApis的概念，DOM的定义、DOM树及获取元素的方法，如通过ID和标签获取。还详细讲解了事件基础，如事件三要素和常见鼠标事件。此外，讨论了DOM中的元素操作、节点操作，以及BOM的窗口对象事件，如页面加载和窗口大小调整。最后，阐述了定时器的使用，如setTimeout和setInterval。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.4.1定时器之setTimeout（）

3.4.2停止定时器之setTimeout（）

3.4.3定时器之setlnterval （）

3.4.4停止定时器之setlnterval（）

1.APl与WebApis

1.1APl

APl ( Application Programming Interface）,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

简单理解︰API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
比如手机充电的接口︰
要实现充电这个功能︰我们不关心手机内部变压器；内部怎么存储电等；我们不关心这个充电线怎么制作的；我们只需要知道，我们拿着充电线插进充电接口就可以充电这个充电接口就是一个API

1.2WebApis

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

Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

Web API一般都有输入和输出（函数的传参和返回值)，WebAPI很多都是方法（函数)

比如我们想要浏览器弹出一个警示框，直接使用alert(‘弹出’) 。

2.DOM

2.1什么是DOM

文档对象模型( Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言（HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

2.2DOM树

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

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

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

DOM把以上内容都看做是对象

2.3获取元素

2.3.1根据ID获取

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

<body>
  <div id="time">2022-11-11</div>
   <script>
    // 1．因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
    // 2. get 获得element元素by 通过驼峰命名法
    // 3．参数id是大小写敏感的字符串
    // 4.返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer); 
    // 5. console.dir打印我们返回的元素对象更好的查看里面的属性和方法
    console.dir(timer);
    </script>
</body>

2.3.2根据标签获取

使用getElementsByTagName)方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName ('标签名');
注意∶
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的

<body>
  <ul>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
  </ul>
   <script>
    //1.getElementsByTagName()返回的是获取过来元素对象的集合以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    //2.依次打印
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i]);
    }
    //3．如果页面中只有一个li返回的还是伪数组的形式
    //4．如果页面中没有li 返回的是一个空的伪数组


    </script>
</body>

还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName ( '标签名') ;
注意∶父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

  <ul>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
    <li>君不见黄河之水天上来</li>
  </ul>
  <ol>
    <li>奔流到海不复回</li>
    <li>奔流到海不复回</li>
    <li>奔流到海不复回</li>
    <li>奔流到海不复回</li>
    <li>奔流到海不复回</li>
  </ol>
  <ol>
    <li>不复回</li>
    <li>不复回</li>
    <li>不复回</li>
    <li>不复回</li>
    <li>不复回</li>
  </ol>
   <script>
    //getElementsByTagName(标签名)
    var ol = document.getElementsByTagName('ol');
    console.log(ol[0].getElementsByTagName('li'));
    console.log(ol[1].getElementsByTagName('li'));
    </script>

2.3.3根据H5新增方法获取

<body>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>
  <script>
    //1.document.getElementsByClassName()  根据类名返回元素对象集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
    //2. document.querySelector()根据指定选择器返回第一个元素对象
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);
    var li = document.querySelector('li');//首页
    console.log(li);
    //3.document.querySelectorAll();返回指定选择器的所有元素对象集合
    var all = document.querySelectorAll('.box');
    console.log(all);
    var lis = document.querySelectorAll('li');
    console.log(lis);
  </script>
</body>

2.3.4获取特殊元素

<script>
    //1.获取body元素 document.body
    var Body = document.body;
    console.log(Body);
    console.dir(Body);
    //2.获取html元素  document.documentElement
    var Html = document.documentElement;
    console.log(Html);
    console.dir(Html);
  </script>

2.4事件基础

2.4.1事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解︰触发---响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

2.4.2事件三要素

事件是有三部分组成事件源事件类型事件处理程序

(1）事件源事件被触发的对象谁，按钮

(2) 事件类型如何触发，什么事件比如鼠标点击(onclick) 鼠标经过键盘按下

(3）事件处理程序通过一个函数赋值的方式完成

2.4.3执行事件的步骤

1.获取事件源

2 注册事件（绑定事件)

3.添加事件处理程序(采取函数赋值形式)

<body>
  <button id="btn">喜羊羊</button>
  <script>
  //点击一个按钮，弹出对话框
  //事件三要素
  // 1．事件是有三部分组成  事件源  事件类型  事件处理程序 
  //(1）事件源事件被触发的对象谁按钮
  var btn = document.getElementById('btn');
  //(2)事件类型如何触发什么事件比如鼠标点击(onclick)  鼠标经过  键盘按下
  //(3）事件处理程序通过一个函数赋值的方式完成
 btn.onclick = function(){
  alert('灰太狼');
 }
  </script>
</body>

2.4.4常见鼠标事件

2.5操作元素

2.5.1改变元素内容

1.element.innerText

从起始位置到终止位置的内容,但它不识别html标签（非标准），同时空格和换行也会去掉

2.element.innerHTML

起始位置到终止位置的全部内容，包括html标签（W3C标准），同时保留空格和换行

二者皆是可读写的

<body>
  <button>显示当前系统时间</button>
  <div>显示时间</div>
  <span></span>
  <script>
    //当我们点击按钮 div里面的文字会发生变化
    //1.获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //2.注册事件
    btn.onclick = function () {
      div.innerText = getDate();
    }
    function getDate() {
      var date=new Date();
      var year=date.getFullYear();
      var month=date.getMonth();
      var dates=date.getDate();
      var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
      var day=date.getDay();
      return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
    }

 //不添加注册事件
    var p = document.querySelector('p');
    p.innerText = getDate();


//可识别HTML标签
    var span = document.querySelector('span');
    span.innerHTML = '<strong>我要加粗</strong> 2022'
  </script>
</body>

2.5.2修改元素属性

<body>
  <button id="xh">小黑</button>
  <button id="xb">小白</button>
  <img src="https://www.2008php.com/2015_Website_appreciate/2015-10-22/20151022000609YvpJRYvpJR.jpg" alt="">
  <script>
    //修改元素属性
    //1.获取元素
    var xh = document.getElementById('xh');
    var xb = document.getElementById('xb');
    var img = document.querySelector('img');
    //2.注册事件  处理程序
    xb.onclick = function(){
      img.src = 'https://ts1.cn.mm.bing.net/th/id/R-C.aed85ce23420f63238a2c20a9ff639fc?rik=6zupIfYUQ%2fswrg&riu=http%3a%2f%2fwww.netbian.com%2fd%2ffile%2f20120226%2f630aa6d748d1a0c40dd825df9868fdf0.jpg&ehk=RoJ6MeELeVE%2b62NN52psmVY7XuXClRmuZ2XqVBLfGRw%3d&risl=&pid=ImgRaw&r=0'
      img.title="我是小白";
    }
    xh.onclick = function(){
      img.src = 'https://www.2008php.com/2015_Website_appreciate/2015-10-22/20151022000609YvpJRYvpJR.jpg'
      img.title="我是小黑";
    }
  </script>
</body>

案例不同时间段显示不同内容


<body>
   <img src="https://tu.cnnuu.com/allimg/190803/1-1ZP30H920-50.jpg" alt="">
    <div>上午好</div>
    <script>
        //根据系统不同时间来判断，所以需要用到日期内置对象
        //利用多分支语句来设置不同的图片
        // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        // 需要一个div元素，显示不同问候语，修改元素内容即可
        //1.获取元素
        var img=document.querySelector('img');
        var div=document.querySelector('div');
        //2.的到当前的小时数
        var date=new Date();
        var h=date.getHours();
        //3.判断小时数，改变图片和文字信息
        if (h<12) {
            img.src = 'https://ts3.cn.mm.bing.net/th?id=OIP-C.403F6_oEU8v4JBrBjDgQsgHaE7&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2';
            div.innerHTML = '上午好';
        }else if(h<18){
            img.src = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.VblTHj3zuTS1LLhLElDHAwHaE7?w=284&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7';
            div.innerHTML = '下午好';
        }else{
            img.src = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.mRN--wrWCGkvhN8hI67LzgHaEo?w=293&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7';
            div.innerHTML = '晚上好';
        }
    </script>
</body>
</html>

2.5.3表单元素的属性操作

利用DOM可以操作如下表单元素的属性︰type、 value、checked、 selected、disabledanli

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件 处理程序
        btn.onclick = function () {
            //表单里面的值，文字内容是通过value来修改的
            input.value='被点击了';
            //如果逍遥某个表单被禁用 不能点击  比如按钮被禁用
          //btn.disabled = 'ture';
            //this指的是事件函数的调用者
            this.disabled = 'ture';
        }
    </script>
</body>

2.5.4样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式.

1. element.style行内样式操作

<body>
    <div></div>
    <script>
        var flag = 0;
//获取元素
        var div = document.querySelector('div');
//注册事件
        div.onclick = function(){
            if (flag==0) {
//采用驼峰命名法
                 this.style.backgroundColor = 'purple';
                 div.style.width = "300px";
                 this.style.height = "300px";
                 flag=1;
            }else{
                 this.style.backgroundColor = 'red';
                 this.style.width = "200px";
                 this.style.height = "200px";
                 flag=0;
            }
           
        }
    </script>
</body>

2. element.className类名样式操作

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 300px auto;
        }
        .change{
            width: 300px;
            height: 300px;
            background-color:purple;
            margin: 300px auto;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function () {
            this.className='change';
        }
    </script>
</body>

案例1：密码框验证信息

 <style>
        div{
           width: 600px;
           margin: 100px auto;
        }
        .message{
            display: inline-block;
            font-size: 12px;
            color: #999;  
        }
        .error{
            color: rgb(255, 0, 0);  
        }
        .right{
            color: rgb(0, 156, 0);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位数密码</p>
    </div>
    <script>
        //1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2.注册事件
        ipt.onblur = function () {
            //3.判断密码长度
            if (this.value.length<6||this.value.length>16) {
                message.className='message error';
                message.innerHTML="你输入的位数不正确 要求6~16位"
            }else{
                message.className='message right'
                message.innerHTML='你输入的正确';
            }
        }
    </script>
</body>

案例2：开关灯效果

<body>
    <button class="but">开关灯</button>
    <script>
        var btn = document.querySelector('.but');
        var bg = document.querySelector('body')
        var flag = 0;
        btn.onclick=function(){
            if (flag==0) {
                bg.style.backgroundColor='black';
                flag=1;
            }else{
                bg.style.backgroundColor='white';
                flag=0;
            }
            
        }
    </script>
</body>

案例3：用户名显示隐藏内容

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            font-size: 12px;
            color: #999; 
            outline: none;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <input type="text" value="邮箱/ID/手机号" class="bor">
    <script>
        var username = document.querySelector('input');
        username.onfocus = function () {
            this.value = '';
            this.style.border = '1px solid pink';

        }
        username.onblur = function () {
            this.value = '邮箱/ID/手机号';
            this.style.border = '1px solid #999';
        }
    </script>
</body>

案例4：关闭广告

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box{
        position: relative;
        width: 74px;
        height: 88px;
        border: 1px solid #ccc;
        margin: 100px auto;
        font-size: 12px;
        text-align: center;
        color: #f40;
        /* display: block; */
      }  
      .box img{
            width: 60px;
            margin-top: 5px;
        }
      .close_btn{
        position: absolute;
        top: -1px;
        left: -16px;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        line-height: 14px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        cursor: pointer;
      }
    </style>
</head>

<body>
    <div class="box">
        京东二维码
        <img src="https://img12.360buyimg.com/img/jfs/t1/67481/15/565/28110/5cec9234E71c47244/dc4cf353fd96922e.png.webp" alt="">
        <i class="close_btn">X</i>
    </div>
    <script>
        var btn = document.querySelector('.close_btn');
        var box = document.querySelector('.box');
        btn.onclick=function(){
            box.style.display = 'none'
        }
    </script>
</body>

</html>

2.5.5自定义属性值的操作

1.获取属性值

（1）.element.属性获取内置属性值。（即本身自带的属性）

（2）.element.getAttribute ('属性'); （主要获得自定义的属性）

<body>
    <div id="demo" index="5"></div>
    <script>
        var div=document.querySelector('div');
        console.log(div.id);

        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>
</body>

2.设置属性值

（1）element.属性=‘值’设置内置属性值。

（2）element.setAttribute('属性’，'值') ;

<body>
    <div id="demo" index="5"></div>
    <script>
        var div=document.querySelector('div');
        div.id = 'test';
        console.log(div.id);

        div.setAttribute('index',2);
        console.log(div.getAttribute('index'));
    </script>
</body>

3.移除属性

removeAttribute('属性')

<body>
    <div id="demo" index="5"></div>
    <script>
        var div=document.querySelector('div');
        div.id = 'test';
        console.log(div.id);

        div.removeAttribute('index');
    </script>
</body>

2.6节点操作

2.6.1为什么需要节点操作

通常获取元素有两种方式

1.利用DOM提供的方法获取元素

document.getElementByld

document.getElementsByTagName

document.querySelector等

逻辑性不强、繁琐

2.利用节点层级关系获取元素
利用父子兄节点关系获取元素逻辑性强，但是兼容性稍差

2.6.2节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点)均可被修改，也可以创建或删除。一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。

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

1.父级节点：node.parentNode

2.子节点： parentNode.chilcNodes(标准) parentNode.children(非标准)

<body>
    <div class="grandpa">
        <div class="father">
            <div class="son"></div>
            <div class="daughter"></div>
        </div>
    </div>
    <script>
        var son = document.querySelector('.son');
        //1.父级节点：node.parentNode  得到的是最近的父级  如果找不到返回null
        console.log(son.parentNode);//<div class="father">...</div>

        //2.子级节点parentNode.childNodes(标准)
        var father = document.querySelector('.father');
        //NodeList(5) [text, div.son, text, div.daughter, text]  包含元素节点文本节点等等
        console.log(father.childNodes);

        //子级节点parentNode.children(非标准)
        console.log(father.children);//HTMLCollection(2) [div.son, div.daughter]只包含元素节点

        //3.parentNode.firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
        console.log(father.parentNode.firstChild);//#text
        //parentNode.lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
        console.log(father.parentNode.lastChild);//#text

        //4.parentNode.firstElementChild返回第一个子元素节点
        console.log(father.firstElementChild);//<div class="son"></div>
        //parentNode.lastElementChild返回最后一个子元素节点
        console.log(father.lastElementChild);// <div class="daughter"></div>
        //另一种写法
        console.log(father.children[0]);//第一个子元素
        console.log(father.children[father.children.length-1]);//最后一个
    </script>
</body>

案例：下拉菜单

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px 650px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">菜单</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">博客</a>
            <ul>
                <li>
                    <a href="">博客评论</a>
                </li>
                <li>
                    <a href="">未读提醒</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">邮箱</a>
            <ul>
                <li>
                    <a href="">免费邮箱</a>
                </li>
                <li>
                    <a href="">VIP邮箱</a>
                </li>
                <li>
                    <a href="">企业邮箱</a>
                </li>
                <li>
                    <a href="">邮箱客户端</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">网站导航</a>
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">专栏</a>
                </li>
                <li>
                    <a href="">图片</a>
                </li>
                <li>
                    <a href="">新闻</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var nav = document.querySelector('.nav');
        var lis = nav.children;
        for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            this.children[1].style.display = 'block';
        }
        lis[i].onmouseout = function () {
            this.children[1].style.display = 'none';
        }
    }
    </script>
</body>

</html>

3.兄弟节点：

node .nextSibling 下一个兄弟节点包含元素节点或者文本节点等等

node.previousSibling 返回当前元素上一个兄弟节点

node.nextElementsibling 返回当前元素下一个兄弟元素节点，找不到则返回null。

node.previousElementSibling返回当前元素上一个兄弟元素节点，找不到则返回null

<body>
    <div class="grandpa">
        <div class="father">
            <div class="son"></div>
            <div class="daughter"></div>
        </div>
    </div>
    <script>
        var son = document.querySelector('.son');
        //1.node.nextSibling  返回当前元素下一个兄弟节点
        console.log(son.nextSibling);//#text
        //node.previousSibling  返回当前元素上一个兄弟节点
        console.log(son.previousSibling);//#text

        //2.node.nextElementsibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
        console.log(son.nextElementSibling);//<div class="daughter"></div>
        //node.previousElementSibling返回当前元素上一个兄弟元素节点，找不到则返回null
        var daughter = document.querySelector('.daughter');
        console.log(daughter.previousElementSibling);//<div class="son"></div>

    </script>
</body>

2.6.3创建节点

document.createElement ( 'tagName ' )

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

2.6.4添加节点

node .appendChild (child) node是父级 child是子级

该方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after 伪元素。

node.insertBefore (child，指定元素)

该方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

在页面在添加元素分两步，先创建在添加

<body>
    <ul>
        <li>666</li>
    </ul>
    <script>
        //1.创建元素节点
        var li = document.createElement('li');
        //2.添加元素节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        //3.指定位置添加元素节点
        var lili = document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);
    </script>
</body>

案例：简易版发布留言

思路分析：利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。

代码实现

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px pink solid;
            /* 不设置轮廓 */
            outline: none;
            /* 设置其不能改变长宽 */
            resize: none;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: #eee;
            font-size: 15px;
            margin: 15px 0;
        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        //1.获取元素
        var txt = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //2.给button绑定事件
        btn.onclick = function () {
            //判断文本域是否为空
            if (txt.value == '') {
                alert('请输入内容');
                return false;
            } else {
                //创建元素li作为留言区
                var li = document.createElement('li');
                //先有li才能赋值  文本域的值赋值给li
                li.innerHTML = txt.value;
                //添加元素
                ul.insertBefore(li,ul.children[0]);
            }
        }
    </script>
</body>

</html>

2.6.4删除节点

node. removeChild (child)

node.removeChild(）方法从DOM中删除一个子节点，返回删除的节点。

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>光头强</li>
        <li>熊二</li>
    </ul>
    <script>
        //1.创建元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //2.删除元素
       /*  ul.removeChild(ul.children[1]); */
        //3.点击按钮依次删除
       btn.onclick = function(){
        //如果ul里面没有内容·则禁用该按钮
        if (ul.children.length==0) {
            this.disabled=true;
        }
        ul.removeChild(ul.children[0]); 
       }
    </script>
</body>

案例：简易版删除留言

<body>
    <textarea></textarea>
    <button id="btn1">发布</button>
    <ul></ul>
    <script>
        //1.获取元素
        var txt = document.querySelector('textarea');
        var btn1 = document.getElementById('btn1');
        var ul = document.querySelector('ul');
        //2.给button绑定事件
        btn1.onclick = function () {
            //判断文本域是否为空
            if (txt.value == '') {
                alert('请输入内容');
                return false;
            } else {
                //创建元素li作为留言区
                var li = document.createElement('li');
                //先有li才能赋值  文本域的值赋值给li
                li.innerHTML = txt.value+"<a href='javascript:;'>删除</a>";
                //添加之后文本框的内容清空
                txt.value = "";
                //添加元素
                ul.insertBefore(li, ul.children[0]);
                //删除元素
                var as = document.querySelectorAll('a');
                for (let i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>



</body>

2.6.5复制节点（克隆节点）

node.cloneNode（）

该方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

如果括号参数为ture，则是深拷贝，即既克隆复制节点本身，也克隆里面的子节点。

<body>
    <ul>
        <li>熊大</li>
        <li>光头强</li>
        <li>熊二</li>
    </ul>
    <script>
        //1.创建元素
        var ul = document.querySelector('ul');
        //2.克隆元素
        var lili = ul.children[0].cloneNode(true);
        //3.添加节点
        ul.appendChild(lili);
    </script>
</body>

3.BOM

3.1什么是BOM

BOM( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

3.2BOM的构成

BOM比 DOM更大，它包含DOM。

window对象是浏览器的顶级对象，它具有双重角色。

1．它是JS访问浏览器窗口的一个接口。

2．它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

注意:window下的一个特殊属性window.name

3.3window对象的常见事件

3.3.1页面加载事件

1.window.onload = function(){}

或者

window.addEventListener('load', function () {}

window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS支件等),就调用的处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //方式1
        window.onload = function(){
            var btn = document.querySelector('button');
        btn.addEventListener('click',function (){
            alert('被点击了');
        })
        }  
        //方式2
        window.addEventListener('load', function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('被点击了');
            })
        })          
    </script>
</head>
<body>
    
    <button>按钮</button>
    
</body>
</html>

注意∶
有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕再去执行处理函数。

window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

如果使用window.addEventListener则没有限制。

2. document.addEventListener('DOMContentLoaded' ,function() {})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。le9以上才支持
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

3.3.2调整窗口大小事件

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意∶
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

window.onresize = function(){}

window.addEventListener('resize',function(){})

代码演示

<script>
        window.onresize = function () {
            window.addEventListener('resize', function () {
                console.log('窗口大小发生变化');
            })
        }
        window.addEventListener('resize', function () {
            console.log('窗口大小发生变化');
        })
        
    </script>

运行结果

3.4定时器

window对象给我们提供了2个非常好用的方法-定时器。

3.4.1定时器之setTimeout（）

window.setTimeout(调用函数，[延迟的毫秒数]);

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意︰
1.window可以省略。
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串
数名0'三种形式。第三种不推荐
3.延迟的毫秒数省略默认是0，如果写，必须是毫秒。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

<script>
        function callback(){
            console.log("时间到了");
        };
        var time1 = setTimeout(callback,3000);
        var time2 = setTimeout(callback,5000);
    </script>

案例：实现3s后关闭一个广告

代码实现

<body>
    <img src="https://img.zcool.cn/community/01c5bb5d8c1fd5a801211d53430da5.jpg@1280w_1l_2o_100sh.jpg" alt="">
    <script>
        var img = document.querySelector('img');
        setTimeout(function(){
            img.style.display = 'none';
        },3000)
    </script>
</body>

3.4.2停止定时器之setTimeout（）

window.clearTimeout (timeout ID)

<body>
    <button>点击停止</button>
    <script>
        var btn = document.querySelector('button');
        var stop = setTimeout(function(){
            console.log('时间到了');
        },3000)
        btn.addEventListener('click',function(){
            window.clearTimeout(stop);
        })
    </script>
</body>

3.4.3定时器之setlnterval（）

window.set Interval(回调函数，[间隔的毫秒数]);

setInterval)方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

代码：

<script>
        setInterval(function(){
                console.log('过了1秒'); 
        },1000)
    </script>

运行结果

案例：倒计时效果

效果图：

思路分析：

这个倒计时是不断变化的，因此需要定时器来自动变化( setInterval )

三个黑色盒子里面分别存放时分秒

三个黑色盒子利用innerHTML放入计算的小时分钟秒数

第一次执行也是间隔毫秒数，因此刚刷新页面会有空白

最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问

代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 400px;
            height: 650px;
        }
    </style>
</head>
<style>
    div {
        margin: 100px 100px;
    }

    span {
        display: block;
        float: left;
        margin-left: 4px;
        width: 60px;
        height: 60px;
        background-color: rgb(47, 52, 48);
        text-align: center;
        font-size: 25px;
        color: white;
        line-height: 60px;
    }
</style>

<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        //1.获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = Date.parse('2022-11-28 12:00:00');//返回用户输入时间总的毫秒数       
        showTime();
        //2.开启定时器
        setInterval(showTime, 1000)
        function showTime() {
            var nowTime = Date.now();//返回的是当前时间总的毫秒数
            var Times = (inputTime - nowTime) / 1000;//times是剩余时间总的秒数
            console.log(Times);
            var h = parseInt(Times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerText = h;
            var m = parseInt(Times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerText = m;
            var s = parseInt(Times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerText = s;
        }
    </script>
</body>

</html>

3.4.4停止定时器之setlnterval（）

window .clearInterval( interval ID);
clearInterval()方法取消了先前通过调用setInterval()建立的定时器。

代码演示：

<body>
    <button class="start">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var start = document.querySelector('.start');
        var stop = document.querySelector('.stop');
        var callback = null;//全局变量  null是一个空对象
        start.addEventListener('click',function(){
            callback = setInterval(function () {
                console.log("开始打印");
            },1000)
        })
        stop.addEventListener('click',function(){
            clearInterval(callback);
            console.log("-----------");
            console.log("停止打印");
        })
    </script>
</body>

效果图：

案例：发送短信
点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信

效果图：

思路分析：

按钮点击之后，会禁用disabled为true

同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改

里面秒数是有变化的，因此需要用到定时器

定义一个变量，在定时器里面，不断递减

如果变量为O说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    手机号码 <input type="number">
    <button>发送</button>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        //声明变量
        var time = 3;
        //添加监听事件
        btn.addEventListener('click', function () {
            //点击按钮禁用
            btn.disabled = true;
            //定时器
            var callback = setInterval(function () {
                //判断秒数是否为0
                if (time == 0) {
                    clearInterval(callback);
                    //复原按钮且修改内容
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time=3;
                } else {
                    btn.innerHTML = '还剩' + time + '秒再次点击';
                    time--;
                }
            }, 1000);
        })
    </script>
</body>

</html>