WEB APIS(DOM对象,操作元素内容,属性,表单属性,自定义属性,定时器)

js基础基本语法:

变量,数据类型,循环,函数,对象等(主要是控制台打印)

WEB APIS 操作DOM BOM :

控制网页元素,交互等各种网页交互效果

js高级 语法:

js新增语法,高级技巧等

web api

变量声明,优先const 。const声明的变量基本不再改变,要是再改变,再修改为let。

如果是为数组/对象添加或者删除一些元素,数组地址是不变的,数组也不变,还是那个数组,所以总体是不变的,可用const。但是为整个数组重新赋值的话,就改变了,需要使用let.

web api 作用和分类:

  • 作用:使用js去操作html和浏览器
  • 分类:DOM(文档对象模型),BOM(浏览器对象模型)

前边学过的alert和prompt就是BOM,不过已经先学了


DOM树:

例如div标签,在html中叫做html标签,在js中叫做DOM对象

获取DOM对象:

css是通过选择器的方式获取,而js有自己的方式获取

注:页面标签都在document中

querySelector()括号中可以是标签,id,也可以是类名,但是都一定要记得加上引号

获取的是第一个

查询子标签中第一个:

获取所有元素然后以数组方式返回:


对象遍历使用for in ,该伪数组遍历使用for

其他获取DOM元素方法,因为不常使用了,所以作为了解即可

操作元素内容:

innerText能获取标签里边的内容,也能修改标签里的内容,但是不能解析标签

操作元素属性:

元素常用属性:例如img标签的title和src

对象.属性=值

元素样式属性:

对象.style.样式属性 = "新值"(新值一定要写单位)

当样式属性名中间用 - 连接,在修改时会报错,所以在修改时使用小驼峰命名法

操作类名(className)操作css:

如果想要修改所有元素样式,用style属性修改要一个一个样式敲很麻烦

所以直接新写一个class类选择器内容,将获取的DOM对象的className改为新的class类选择器名字

有两种情况:

一种是DOM对象没有类名,直接 div.className = 'box',直接使用新类名会覆盖以前的样式

另一种是DOM对象有类名,并且仍然还需要原类名选择器中的样式,那么就在新旧类名中间加个空格 div.className = 'box nav'

classList 操作类控制css:

使用DOM对象.className = '新类' 这样还需要去找是否有原来类,防止原来类样式被覆盖掉,所以比较麻烦。现在通过classList方式追加和删除类名

操作表单元素属性:

input中 type属性值的变化

以及value值的变化

添加表单属性:

disabled是一个布尔属性,为true时表示禁用

javascript 复制代码
<button disabled> 按钮 </button>

//在js中动态添加或者移除
const button = document.querySelector('button')
button.disabled = ture //禁用按钮
button.disabled = false  //启用按钮

checked是一个布尔属性,通常用于<input>元素,特别是type='checkbox' 或type='radio'。checked 属性表示复选框或单选框是否被选中。对于 checkbox 来说,它表示是否被选中,对于 radio 来说,它表示是否是当前选中的单选项

javascript 复制代码
<input type="checkbox" checked> 我同意
<input type="radio" name="gender" checked>男

const checkbox = document.querySelector('input[type='checkbox']')
checkbox.checked = true  //选中复选框
checkbox.checked = false //取消选中复选框

select是一个方法,通常用于<select>元素,表示下拉框中的选项

select是一个DOM方法,用于选择<select>元素中的选项

法会将 <select> 元素的一个或多个 <option> 元素设置为选中状态

javascript 复制代码
<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
const selectElement = document.getElementById('mySelect');
selectElement.selectedIndex = 1; // 选择索引为1的选项(即选项2)

checked名和值一样则只简写一个

checked没有则是false

自定义属性: data-属性 开头

获取:对象.dataset.属性

querySelector 获取第一个对象

dataset属性集合

定时器 - 间歇函数:

(匿名函数大显身手)

(函数不用加小括号)

(非得加小括号那么就得加引号)

相关推荐
weixin_527550401 分钟前
初级程序员入门指南
javascript·python·算法
小小小小宇12 分钟前
前端小tips
前端
笨笨马甲18 分钟前
Qt Quick模块功能及架构
开发语言·qt
小小小小宇21 分钟前
二维数组按顺时针螺旋顺序
前端
钡铼技术ARM工业边缘计算机22 分钟前
千元级PLC平台支持梯形图+Python双开发
javascript
夜晚回家32 分钟前
「Java基本语法」代码格式与注释规范
java·开发语言
YYDS31436 分钟前
C++动态规划-01背包
开发语言·c++·动态规划
安木夕39 分钟前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~42 分钟前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html
前端页面仔1 小时前
易语言是什么?易语言能做什么?
开发语言·安全