DOM对象

144 阅读2分钟

Web API 基本认知

1.声明变量优先用const,
有了变量优先const,要是后面是被修改的,再改为let
2.const 声明的对象可以修改里面的属性?
因为对象是引用类型,里面存的是地址, 只要地址不变,就不会报错
建议: 数组和对象使用const来声明 3.啥时候用let声明变量 如果基本数据类型的值或者引用类型的地址发生变化的时候,需要用let
比如 一个变量进行加减运算,比如for循环中的 i++

作用和分类

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

DOM 是什么

DOM是文档对象类型 操作网页内容,可以开发网页内容特效实现用户交互

DOM树

1.将html文档以树状结构展现出来,我们称文档数为DOM树
作用:文档树直观的体现了标签与标签之间的关系
2.DOM对象怎么创建 浏览器根据html标签生成的 JS对象(DOM对象)
DOM的核心就是把内容当对象来处理
3.document 是什么? 是 DOM 里提供的一个对象 网页所有内容都在document里面

获取DOM元素

1.选择匹配第一个元素

Snipaste_2022-04-16_22-38-34.png 2. 选择匹配的多个元素

Snipaste_2022-04-16_22-41-49.png 得到的是一个伪数组:

有长度有索引号的数组

但是没有 pop() push() 等数组方法

想要得到里面的每一个对象,则需要遍历(for)的方式获得。

操作元素内容

  1. 元素innerText 属性
  2. 将文本内容添加/更新到任意标签位置 3.显示纯文本,不解析标签
    使用 ::对象.innerText

Snipaste_2022-04-16_22-48-02.png 2. 元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签,多标签建议使用模板字符

Snipaste_2022-04-16_22-50-17.png

操作元素属性

语法:

Snipaste_2022-04-16_22-52-22.png 举例:

Snipaste_2022-04-16_22-52-46.png

操作元素样式属性

Snipaste_2022-04-16_22-54-02.png

Snipaste_2022-04-16_22-54-43.png element.style.paddingLeft = ‘300px’ 注:小驼峰命名法
因为我们是样式属性,一定别忘记,大部分数字后面都需要加单位

操作类名(className) 操作CSS

Snipaste_2022-04-16_22-58-09.png 每次用style麻烦,用css类名比较方便 可以同时改多个
由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

通过 classList 操作类控制CSS

Snipaste_2022-04-17_21-57-05.png

操作表单元素 属性

Snipaste_2022-04-17_21-58-58.png

自定义属性

自己写的

Snipaste_2022-04-17_22-00-19.png

开启定时器

Snipaste_2022-04-17_22-01-05.png

Snipaste_2022-04-17_22-01-32.png

关闭定时器

Snipaste_2022-04-17_22-02-47.png

Snipaste_2022-04-17_22-02-58.png