• 一篇看懂WEB Api之Dom获取属性:

• 一篇看懂WEB Api之Dom获取属性:

---

    

速问速答:

    以后声明变量我们用什么? 

优先使用const,有了变量先给const,如果发现他后面是要更改的,再改为let

为什么const 声明的变量可以修改里面的属性?

因为对象是引用数据类型,里面存储的是地址,里面存的不是值，是地址,可以通过栈区的地址拿到堆区的值; 建议数组和对象使用 const 声明

什么时候使用let 变量?

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

2. 例如 : 一个变量进行加减运算, for循环中的 ++

JavaScript分为:

1.  ECMAscript  ---> js语言基础

2. Web Api  ---> Dom (页面文档对象模型)  和  Bom (浏览器对象模型)

你理解的DOM:

是文档对象模型,是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能

作用: 开发网页内容特效和实现用户交互

什么是DOM树:

DOM树 : 将 HTML文档以树状结构直观的表现出来 称之为文档树或DOM树

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

什么是 DOM对象,怎么创建的?

是浏览器根据html标签生成的 JS对象 ; 所有的标签属性都可以在这个对象上面找到 ; 修改这个对象的属性会自动映射到标签身上

DOM的核心思想:

把网页内容当对象来处理

document 对象是什么 :

是 DOM 里提供的一个对象2. 所以它提供的属性和方法都是用来访问和操作网页内容的  *例：document.write()---> 网页所有内容都在document里面

---

获取Dom对象:

获取一个DOM元素我们使用谁？能直接操作修改吗?

可以使用  querySelector()

获取多个DOM元素我们使用谁？能直接修改吗？如果不能可以怎么做到修改

获取多个使用querySelectorAll() 

不可以修改， 只能通过遍历的方式一次给里面的元素做修改

获取页面标签我们采用的常见方式,他们的区别,小括号需要注意的点?

1. queryselector()   --->  只可以选择一个元素 可直接操作

2. queryselectorAll()   ---> 可以选择多个元素,得到的是伪数组,需要遍历才能得到每一个元素

3.  小括号里 写css 选择器; 必须是字符串 也就是必须加引号' '

   ---

操作元素内容

 目标：能够修改元素的文本更换内容

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

 元素innerText 属性

1. 将文本内容添加/更新到任意标签位置,获取文本的时候包含子元素的标签 ;    ! 文本中包含的标签不会被解析

2. 只能识别文本，不解析标签,如果原标签有文字,直接替换

元素.innerHTML 属性

1. 将文本内容添加/更新到任意标签位置  ! 文本中包含的标签会被解析

2. 能识别文本, 会解析标签，多标签建议使用模板字符 ` `

---

操作元素常用属性

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

    语法：对象.属性 = 值

        2. 通过 style 属性操作CSS

    语法：对象.style.样式属性 = 值 (如果属性有连接符,需转换为小驼峰命名法; 在赋值的时候若有需要需加css单位) 

比如 padding-left, 如何写？element.style.paddingLeft = ‘300px’

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

语法：元素.className ='active'

  注意：

1. 由于class是关键字, 所以使用className去代替

2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

总结:

1. 使用 className 有什么好处？

 可以同时修改多个样式

2. 使用 className 有什么注意事项？

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

通过 classList 操作类控制CSS

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

语法：

总结:

1. 使用 className 和classList的区别？

1. 修改大量样式的更方便

2. 修改不多样式的时候方便

3. classList 是追加和删除不影响以前类名

4.classList 相比较 className的优点是可以不影响原先类名，一般是不覆盖原有类名;    我们可以使用classList 来增加删除类名,比如add()

---

操作 表单元素 属性

1. 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

2. 正常的有属性有取值的 跟其他的标签属性没有任何区别

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

获取: DOM对象.属性名

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

1. 输入框的文本必须要使用  元素.value

2. 设置表单选中状态的语法是：  元素.checked = true

自定义属性

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如：disabled、checked、selected

1. 在html5中推出来了专门的data-自定义属性

                2. 在标签上一律以data-开头

3. 在DOM对象上一律以dataset对象方式获取

---

定时器-间歇函数

1. 定时器函数基本使用:    能够使用定时器函数重复执行代码

        • 开启定时器

作用：每隔一段时间调用这个函数

      间隔时间单位是毫秒

2. 关闭定时器

注意 ! 

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

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

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

1. 定时器函数有什么作用？

可以根据时间自动重复执行某些代码

2. 定时器函数如何开启？

setInterval(函数名, 时间)

3. 定时器函数如何关闭？

案例: