Web APIs--Dom获取&属性操作

目录

1.DOM（操作网页内容、用户交互）

2.DOM对象获取（querySelect(‘’)、querySelectAll(‘’)）

总结：

3.操作元素内容（修改元素的文本更换内容）

1. 元素innerText 属性

2.元素.innerHTML 属性

3.总结

4.操作元素属性

1.常用属性（href、title、src 等）

2.操作元素样式属性(轮播图)

（通过 style 、通过操作类名(className) 、 通过 classList 操作类控制CSS）

3. 操作表单元素 属性

4.自定义

5.定时器（间歇函数）

1.定时器函数可以开启（setInterval(函数，间隔时间)）

2.定时器函数可以关闭（clearInterval(id编号)）

6.案例（用户阅读60s才可以点确认）

---

1. 有了变量先给const，如果发现它后面是要被修改的，再改为let

2.为什么const声明的对象可以修改里面的属性？

因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错

建议数组和对象使用 const 来声明

3.什么时候使用let声明变量？

如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let

比如 一个变量进行加减运算，比如 for循环中的 i++

作用: 就是使用 JS 去操作 html 和浏览器

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

1.DOM（操作网页内容、用户交互）

DOM:用来呈现以及与任意 HTML 或 XML文档交互的API

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

DOM树：将 HTML 文档以树状结构直观的表现出来 （描述网页内容关系的名词）

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

DOM对象：（ 浏览器根据html标签生成的 JS对象（DOM对象） ）

标签属性和对象一一对应，相互作用 ------ 核心思想（把网页内容当做对象来处理）

document 对象 是 DOM 里提供的一个 对象 ， 它提供的属性和方法都是 用来访问和操作网页内容的

  例：document.write()  网页所有内容都在document里面

2.DOM对象获取（querySelect(‘’)、querySelectAll(‘’)）

1.匹配第一个元素（没有匹配到，返回null）

2. 选择匹配的多个元素（返回： CSS选择器匹配的 NodeList 对象集合 ）

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

总结：

3.操作元素内容（修改元素的文本更换内容）

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。

方法：1. 对象.innerText 属性   2. 对象.innerHTML 属性

1. 元素innerText 属性

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

显示纯文本， 不解析标签

2.元素.innerHTML 属性

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

会解析标签 ，多标签建议使用模板字符

3.总结

4.操作元素属性

1.常用属性（href、title、src 等）

2.操作元素样式属性(轮播图)

（通过 style 、通过操作类名(className) 、 通过 classList 操作类控制CSS）

修改的样式比较多，通过style属性修改比较繁琐，可以通过借助于css类名的形式（className）

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

3. 操作表单元素 属性

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代 表移除了该属性( 比如： disabled、checked、selected)

ipt. checked=true//勾选

button. disabled=true//禁用

4.自定义

5.定时器（间歇函数）

目标：能够说出定时器函数在开发中的使用场景

网页中经常需要一种功能：每隔一段时间需要 自动 执行一段代码，不需要手动去触发（定时器）

setInterval(函数，间隔时间)

每个一段时间调用这个函数（单位，毫秒）

1.定时器函数可以开启（setInterval(函数，间隔时间)）

setInterval(function(){//写匿名函数
   console.log（‘一秒执行一次’）
},1000)//一秒1000毫秒，时间可以自定义

//不写匿名函数
function fn(){
    console.log('一秒执行一次')
}

setInterval(fn,1000)//setInterval(函数，间隔时间)
setInterval(fn(),1000)//不要这样写
setInterval('fn()',1000)//可以执行，不建议写

2.定时器函数可以关闭（clearInterval(id编号)）

每个定时器有自己的编号（防止互相干扰）

定时器返回的是id数字（每个定时器都是独一无二的）

实际用时，是比如，鼠标经过开，鼠标离开关

let n = setInterval(fn,1000)//用let
console.log(n)//打印id编号
clearInterval(n)//关闭这个编号的定时器，不会影响其他的

关了以后再开.   重新赋值，不要用const

n = setInterval(fn,1000)

6.案例（用户阅读60s才可以点确认）

1.先把按钮禁用（disabled）

<button class ='btn' disabled>我已经阅读用户协议(60)</button>

2.获取元素

const btn = document.querySelector(.'btn')

3.倒计时

//倒计时
let i =5
//开启定时器
let n= setInterval(function(){
   i--
   btn.innerHTML=`我已经阅读用户协议（${i}）`
   if(i==0){
     clearInterval(n)//关闭定时器
     //定时器停了，按钮就可以开了
     btn.disabled=false
     btn.innerHTML='同意'
}
},1000)

2.3写在<scritpe>里头