JavaScript系统学习---05---DOM-获取DOM元素、修改属性

目录

一、 Web API 基本认知

二、 获取DOM元素

三、 设置/修改DOM元素内容

四、设置/修改DOM元素属性

五、定时器-间歇函数

---

一、 Web API 基本认知

1. 作用和分类

• 作用: 就是使用 JS 去操作 html 和浏览器 ；
• 分类：DOM (文档对象模型)、BOM（浏览器对象模型）；

2. 什么是DOM

•  DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API ；
•  白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能 ；
•  DOM作用 ：
  • 开发网页内容特效和实现用户交互 ；

3. DOM树

DOM树是什么 ：

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

 4. DOM对象（重要）

• DOM对象：
  • 浏览器根据html标签生成的 JS对象 ；
  • 所有的标签属性都可以在这个对象上面找到 ；
  • 修改这个对象的属性会自动映射到标签身上 ；
• DOM的核心思想 ：
  • 把网页内容当做对象来处理
• document 对象 ：
  • 是 DOM 里提供的一个对象 ；
  • 所以它提供的属性和方法都是用来访问和操作网页内容的 ；
    • 例：document.write()
  • 网页所有内容都在document里面。

二、 获取DOM元素

根据CSS选择器来获取DOM元素 (重点)

1. 选择匹配的第一个元素

语法：

参数:

        包含一个或多个有效的CSS选择器 字符串

返回值：

        CSS选择器匹配的第一个元素,一个 HTMLElement对象。

        如果没有匹配到，则返回null。

参考文档：

参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

2. 选择匹配多个元素

语法：

参数：

        包含一个或多个有效的CSS选择器 字符串；

返回值：

        CSS选择器匹配的NodeList 对象集合 ；

例如：

得到的是一个伪数组：

• 有长度有索引号的数组 ；
• 但是没有 pop() push() 等数组方法 ；

想要得到里面的每一个对象，则需要遍历（for）的方式获得。

3. 其他获取DOM元素方法（了解）

 三、 设置/修改DOM元素内容

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

1. document.write()

• 只能将文本内容追加到 前面的位置 ；
• 文本中包含的标签会被解析；

2. 元素innerText 属性

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

 3. 元素.innerHTML 属性

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

 4. 小结

（1） 设置/修改DOM元素内容有哪3钟方式？

• document.write() 方法
• 元素.innerText 属性
• 元素.innerHTML 属性

（2）三者的区别是什么？

• document.write() 方法 只能追加到body中
• 元素.innerText 属性 只识别内容，不能解析标签
• 元素.innerHTML 属性 能够解析标签
• 如果还在纠结到底用谁，你可以选择innerHTML

 四、设置/修改DOM元素属性

1. 设置/修改元素常用属性

•  还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片 ；
•  最常见的属性比如： href、title、src 等 ；
•  语法：

•  举例：

  

2. 设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

• 比如通过 轮播图小圆点自动更换颜色样式 ；
• 点击按钮可以滚动图片，这是移动的图片的位置 left 等等 ；

（1）通过 style 属性操作CSS

         语法：

         举例：

        

         注意：

•                         修改样式通过style属性引出 ；
•                         如果属性有-连接符，需要转换为小驼峰命名法 ；
  •                         box.style.backgroundColor = 'hotpink'; (√)
  •                         box.style.background-color = 'hotpink';（×）
•                         赋值的时候，需要的时候不要忘记加css单位；

（2）操作类名(className) 操作CSS

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

语法：

注意：

• 由于class是关键字, 所以使用className去代替
• className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

（3）通过 classList 操作类控制CSS

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

语法：

 注意：toggle（）方法表示 切换 ，有则删除，没有则追加！

（4）使用 className 和classList的区别？

• 修改大量样式的更方便 ；
• 修改不多样式的时候方便 ；
• classList 是追加和删除不影响以前类名；

3. 设置/修改 表单元素 属性

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

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

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

五、定时器-间歇函数

1. 定时器函数介绍

•  网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
•  例如：网页中的倒计时 ；
•  要实现这种需求，需要定时器函数 ；
•  定时器函数有两种，今天我先讲间歇函数；

 2. 定时器的基本使用

 （1）开启定时器

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

 （2）关闭定时器

3. 综合案例（用户协议定时器）

body>
            用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    
    

    我已经阅读用户协议(6)