DOM概述-程序员宅基地

技术标签：前端 Join html javascript

什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

对象树化的DOM模型

在这里插入图片描述

DOM 节点

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。
其它…

如何获取DOM元素

querySelector 满足条件的第一个元素
querySelectorAll 满足条件的元素集合返回伪数组
了解其他方式
1. getElementById
2. getElementsByTagName

补充：
对于querySelector我们是获取第一个元素
但是querySelectorAll是我们进行索取全部元素以数组的形式进
行返回，如果想要调用我们的元素，就需要使用下标对于我们的元素进行调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - 查找节点</title>
</head>
<body>
  <h3>查找元素类型节点</h3>
  <p>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p>
  <ul>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
  </ul>
  <script>
  	const p = document.querySelector('p')  // 获取第一个p元素
  	const lis = document.querySelectorAll('li')  // 获取第一个p元素
  </script>
</body>
</html>

如何更改我们的DOM模型

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

<script>
  // innerText 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  // intro.innerText = '嗨~ 我叫陈11！'
  // intro.innerText = '<h4>嗨~ 我叫陈11！</h4>'
</script>

我们可以通过innerText进行修改我们的文本，但是也仅限于我们使用innnerText只能修改我们标签的内容
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

<script>
  // innerHTML 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  intro.innerHTML = '嗨~ 我叫陈22！'
  intro.innerHTML = '<h4>嗨~ 我叫陈22！</h4>'
</script>

但是我们的innerHTMl可以直接进行修改我们的标签
总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

常用属性修改

直接能过属性名修改，最简洁的语法

<script>
  // 1. 获取 img 对应的 DOM 元素
  const pic = document.querySelector('.pic')
	// 2. 修改属性
  pic.src = './images/lion.webp'
  pic.width = 400;
  pic.alt = '图片不见了...'
</script>

说明：我们的pic相当于是一个对象，我们通过querySelector进行选择所有的元素，之后通过调用属性进行修改，比如调用.src相当于我们修改了图片的来源，进行对我们的文本属性进行修改

控制样式属性

应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。

通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.style.color = 'red'
    box.style.width = '300px'
    // css 属性的 - 连接符与 JavaScript 的 减运算符
    // 冲突，所以要改成驼峰法
    box.style.backgroundColor = 'pink'
  </script>
</body>
</html>

任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor
2. 操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
    <style>
        .pink {
      
            background: pink;
            color: hotpink;
        }
    </style>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.className = 'pink'
  </script>
</body>
</html>

说明：我们先用const关键字进行获取，然后，我们直接对鱼器进行调用，但是注意我们是通过className进行的调用，而不是通过class进行直接调用，因为class是类名关键字
3. 通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名


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

        .active {
      
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </script>
</body>

</html>

事件

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

例如：换一句话就是我们通过用户进行发生事件，比如说用户点击鼠标我们要进行相应的反应，或者用户进行键盘的输入我们也需要进行一个响应的反应，这个就叫做事件

事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听</title>
</head>
<body>
  <h3>事件监听</h3>
  <p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
  <button id="btn">点击改变文字颜色</button>
  <script>
    // 1. 获取 button 对应的 DOM 对象
    const btn = document.querySelector('#btn')

    // 2. 添加事件监听
    btn.addEventListener('click', function () {
      
      console.log('等待事件被触发...')
      // 改变 p 标签的文字颜色
      let text = document.getElementById('text')
      text.style.color = 'red'
    })

    // 3. 只要用户点击了按钮，事件便触发了！！！
  </script>
</body>
</html>

鼠标点击前
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xmu9GRVU-1683196537456)(http://121.41.57.70/wp-content/uploads/2023/04/截屏2023-04-18-18.30.27.png)]
鼠标点击后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vzSazmE8-1683196537457)(http://121.41.57.70/wp-content/uploads/2023/04/截屏2023-04-18-18.31.13.png)]
就修改了我们文字的颜色
那么如何进行时间监听

获取 DOM 元素
通过 addEventListener 方法为 DOM 节点添加事件监听
等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
事件触发后，相对应的回调函数会被执行
换一句话说：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。

事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。

鼠标事件

鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。

`mouseenter 监听鼠标是否移入 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');

    // 监听鼠标是移入当前 DOM 元素
    box.addEventListener('mouseenter', function () {
      
      // 修改文本内容
      this.innerText = '鼠标移入了...';
      // 修改光标的风格
      this.style.cursor = 'move';
    })
  </script>
</body>

`mouseleave 监听鼠标是否移出 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');

    // 监听鼠标是移出当前 DOM 元素
    box.addEventListener('mouseleave', function () {
      
      // 修改文本内容
      this.innerText = '鼠标移出了...';
    })
  </script>
</body>

键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

焦点事件

focus 获得焦点

blur 失去焦点

文本框输入事件

input

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

<body>
  <h3>事件对象</h3>
  <p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
  <hr>
  <div class="box"></div>
  <script>
    // 获取 .box 元素
    const box = document.querySelector('.box')

    // 添加事件监听
    box.addEventListener('click', function (e) {
      
      console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');

      // 事件回调函数的第1个参数即所谓的事件对象
      console.log(e)
    })
  </script>
</body>

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。

接下来简单看一下事件对象中包含了哪些有用的信息：

ev.type 当前事件的类型
ev.clientX/Y 光标相对浏览器窗口的位置
ev.offsetX/Y 光标相于当前 DOM 元素的位置

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。

<script>
  // 声明 foo 函数
  function foo(arg) {
      
    console.log(arg);
  }

  // 普通的值做为参数
  foo(10);
  foo('hello world!');
  foo(['html', 'css', 'javascript']);

  function bar() {
      
    console.log('函数也能当参数...');
  }
  // 函数也可以做为参数！！！！
  foo(bar);
</script>

函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了！！！

我们回顾一下间歇函数 setInterval

<script>
	function fn() {
      
    console.log('我是回调函数...');
  }
  // 调用定时器
  setInterval(fn, 1000);
</script>

fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。

<script>
  // 调用定时器，匿名函数做为参数
  setInterval(function () {
      
    console.log('我是回调函数...');
  }, 1000);
</script>

结论：

回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

补充：回掉函数就是我们本身有的函数，调用的时候，选择调用的不是属性而是另一个新的函数

DOM 节点

掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点

回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。

插入节点

在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。

插入节点

在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。

如下代码演示：

<body>
  <h3>插入节点</h3>
  <p>在现有 dom 结构基础上插入新的元素节点</p>
  <hr>
  <!-- 普通盒子 -->
  <div class="box"></div>
  <!-- 点击按钮向 box 盒子插入节点 -->
  <button class="btn">插入节点</button>
  <script>
    // 点击按钮，在网页中插入节点
    const btn = document.querySelector('.btn')
    btn.addEventListener('click', function () {
      
      // 1. 获得一个 DOM 元素节点
      const p = document.createElement('p')
      p.innerText = '创建的新的p标签'
      p.className = 'info'
      
      // 复制原有的 DOM 节点
      const p2 = document.querySelector('p').cloneNode(true)
      p2.style.color = 'red'

      // 2. 插入盒子 box 盒子
      document.querySelector('.box').appendChild(p)
      document.querySelector('.box').appendChild(p2)
    })
  </script>
</body>

结论：

createElement 动态创建任意 DOM 节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
appendChild 在末尾（结束标签前）插入节点

<body>
  <h3>插入节点</h3>
  <p>在现有 dom 结构基础上插入新的元素节点</p>
	<hr>
  <button class="btn1">在任意节点前插入</button>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <script>
    // 点击按钮，在已有 DOM 中插入新节点
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {
      

      // 第 2 个 li 元素
      const relative = document.querySelector('li:nth-child(2)')

      // 1. 动态创建新的节点
      const li1 = document.createElement('li')
      li1.style.color = 'red'
      li1.innerText = 'Web APIs'

      // 复制现有的节点
      const li2 = document.querySelector('li:first-child').cloneNode(true)
      li2.style.color = 'blue'

      // 2. 在 relative 节点前插入
      document.querySelector('ul').insertBefore(li1, relative)
      document.querySelector('ul').insertBefore(li2, relative)
    })
  </script>
</body>

结论：

createElement 动态创建任意 DOM 节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
insertBefore 在父节点中任意子节点之前插入新节点

删除节点

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。

<body>
  <!-- 点击按钮删除节点 -->
  <button>删除节点</button>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Web APIs</li>
  </ul>

  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      
      // 获取 ul 父节点
      let ul = document.querySelector('ul')
      // 待删除的子节点
      let lis = document.querySelectorAll('li')

      // 删除节点
      ul.removeChild(lis[0])
    })
  </script>
</body>

结论：removeChild 删除节点时一定是由父子关系。

查找节点

DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。

父子关系

<body>
  <button class="btn1">所有的子节点</button>
  <!-- 获取 ul 的子节点 -->
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript 基础</li>
    <li>Web APIs</li>
  </ul>
  <script>
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {
      
      // 父节点
      const ul = document.querySelector('ul')

      // 所有的子节点
      console.log(ul.childNodes)
      // 只包含元素子节点
      console.log(ul.children)
    })
  </script>
</body>

结论：

childNodes 获取全部的子节点，回车换行会被认为是空白文本节点
children 只获取元素类型节点

<body>
  <table>
    <tr>
      <td width="60">序号</td>
      <td>课程名</td>
      <td>难度</td>
      <td width="80">操作</td>
    </tr>
    <tr>
      <td>1</td>
      <td><span>HTML</span></td>
      <td>初级</td>
      <td><button>变色</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>CSS</span></td>
      <td>初级</td>
      <td><button>变色</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>Web APIs</span></td>
      <td>中级</td>
      <td><button>变色</button></td>
    </tr>
  </table>
  <script>
    // 获取所有 button 节点，并添加事件监听
    const buttons = document.querySelectorAll('table button')
    for(let i = 0; i < buttons.length; i++) {
      
      buttons[i].addEventListener('click', function () {
      
        // console.log(this.parentNode); // 父节点 td
        // console.log(this.parentNode.parentNode); // 爷爷节点 tr
        this.parentNode.parentNode.style.color = 'red'
      })
    }
  </script>
</body>

结论：parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。

兄弟关系

<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript 基础</li>
    <li>Web APIs</li>
  </ul>
  <script>
    // 获取所有 li 节点
    const lis = document.querySelectorAll('ul li')

    // 对所有的 li 节点添加事件监听
    for(let i = 0; i < lis.length; i++) {
      
      lis[i].addEventListener('click', function () {
      
        // 前一个节点
        console.log(this.previousSibling)
        // 下一下节点
        console.log(this.nextSibling)
      })
    }
  </script>
</body>

结论：

previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。
nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。

本文链接：https://blog.csdn.net/Chen_072_11/article/details/130492829

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

能贴在Windows11桌面且与手机同步的备忘记事便签_win11 stickly note 手机版-程序员宅基地

文章浏览阅读2k次。Windows11系统已经有不少人在用，如果你也把Windows系统升到了win11，为了方便工作，首先要确定一下win11里自己常用办公软件是否在。如果是健忘一族，一定要给自己找一款好用的便签。一款好用的便签，不但能记事备忘，还能有效地梳理工作，提高工作效率。有人找便签，喜欢找能贴在Windows11桌面，且能与手机同步的备忘记事便签。这样的便签存在吗？如果存在的话，哪个便签比较好用呢？这样的便签当然有，能贴在桌面使用的跨平台同步便签敬业签非常好用。敬业签支持在Windows、web、Android_win11 stickly note 手机版

Android 自定义View之仿华为圆形加载进度条_android studio仿华为圆形加载框-程序员宅基地

文章浏览阅读5.4k次，点赞9次，收藏26次。效果图实现思路可以看出该View可分为三个部分来实现最外围的圆，该部分需要区分进度圆和底部的刻度圆，进度部分的刻度需要和底色刻度区分开来中间显示的文字进度，需要让文字在View中居中显示旋转的小圆点，小圆点需要模拟小球下落运动时的加速度效果，开始下落的时候慢，到最底部时最快，上来时速度再逐渐减慢具体实现先具体细分讲解，博客最后面给出全部源码（1）首先为View创建自定义的xml属性在工程_android studio仿华为圆形加载框

Zabbix的介绍和部署_zabbix网络中心-程序员宅基地

文章浏览阅读707次。zabbix agent安装在被监控的主机上，zabbix agent负责定期收集客户端本地各项数据，并发送至 zabbix server 端，zabbix server 收到数据后，将数据存储到数据库中，用户基于 Zabbix WEB 可以看到数据在前端展现图像。_zabbix网络中心

linux网络下载_liunx网上下载-程序员宅基地

文章浏览阅读372次。网站下载wget 是一个用于文件下载的命令行工具用wget可以下载网页或远程文件：$ wget URL多处URL下载$ wget URL1 URL2 URL3..下载文件输出文件到指定文件$ wget ftp://example.com/somefile.img -o dloaded_file.img -o log指定重试次数$ wget -t 5 URL使用--limit-rate对wget限速$ wget --limit-rate 20k http://.....可以使用k和m指_liunx网上下载

架构师必读 : 微服务架构设计指南-程序员宅基地

文章浏览阅读109次。每个人都听说过微服务。但你知道怎么设计吗？微服务是当今软件工程师的一个热门话题。让我们了解如何使用微服务架构风格构建真正模块化、业务敏捷的IT系统。一、微服务概念微服务体系结构由轻量级、松散耦合的服务集合组成。每个服务都实现了单个业务功能。理想情况下，这些服务应该是具有足够的内聚性，可以独立地开发、测试、发布、部署、扩展、集成和维护。正式定义 “微服务架构风格是一种将单个应用程序开发为一组小型..._微服务工程师百度百科

2023-2024年人形机器人行业报告合集（精选397份）_高工人形机器人报告-程序员宅基地

文章浏览阅读710次，点赞22次，收藏17次。2024人形机器人力传感器行业研究报告：人形机器人商业化图景远大，引爆六维力传感器市场空间。2024机器人行业研究报告：英伟达赋能机器人AI超预期，二季度迎机器人定点最大催化。2024人形机器人的Optimus时刻报告：IMU（姿态感知），旧火新茶，其时已至。2024人形机器人报告：MEMS IMU或为人形机器人实现两足运动平衡的最佳方案。2024人形机器人丝杠报告：丝杠作为人形机器人核心传动部件，正面临新一轮产业机遇。2024人形机器人精密减速器报告：机器人核心部件有望持续受益人形机器人产业带动。_高工人形机器人报告

随便推点

[ArcGIS笔记] 栅格图像如何显示经纬度坐标_栅格坐标-程序员宅基地

文章浏览阅读1.3w次，点赞3次，收藏31次。网上下载的栅格数据是WGS84坐标系，显示的是xy坐标，想要让它显示经纬度坐标，步骤如下：1.设置合适的坐标系。（1）了解数据的原有坐标系打开栅格数据后会发现没有空间参考信息，需要首先设置一下坐标系。注意一定要和源数据的坐标系相同。比如说本数据数采用WGS84的投影坐标系。（2）输出TIFF图像本人通过工具箱的定义投影、属性的编辑，都没有办法给栅格数据添加坐标系，于是上网查找找到了一种办法，如图：首先打开图层组的属性，设置数据框属性的坐标系为web mercator投影。然后右键图层，_栅格坐标

istio 简介-程序员宅基地

文章浏览阅读4.9k次，点赞7次，收藏30次。文章目录什么是 istio？istio 解决了什么痛点？总结istio 的解决方案流量管理安全性可观察性平台支持什么是 istio？讲多了记不住，那就：服务网格 + 微服务治理。istio 解决了什么痛点？了解Istio得从微服务架构谈起，微服务是在2012年提出的概念，其根本思想是通过拆分原则，希望一个服务只负责业务中一个独立的功能，这样任何一个需求不会因为发布或者维护而影响到不相关的服务，所有服务都可以做到独立部署运维，当然这也只是微服务架构给我们带来的好处之一。但是：首先，原来的单个应用_istio

c语言课程图书信息管理系统,c语言课程设图书信息管理系统.doc-程序员宅基地

文章浏览阅读434次。c语言课程设图书信息管理系统课程设计报告课程：高级语言程序设计学号： 1010431059姓名：胡维维班级：嵌入式一班教师：王群芳时间： 2011年6月计算机科学与技术系设计名称：图书信息管理系统设计图书信息包括：登录号、书名、作者名、分类号、出版单位、出版时间、价格等。试设计一图书信息管理系统，使之能提供以下功能：1、图书信息录入功能2、图书信息浏览功能3、图书信息查询功能 ..._c语2、图书信息管理图书信息包括:登录号、书名、作者名、分类号、出版单位、出版

webpack4脚手架搭建1——打包并编译es6_webpack编译es6语法打包-程序员宅基地

文章浏览阅读695次。使用webpack执行webpack -h 查看webpack命令行使用说明安装webpack与webpack-cli安装webpack cnpm install webpack -g，安装后执行webpack -v会提示安装webpack-cli，这是因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以用 c..._webpack编译es6语法打包

信息通信服务、电子商务及物流服务的创新与发展_信息通信,电子商务-程序员宅基地

文章浏览阅读828次。2019年，国际互联网的蓬勃发展促使“物联网”（IoT）、云计算、大数据、人工智能等新兴技术的普及和应用。而在物流、电子商务、信息通信网络服务领域，亦或将成为信息时代最重要的基础设施。近几年，数字经济正走向成熟，用户的接受能力也越来越高，因此，信息通信服务、电子商务及物流服务都迎来了新的机遇。这些领域正经历着蓬勃的创新变革和不断变化，也是非常值得关注的领域。2020年，我国在推进“一带一路”倡议、开放世界经济格局方面取得重大成功，也促进了互联网和电子商务的发展。_信息通信,电子商务

websocket.js的封装，包含保活机制,通用_websocket保活-程序员宅基地

文章浏览阅读774次。websocket的封装，包含保活机制_websocket保活