01-DOM-获取DOM元素、修改属性

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： web api 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44941576/article/details/123969636
版权

DOM-获取DOM元素、修改属性

Web API 基本认知

1.作用和分类

  • 作用: 就是使用 JS 去操作 html 和浏览器
  • 分类：DOM (文档对象模型)、BOM（浏览器对象模型）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPOKUg7l-1649142008677)(01-DOM-获取DOM元素、修改属性.assets/1648970987152.png)]

2.什么是DOM

  • DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
  • 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
  • DOM作用
    • ​ 开发网页内容特效和实现用户交互

3.DOM树

  1. DOM树是什么

    • 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
    • 描述网页内容关系的名词

  2. 作用

    文档树直观的体现了标签与标签之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aV3M0Dz1-1649142008678)(01-DOM-获取DOM元素、修改属性.assets/1648971136773.png)]

4.DOM对象

  1. DOM对象：浏览器根据html标签生成的 JS对象
    • 所有的标签属性都可以在这个对象上面找到
    • 修改这个对象的属性会自动映射到标签身上
  2. DOM的核心思想：把网页内容当做对象来处理
  3. document 对象
    • 是 DOM 里提供的一个对象
    • 所以它提供的属性和方法都是用来访问和操作网页内容的
    • 网页所有内容都在document里面

获取DOM对象

  • 根据CSS选择器来获取DOM元素 (重点)
  • 其他获取DOM元素方法（了解）

1.根据CSS选择器来获取DOM元素 (重点)

1.选择匹配的第一个元素

如果该标签有多个，只会显示第一个

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BDjYDWfe-1649142008678)(01-DOM-获取DOM元素、修改属性.assets/1648971381312.png)]

参数：包含一个或多个有效的CSS选择器 字符串

返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qZIfdkB-1649142008679)(01-DOM-获取DOM元素、修改属性.assets/1648988947151.png)]

代码展示

    <script>
        // 想要获取页面标签,需要使用document.querySelector选择器
        let divDom = document.querySelector("div")
        console.log(divDom);//输出为<div>123</div>
        console.dir(divDom);//输出div 在输出DOM标签时,使用dir
        //上方有两个div标签,但是只会输出第一个标签元素
    </script>
案例

[‘马超’, ‘赵云’, ‘吕布’, ‘张飞’]，随机出现该数组中的一个人名

<body>
    <h1>来将可留姓名?</h1>
    <h2 style="color: aqua;"></h2>

    <script>
        let friend = ['马超', '赵云', '吕布', '张飞']

        // 数组中任选其一
        function getFriend(min, max) {
            return Math.round(Math.random() * (max - min) + min)
        }
        let index = getFriend(0, friend.length - 1)
        let friends = friend[index];
        // 定位网页dom元素
        let h2Dom = document.querySelector('h2')
        h2Dom.innerText = friends


    </script>
</body>
2.选择匹配的多个元素

会选中所有符合条件的该标签

语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lG2Bmoo1-1649142008679)(01-DOM-获取DOM元素、修改属性.assets/1648975185115.png)]

参数：

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的NodeList 对象集合

例子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hGH1adkb-1649142008679)(01-DOM-获取DOM元素、修改属性.assets/1648975234791.png)]

代码展示：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
    </div>


    <script>
        let liDom = document.querySelectorAll('li');
        for (let index = 0; index < liDom.length; index++) {

            liDom[index].innerText = `这是Bom标签  ${index + 1}`;
        }
        console.log(liDom);
        let divBom = document.querySelectorAll('div')
        console.log(divBom);
    </script>
</body>
3.伪数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cYqJeCU6-1649142008679)(01-DOM-获取DOM元素、修改属性.assets/1648987577859.png)]

得到的是一个伪数组：

  • 有长度有索引号的数组
  • 但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。

注意：哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

3.其他获取DOM元素方法（了解）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tUSvFajB-1649142008680)(01-DOM-获取DOM元素、修改属性.assets/1648987667885.png)]

设置/修改DOM元素内容

1.设置文本内容（3种）

1.document.write()
  • 只能将文本内容追加到 前面的位置
  • 文本中包含的标签会被解析
  • 用的比较少

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aLmVXhkL-1649142008680)(01-DOM-获取DOM元素、修改属性.assets/1648987786728.png)]

   <script>
        document.write('<button>按钮</button>')//会直接接在body的后面
         </script>

2.元素innerText 属性

  • 将文本内容添加/更新到任意标签位置

  • 文本中包含的标签不会被解析

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08lXEoZr-1649142008680)(01-DOM-获取DOM元素、修改属性.assets/1648987878101.png)]

   <script>
        document.querySelector('li:nth-child(3)').innerText = '<button>按钮</button>';
        //可以设置文本,不能解析html字符串
    </script>

3.元素.innerHTML 属性

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pYnjyBns-1649142008680)(01-DOM-获取DOM元素、修改属性.assets/1648988003967.png)]

       <script>
    document.querySelector('li:nth-child(2)').innerHTML = '<button>按钮</button>';
        //可以设置文本,也可以解析html字符串
           </script>

4.修改元素属性

  • 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

  • 最常见的属性比如： href、title、src 等

  • 语法：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B3IyXKLQ-1649142008681)(01-DOM-获取DOM元素、修改属性.assets/1648988215333.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G2KPQPCU-1649142008681)(01-DOM-获取DOM元素、修改属性.assets/1648988231827.png)]

5.练习

数组中放5张图片，每次刷新时，随机出现一张图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5S68MDw7-1649142008681)(01-DOM-获取DOM元素、修改属性.assets/1648988158796.png)]

代码展示

<body>
    <img src="./images/1.png" alt="">
    <script>
        // 建立数组,将图片的位置放进去
        let img1 = [
            "./images/1.png",
            "./images/2.png",
            "./images/3.png",
            "./images/4.png",
            "./images/5.png"
        ]
        // 随机挑选一张图片
        let index = Math.round(Math.random() * 4)
        // 获取img标签的的Bom元素
        let img = document.querySelector('img')
        // 修改img.src的属性
        img.src = img1[index]
    </script>
</body>

设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

1.通过 style 属性操作CSS

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0kIHP7G4-1649142008681)(01-DOM-获取DOM元素、修改属性.assets/1648988346959.png)]

例子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gzqL2My9-1649142008682)(01-DOM-获取DOM元素、修改属性.assets/1648988366247.png)]

·

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uOEnBAjL-1649142008682)(01-DOM-获取DOM元素、修改属性.assets/1648988389146.png)]

代码展示
<body>
    <div>设置元素样式</div>
    <script>
        let div = document.querySelector('div')
        div.style.backgroundColor = "pink";
        div.style.fontSize = "100px"
        div.style.height = "200px"
        div.style.margin = "100px auto"
        div.style.textAlign = "center"
        div.style.lineHeight = "200px"
    </script>
</body>
案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gpsvl7aP-1649142008682)(01-DOM-获取DOM元素、修改属性.assets/1648988456175.png)]

<body>
    <script>
        let Img = ["./images/1.png", "./images/2.png", "./images/3.png", "./images/4.png", "./images/5.png"];
        let index = Math.round(Math.random() * 4);
        // let body = document.querySelector('body');
        // document.body.style.backgroundImage = `./images/${index}.png`
        document.body.style.backgroundImage = `url(./images/${index}.png) `
    </script>
</body>

2.操作类名(className) 操作CSS

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

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDIbABx7-1649142008682)(01-DOM-获取DOM元素、修改属性.assets/1648988531619.png)]

注意：

  • 由于class是关键字, 所以使用className去代替
  • className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
  • 直接使用会覆盖之前写的样式，只留这个

3.通过 classList 操作类控制CSS

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

语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eiA9hYvO-1649142008682)(01-DOM-获取DOM元素、修改属性.assets/1648988632869.png)]

代码展示

    <style>
        d1 {
            border: 1px solid black;
            background-color: aqua;
        }

        d2 {
            width: 200px;
        }

        d3 {
            height: 300px;
        }

        d4 {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="d1"> 123</div>
    <script>
        let div = document.querySelector('div');
        div.classList.add("d2", "d3") //可以同时添加多个样式
        div.classList.remove("d1", "d2") //删除样式,同样可以删除多个
        div.classList.toggle("d3")// 如果有这个样式,就会将这个样式删除,如果之前没有添加这样式,就会添加上
    </script>
</body>

设置/修改表单样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LyfVi4py-1649142008683)(01-DOM-获取DOM元素、修改属性.assets/1649039722331.png)]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-表单属性设置.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <input type="text" class="username" />
    是否同意协定
    <input type="checkbox" class="isarg" checked />

    <button class="code" disabled>发送验证码</button>

    <select class="sel">
      <option>去泰国</option>
      <option>去非洲</option>
      <option>去印度</option>
      <option>去啊富汗</option>
    </select>
    <script>
      /* 
      innerText innerHTML 主要是用来设置 双标签的文本内容的
      
       */
      // 获取一下表单 dom元素
      let username = document.querySelector('.username');
      // 复选框
      let isarg = document.querySelector('.isarg');
      // 按钮
      let code = document.querySelector('.code');

      // 设置文本内容
      // username.innerText = '我的用户名';

      // 设置输入框的文本内容
      username.value = '我的用户名';

      // 设置勾选上
      // isarg.checked = true;
      // 不勾选
      // isarg.checked = false;

      // 设置按钮 可以启用 可以点击
      // disabled 禁用
      // code.disabled = true;// 禁用
      code.disabled = false; // 启用

      // select 选中
      let option = document.querySelector('option:nth-child(4)');
      // option.select = true; // 错误的单词
      option.selected = true; // 正确的单词


      // checked  disabled  selected


      /* 
      表单属性的总结

      1 设置普通的输入框  input.value ="表单的值"
      2 设置 按钮的禁用 
        button.disabled=true   禁用
        button.disabled=false  启用
      3 设置单选框或者复选框
        radio.checked=true   选中
        checkbox.checked=false  取消选中

      4 设置下拉列表 select
        option.selected=true  选中 

      5 文本域标签 有点点特殊 ！  下一节课再来讲解 
      
       */
    </script>
  </body>
</html>

定时器-间歇函数

定时器使用场景

  • 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
  • 例如：网页中的倒计时
  • 要实现这种需求，需要定时器函数
  • 定时器函数有两种，今天先了解讲间歇函数

定时器函数基本使用

定时器函数可以开启和关闭定时器

1. 开启定时器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEchdTSK-1649142008683)(01-DOM-获取DOM元素、修改属性.assets/1648988752456.png)]

作用：每隔一段时间调用这个函数

单位：间隔时间单位是毫秒

例子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zPAMReZ-1649142008683)(01-DOM-获取DOM元素、修改属性.assets/1648988786859.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-36v73fJS-1649142008683)(01-DOM-获取DOM元素、修改属性.assets/1648988795752.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MCAZBu4j-1649142008683)(01-DOM-获取DOM元素、修改属性.assets/1648988884758.png)]代码展示

    <script>
        function repeat() {
            console.log('头发多,就是玩');
        }
        setInterval(repeat, 1000)//  setInterval(函数名,间隔时间)间隔时间的单位为毫秒


        // 匿名函数的使用方法
        setInterval(function () {
            console.log('前端使我头秃');
        }, 1000)
    </script>
2. 关闭定时器

一般不会刚创建就停止，而是满足一定条件再停止

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DFFGnTr3-1649142008684)(01-DOM-获取DOM元素、修改属性.assets/1648988979506.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v3OXPAUP-1649142008684)(01-DOM-获取DOM元素、修改属性.assets/1648988999719.png)]

案例

1.制作一个60s的倒计时,当倒计时为0后,重新返回60再计算

    <style>
        d1 {
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <script>
        //图中的样式只是为了练手
        let div = document.querySelector('div')
        div.classList.add('d1')
        div.style.width = "200px"
        div.style.height = "200px"
        div.style.backgroundColor = "pink"
        div.style.margin = "100px auto"
        let times = 60
        setInterval(() => {
            div.innerText = times;
            times--

            if (times === -1) {
                times = 60
            }
        }, 100);
    </script>
</body>

2.制作轮播图,每秒钟切换一张图片,一直循环

<body>
    <img src="" alt="">
    <script>
        //获取img的dom标签
        let img = document.querySelector('img')
        let index = 1
        // 使用计时器的方式进行更换图片
        setInterval(() => {
            // console.log(index);

            img.src = `./images/b0${index}.jpg`
            index++
            // 共9张图,当index=10的时候,返回第一张图
            if (index === 10) {
                index = 1
            }
        }, 1000);
    </script>
</body>

案例加强

1.书写一个倒计时的案例

从60开始倒计时,等到数字变为0时,再将数字变成60继续倒数,一直循环

<body>
    <div></div>
    <script>
        let div = document.querySelector('div')
        let times = 60
        setInterval(() => {
            div.innerHTML = times
            times--
            console.log(times);
            if (times === -1) {
                times = 60
            }
        }, 100);
    </script>
</body>

2.轮播图案例

使用9张图片,一打开页面,每秒钟就会更换一张图片,一共九张一直循环播放

<body>
    <img src="" alt="">

    <script>

        let img = document.querySelector('img')
        let num = 1
        setInterval(() => {
            img.src = `../../01-day/images/b0${num}.jpg`
            num++
            if (num === 10) {
                num = 1
            }
        }, 1000);
    </script>
</body>

setInterval(() => {
div.innerHTML = times
times–
console.log(times);
if (times === -1) {
times = 60
}
}, 100);

```

2.轮播图案例

使用9张图片,一打开页面,每秒钟就会更换一张图片,一共九张一直循环播放

<body>
    <img src="" alt="">

    <script>

        let img = document.querySelector('img')
        let num = 1
        setInterval(() => {
            img.src = `../../01-day/images/b0${num}.jpg`
            num++
            if (num === 10) {
                num = 1
            }
        }, 1000);
    </script>
</body>
阿良_C
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
10-16
主要介绍了jquery获取并修改触发事件的DOM元素,结合实例形式分析了jQuery基于target 属性获取到触发该事件的dom并修改的相关操作技巧,需要的朋友可以参考下
DOM—操作元素（获取属性值、设置属性值、 移除属性）
m0_59030524的博客
02-18 1951
1. 自定义属性的操作 1.1 获取属性值 element . 属性 获取属性值；（元素本身自带的属性） element . getAttribute( ' 属性 ' )；（主要获取自定义的属性（标准）） <body> <div id="demo" index='12'></div> <script> var div = document.querySelector('div'); // 1. 获...
DOM获取、设置元素属性
awsl_666的博客
08-23 377
一、获取元素属性 1.getAttribute():只有在获取自定义属性值的情况下才会使用。 一般情况使用对象的属性。 二、设置元素属性 1.setAttribute():两个参数： （1）要设置的属性名 （2）要设置的值 注意：会以指定的值替换现有的值，如果属性不存在，则会创建该属性并设置相应的值。 <ul> <li id="one" mycolor="red"...
DOM（一）：获取页面元素、操作元素、自定义属性
weixin_53912712的博客
12-23 1838
获取页面元素、操作元素
vue 获取dom的css属性值
oTianKuaiLe的博客
11-19 4252
&lt;template&gt; &lt;div id="topInfo" ref="topInfo" style="width: 200px;height: 200px;background-color: #0bb20c"&gt; &lt;img id="imgInfo" ref="imgInfo" src="./20151205231902_
DOM常用几种获取元素属性方式
m0_68331352的博客
07-30 6762
DOM常用几种获取元素属性方式
Vue获取DOM元素样式和样式更改示例
08-31
本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue获取DOM元素并设置属性的两种实现方法
11-29
这里我想到了2个方法： 方法一： 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值，vue会报错： Avoid mutating a prop dir
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
主要介绍了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法,涉及javascript dom模型及事件响应相关操作技巧,需要的朋友可以参考下
用JavaScript获取DOM元素位置和尺寸大小的方法
12-01
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些...
DOM 修改属性简单操作
流楚丶格念的博客
08-06 4377
文章目录属性操作非表单元素的属性表单元素属性案例自定义属性操作样式操作类名操作案例 属性操作 非表单元素的属性 href、title、id、src、className var link = document.getElementById('link'); console.log(link.href); console.log(link.title); var pic = document.getElementById('pic'); console.log(pic.src); 案例： ​ 点击按钮，切换
操作dom元素修改文本属性
m0_47733490的博客
03-16 1027
根据需求，后端将整段html代码传给前端，前端通过一些属性侧边栏来配置其中的内容 这里前端我用ref节点来渲染整段代码，然后根据后端返回的代码中每一个标签有自己的id，用html原生的方法来获取dom节点，然后拿到dom节点的属性再进行赋值，这里我用watch监听，当某个属性发生变化的时候再重新给标签赋值 最后就获取最外层div的dom节点，然后将他的outerHTML代码再与后端交互将后端库里的替换掉就可以了 ...
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 165
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 674
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1117
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 622
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
搭建自己的视频通话服务器Janus(WebRTC)
lvronglee的专栏
05-21 361
因为默认的代码，https是会请求8089的https请求的。apt install janus的源码安装了之后，要么自己写demo，要么直接用源码里面的前端页面。注意这里的pem文件，以及代理。janus 是后端，需要nginx或者其他等提供前端页面的服务器，此外因为这里并没有正式的证书，只能用自签名的证书用于https。穿透用来着，如果是局域网部署的，没有影响，如果部署到阿里云这样的，需要这个来做NAT穿透。随便注册个名字，然后用手机打开手机网络，这里看能不能穿透，不用和测试机一样的网络环境。
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 255
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
el-input获取dom元素设置value
05-31
要通过获取 DOM 元素的方式来设置 `el-input` 的值，可以通过 `$refs` 来获取到 `el-input` 的实例，然后使用 `this.$refs.input.$el.value` 来获取到 `el-input` 组件的 input 元素，最后设置 input 元素的值即可。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值