新手小白练习web API的第一天

无敌暴暴龙（超级无敌版）

已于 2023-12-09 13:48:51 修改

阅读量492

点赞数 15

文章标签：前端 javascript 开发语言

于 2023-12-09 13:29:21 首次发布

本文链接：https://blog.csdn.net/weixin_52692705/article/details/134851788

版权

1.声明变量

声明变量有三个：const,let,var

建议： const 优先，尽量使用const，原因是：

const 语义化更好
const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
实际开发中也是，比如react框架，基本const
如果实在纠结可以有了变量先给const，如果发现它后面是要被修改的，再改为let
建议数组和对象使用 const 来声明

在声明对象时，如果刚开始用的let进行声明，最后重新赋值，此时let可以用const代替，因为对象的地址是不变的 ,对于引用数据类型，const声明的变量，里面存的不是值，不是值，不是值，是地址。比如以下代码就是可以将let更换成const

let arr = ['red','green']
arr.push('pink')
console.log(arr)

//以下方式是错误的，因为相当于是重新声明了一个数组,地址不一样
const names = []
names = [1,2,3]

//可以用以下方式就是正确的
constnames = []
names[0] = 1
names[1] = 2
names[2] = 3

2.Web APIs

分成两类DOM (文档对象模型)、BOM（浏览器对象模型）

2.1DOM

DOM是浏览器提供的一套专门用来操作网页内容的功能（开发网页内容特效和实现用户交互）

2.1.1DOM树

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

2.1.2DOM对象

浏览器根据html标签生成的 JS对象，document 对象，是 DOM 里提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的

2.2对DOM对象的操作

2.2.1根据css选择器来获取DOM元素

选择匹配的第一个元素——document.querySelector('css选择器');返回的是与css选择器匹配的第一个元素，如果没有匹配到，则返回null
选择匹配的多个元素——document.querySelectorAll('css选择器')；返回的是与CSS选择器匹配的NodeList（对象集合）, 是一个伪数组，但是没有pop().push()等数组方法，想要得到里面的每一个对象，则需要遍历（for）的方式获得
根据id获取一个元素——document.getElementById('css选择器')
根据标签获取一类元素——document.getElementsByTagName('css选择器')
根据类名获取元素——document.getElementsByClassName('css选择器')

2.3操作元素内容

innerText——将文本内容添加/更新到任意标签位置。显示纯文本，不解析标签

<div class="info"></div>
    <script>
      const info = document.querySelector(".info");
      console.log(info);
      info.innerText = "哈喽";
    </script>

innerHTML——将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模板字符

<div class="info"></div>
    <script>
      const info = document.querySelector(".info");
      console.log(info);
      info.innerHTML = `哈喽，<h1>我是无敌暴暴龙</h1>`;
    </script>

2.4操作元素的属性

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

对象.属性 = 值

2.5操作元素样式属性

对象.style.样式属性 = 值

注意：

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

元素.className = 'active' //active是一个类名

直接使用 className 赋值会覆盖以前的类名

元素.classList.add('类名')//追加一个类
元素.classList.remove('类名')//删除一个类
元素.classList.toggle('类名')//切换一个类

使用 classList赋值不会覆盖以前的类名

2.6操作表单元素属性

获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

//比如
表单.value = '用户名'
表单.type = 'password'

以下属性一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性

比如： disabled、checked、selected

2.7自定义属性

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

2.8定时器

setInterval(函数，间隔时间)//开启定时器
//关闭定时器
let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

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

注意：

1. 函数名字不需要加括号

2. 定时器返回的是一个id数字