访问器属性
用访问器属性改造后：调用和设置方法更简单
访问器属性，本质上还是方法，调用时，用的是属性访问的语法
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>访问器属性</title> </head> <body> <script> let users = { data: { id: 1, username: "游戏人生", salary: "9999", }, // 获取工资 getSalary() { return this.data.salary; }, // 设置工资 setSalary(salary) { if (salary > 100 && salary < 1000000) { this.data.salary = salary; } else { console.log("工资收入有误"); } }, }; // 打印查看 console.log(users.getSalary()); users.setSalary(6000); console.log(users.getSalary()); // 上面收入的获取方法：console.log(users.data.salary) // 访问器属性改造示例 // 改造后的获取方法：console.log(users.salary) // 用访问器属性改造后：调用和设置更简单 // 访问器属性，本质上还是方法，调用时，用的是属性访问的语法 users = { data: { id: 1, username: "游戏人生", salary: "9999", }, // 获取username get username() { return this.data.username; }, // 获取工资 get salary() { return this.data.salary; }, // 设置工资 set salary(salary) { if (salary > 100 && salary < 1000000) { this.data.salary = salary; } else { console.log("工资收入有误"); } }, }; console.log("---------------"); console.log(users.username); users.salary = "6000"; console.log(users.salary); </script> </body></html>
应用场景：
1、修改访问器属性动态修改相关联的数据属性。
2、监听访问器属性的修改去操作其它业务逻辑。
dom元素的二个重要方法
1.获取一组元素用选择器：querySelectorAll(selector)
2.获取一个元素用选择器:querySelector
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>获取dom元素</title> </head> <body> <ul class="list"> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> </ul> <script> // 1.获取一组元素用选择器querySelectorAll(selector) // 将所有的li.item变成红色 // console.log(document); console.dir(document); // querySelectorAll(selector):选择器，功能是返回一组元素 // console.dir(document.querySelectorAll); // 拿到一组item console.dir(document.querySelectorAll(".item")); const items = document.querySelectorAll(".item"); for (let i = 0; i < items.length; i++) { // 遍历每一行的item console.log(items[i]); // 设置前景色为红色 items[i].style.color = "red"; } // 用forEach更容易，改为蓝色 items.forEach((item) => (item.style.color = "blue")); console.log("----------------"); // 2.获取一个元素用选择器:querySelector // querySelector返回的是一组元素中的第一个 // 将第二个改为红色 const firstItem = document.querySelector(".item"); console.log(firstItem); firstItem.style.color = "green"; // 获取页面中的唯一元素的方法很多。示例 console.log(document.querySelector("body")); console.log(document.body); console.log(document.head); console.log(document.title); // 获取html,专门用documentElement console.log(document.documentElement); </script> </body></html>
