JavaScript_09 Web API（基本认知、获取DOM对象、操作元素内容、操作元素属性、定时器-间歇函数）

最新推荐文章于 2024-07-20 18:16:53 发布

新程序猿小武

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量57

点赞数

分类专栏： JavaScript学习笔记文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qsw1364941774/article/details/131408671

版权

JavaScript学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JavaScript_09 Web API的基本认知

一、Web API的基本认知
二、获取DOM元素
- 2.1 根据CSS选择器来获取DOM元素 (重点)
- 2.2 其他获取DOM元素方法（了解）
三、操作元素内容
- 3.1 元素innerText 属性
- 3.2 元素innerHTML 属性
四、操作元素属性
五、定时器-间歇函数
- 5.1 开启定时器
- 5.1 关闭定时器

一、Web API的基本认知

1.1作用与分类

作用：使用JS去操作HTML和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）

在这里插入图片描述

1.2 什么是DOM？

DOM（Document Object Module 文档对象模型）他是API，用于呈现以及与任意的HTML或xml文档进行交互。

DOM 是浏览器提供的一套专门用来操作网页内容的API；

作用：开发网页内容特效、实现用户交互

1.3 DOM树

什么是DOM树？

将HTML文档以树状结构直观的表现出来，我们称之为文档树或者DOM树
描述网页内容关系的名词
作用：文档树直接的体现了标签与标签之间的关系

1.4 DOM对象（重点）

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

二、获取DOM元素

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

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

document.querySelector('css选择器')

参数：
包含一个或者多个有效的css选择器字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null
参考官方文档

2.选择匹配的多个元素
语法：

document.querySelectorAll('css选择器')

参数：
包含一个或多个有效的css选择器字符串
返回值：
CSS选择器匹配的NodeList 集合对象
例如：

document.querySelectorAll('ul li')

通过document.querySelectorAll(‘css选择器’)得到的是一个伪数组，

有长度有索引的数组
但是没有pop() push()等数组方法
想要得到里面每个对象，需要遍历的方式获得

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

根据id获取一个元素

document.getElementById('nav')

根据标签获取一类元素获取页面所哟的div

document.getElementByTagName('nav')

根据类名获取元素获取页面所有为w的

document.getElementByClassName('w')

三、操作元素内容

对象.innerText 属性
对象.innerHTML 属性
学完此小结，能够学会修改元素的文本内容
DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象。

3.1 元素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>
    <p class="info">小帅哥</p>
    <script>
      const info = document.querySelector(".info");
      // 获取标签内部的文字
      //   alert(info.innerText);
      //修改/添加标签内部的文字
      info.innerText = "被修改的小帅哥~";
    </script>
  </body>
</html>

3.2 元素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>
    <p class="info">小帅哥</p>
    <script>
      const info = document.querySelector(".info");
      // 获取标签内部的文字
      // alert(info.innerHTML);
      //修改/添加标签内部的文字
      info.innerHTML = "被修改的<strong>小帅哥~</strong>";
    </script>
  </body>
</html>

四、操作元素属性

4.1 操作元素常用属性

可以通过JS 设置/修改标签元素属性，比如通过src更换图片，最常见的属性比如href、title、src

<!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>
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #img {
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <img src="../imgs/漂亮妹妹.png" alt="" id="img" title="漂亮妹妹喔" />
    <script>
      document.querySelector("#img").onclick = function () {
        const img = document.querySelector("#img");
        img.src = "../imgs/亮晶晶的眼睛.jpg";
        img.title = "亮晶晶的眼睛";
      };
    </script>
  </body>
</html>

4.2 操作元素样式属性

可以通过JS 设置/修改标签元素的样式属性。
实现思路：
通过style属性控制CSS
语法：对象.style.样式属性 = 值
例子：

      const box = document.querySelector(".box");
      box.onclick = function () {
        box.style.width = "200px";
        box.style.height = "15px";
        box.style.backgroundColor = "red";
      };

操作类名（className）操作css
语法：元素.className = 'active'
通过classList操作类控制css
语法：

// 追加一个类
元素.classList.add('类名')

// 删除一个类
元素.classList.remove('类名')

// 切换一个类
元素.classList.togglee('类名')

4.3 操作表单元素属性

有时候我们需要去对表单元素的属性值进行修改，例如将密码显示为可见；
获取属性值:

DOM对象.属性名
设置：DOM对象.属性名 = 新值

表单.value  = ‘用户名’
表单.type = ‘password’

4.4 自定义属性

标准属性：标签天生自带的属性，比如class 、id、 title等；
自定义属性：
- html5新推出的专门的data-自定义属性
- 在标签上一律以data-开头
- 在dom对象上一律以dataset对象方式获取；

五、定时器-间歇函数

5.1 开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间就会去调用这个函数
间隔时间单位是毫秒

例子

    <script>
      const img = document.querySelector("#img");
      function repeatImg() {
        console('输出内容在控制台')
      }
      // 每隔一秒调用一次repeatImg函数
      setInterval(repeatImg, 1000);
    </script>

5.1 关闭定时器

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

	let 变量名 = setInterval (函数,1000);
	clearInterval(变量名)
	注意：定时器返回的是一个id数字
-------------------------------------------------------
      let timer = setInterval(function () {
        console.log("Hi~");
      }, 1000);
      clearInterval(timer);

新程序猿小武

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_09 Web API（基本认知、获取DOM对象、操作元素内容、操作元素属性、定时器-间歇函数）

DOM（Document Object Module 文档对象模型）他是API，用于呈现以及与任意的HTML或xml文档进行交互。DOM 是浏览器提供的一套专门用来操作网页内容的API；作用：开发网页内容特效、实现用户交互标准属性：标签天生自带的属性，比如class 、id、 title等；html5新推出的专门的data-自定义属性在标签上一律以data-开头在dom对象上一律以dataset对象方式获取；
复制链接

扫一扫