Blogger Information
Blog 18
fans 0
comment 2
visits 8741
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
访问器属性原理与应用场景,获取DOM元素的2个方法
弦知音的博客
Original
430 people have browsed it

1. 访问器属性原理与应用场景

  1. let user = {
  2. //常规属性
  3. data: {
  4. name: "唐太宗",
  5. age: 18,
  6. },
  7. // 将传统的方法,修改一个伪装成属性的方法
  8. get age() {
  9. return this.data.age;
  10. },
  11. //设置年龄,将方法修改成一个属性
  12. set age(age) {
  13. if (age >= 18 && age <= 120) {
  14. this.data.age = age;
  15. } else {
  16. console.log("非法数据");
  17. }
  18. },
  19. };
  20. console.log(user.age);
  21. user.age = 150;
  22. console.log(user.age);
  23. // 访问器属性,本质上还是方法,调用时,用的属性访问的语法

2. 获取DOM元素的2个方法

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>获取DOM元素</title>
  8. </head>
  9. <body>
  10. <ul>
  11. <li class="item">item1</li>
  12. <li class="item">item2</li>
  13. <li class="item">item3</li>
  14. <li class="item">item4</li>
  15. <li class="item">item5</li>
  16. </ul>
  17. <script>
  18. let items = document.querySelectorAll('.item'); //返回数组,获取DOM里面class为‘.item’的所有元素
  19. let length = items.length;
  20. for(i=0;i<length;i++){
  21. items[i].style.color='red';
  22. }
  23. let item = document.querySelector('.item') //返回第一个匹配的元素
  24. item.style.color='blue';
  25. // querySelectorAll 批量获取元素,返回数组
  26. // querySelector 获取符合条件的第一个元素
  27. </script>
  28. </body>
  29. </html>

DOM

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post