【JS】Chapter6-Dom 获取属性操作

本文主要是介绍【JS】Chapter6-Dom 获取属性操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

（六）Dom 获取&属性操作

以下的变量可以将 let 改为 const：

let arr = ['red', 'green']
arr.push('pink')
console.log(arr)    // ['red', 'green', 'pink']let person = {uname: 'pink老师',age: 18,gender: '女'
}
person.address = '武汉黑马'
console.log(person)

const 声明的值不能更改，而且 const 声明变量的时候需要里面进行初始化
但是对于引用数据类型，const 声明的变量，里面存的不是值，是地址！

// 以下写法错误，因为他们地址不一样：
const names = []
names = [1,2,3]const obj = {}
obj = {uname: 'pink老师'
}// 应该如下写法：
const names = []
names[0] = 1
names[1] = 2
names[2] = 3const obj = {}
obj.uname = 'pink老师'

为什么const声明的对象可以修改里面的属性？
- 因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
- 建议数组和对象使用 const 来声明
声明变量先给const，如果发现它后面是要被修改的，再改为let
如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let

1. Web API 基本认知

1.1 作用和分类

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

1.2 什么是DOM

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

1.3 DOM树

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

1.4 DOM对象（重要）

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

2. 获取DOM对象

查找元素DOM元素就是利用 JS 选择页面中标签元素。

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

选择匹配的第一个元素

语法：
```
document.querySelector('css选择器')
```
参数：
- 包含一个或多个有效的CSS选择器字符串
返回值：
- CSS选择器匹配的第一个元素，一个 HTMLElement对象。
- 如果没有匹配到，则返回null。
多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数：
- 包含一个或多个有效的CSS选择器字符串
返回值：
- CSS选择器匹配的NodeList 对象集合
例如：
```
document.querySelectorAll('ul li')
```

document.querySelectorAll('css选择器') 得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得。
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
querySelector() 只能选择一个元素，可以直接操作。
querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素。
小括号里面的参数的注意事项：
- 里面写css选择器；
- 必须是字符串，也就是必须加引号。

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

// 根据 id 获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素。获取页面所有div
document.getElementsByTagName('div')
// 根据类名获取元素。获取页面所有类名为w的
document.getElementsByClassName('w')

3. 操作元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
- 对象.innerText 属性
- 对象.innerHTML 属性

3.1 元素 innerText 属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

例子：

const info = document.querySelector('.info')
// 获取标签内部的文字
// console.log(info.innerText)
// 添加/修改标签内部文字内容
info.innerText = '哈哈,你好...'

3.2 元素 innerHTML 属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

例子：

const info = document.querySelector('.info')
// 获取标签内部的文字
// console.log(info.innerHTML)
// 添加/修改标签内部文字内容
info.innerHTML = '哈哈,<strong>你好</strong>...'

4. 操作元素属性

4.1 操作元素常用属性

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

例子：

// 1. 获取元素
const pic = document.querySelector('img')
// 2. 操作元素
pic.src = './images/b02.jpg'
pic.title = '你好'

4.2 操作元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。
- 比如通过轮播图小圆点自动更换颜色样式
- 点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：
- 通过 style 属性操作CSS
- 操作类名(className) 操作CSS
- 通过 classList 操作类控制CSS

通过 style 属性操作CSS

语法：
```
对象.style.样式属性 = 值
```

例子：

const box = document.querySelector('.box')
// 修改元素样式
box.style.width = '200px'
box.style.marginTop = '15px'
box.style.backgroundColor = 'pink'

注意：
- 修改样式通过style属性引出
- 如果属性有-连接符，需要转换为小驼峰命名法
- 赋值的时候，需要的时候不要忘记加css单位
标签选择body时，因为body是唯一的标签，可以直接写 document.body.style。

操作类名(className) 操作CSS

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

语法：

// active 是一个 css 类名
元素.className = 'active'

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

通过 classList 操作类控制CSS

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

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

4.3 操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

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

4.4 自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如：disabled、checked、selected
自定义属性：
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取

例子：

<body><div class="box" data-id="10">盒子</div><script>const box = document.querySelector('.box')console.log(box.dataset.id)</script>
</body>

5. 定时器-间歇函数

5.1 定时器函数介绍

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

5.2 定时器函数基本使用

定时器函数可以开启和关闭定时器

开启定时器
```
setInterval(函数, 间隔时间)
```
- 作用：每隔一段时间调用这个函数
- 间隔时间单位是毫秒

例子：

funcion repeat() {console.log('前端程序员')
}
// 每隔一秒调用 repeat 函数
setInterval(repeat, 1000)

注意：
- 函数名字不需要加括号
- 定时器返回的是一个id数字

关闭定时器

let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)

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

例子：

let timer = setInterval(funcion() {console.log('前端程序员')
}, 1000)
clearInterval(timer)

这篇关于【JS】Chapter6-Dom 获取属性操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

【JS】Chapter6-Dom 获取属性操作

站在巨人的肩膀上

（六）Dom 获取&属性操作

1. Web API 基本认知

1.1 作用和分类

1.2 什么是DOM

1.3 DOM树

1.4 DOM对象（重要）

2. 获取DOM对象

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

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

3. 操作元素内容

3.1 元素 innerText 属性

3.2 元素 innerHTML 属性

4. 操作元素属性

4.1 操作元素常用属性

4.2 操作元素样式属性

4.3 操作表单元素属性

4.4 自定义属性

5. 定时器-间歇函数

5.1 定时器函数介绍

5.2 定时器函数基本使用

相关文章

SpringMVC高效获取JavaBean对象指南

Python打印对象所有属性和值的方法小结

C++中RAII资源获取即初始化

CSS3中的字体及相关属性详解

SQL中JOIN操作的条件使用总结与实践

SpringBoot服务获取Pod当前IP的两种方案

Linux链表操作方式

SpringBoot读取ZooKeeper(ZK)属性的方法实现

Java Multimap实现类与操作的具体示例

Java反射实现多属性去重与分组功能