访问器属性、闭包概念以及常用的DOM选择器

访问器属性

<script>
      // 访问器属性
      // 1读属性
      // 2写属性
      let staff = {
        data: { id: 1, name: "heihei", age: 18 },
        get age() {
          return this.data.age;
        },
        set age(a) {
          if (a >= 18 && a < 60) {
            return (this.data.age = a);
          }
          console.log("年龄不规范");
        },
      };
      console.log(staff.age);
      staff.age = 30;
      console.log(staff.age);
      console.log(staff.data.age);
      // 如果只是staff.age走的就是get方法，
      // 但是如果是staff.age=*，走的就是set方法
    </script>

闭包

<script>
      function parent() {
        let m = 500;
        return function (a) {
          let b = 2;
          console.log(a, b, m);
        };
      }
      let f = parent();
      f(1);
      // 调用f(1)之后的结果是1,2,500
      // 理论上m是parent作用域的，但是竟然被调用了
      // parent()调用结束后，m理应被释放，结果却没有
      // 当父函数被调用后，如果父函数的成员被子函数引用，则这个成员不会被释放
      //这也就是闭包消耗内存的原因
      // 闭包：就是一个访问“自由变量”的函数
    </script>

DOM 选择器

1.document.querySelectorAll(“ul > li”)：返回满足条件的元素集合,括号里面支持 css 写法,返回的是一个类数组；
2.document.querySelector(“#id”):返回的就是满足条件的第一个元素；
3.document.body:获取 body；
4.document.head：获取头部；
5.document.title:获取标题；
6.document.forms;获取 html 中的所有表单
document.forms.name 获取 html 中名字为 name 的表单 name 可以用 id

let ul = document.querySelector(“.list”);
7.ul.childNodes:查看 ul 中的所有子节点（不区分节点类型）甚至包括换行空格
8.ul.children：返回元素类型的节点
9.ul.lastElementChild:获取 ul 中的最后一个子元素
10.ul.firstElementChild：获取 ul 中第一个子元素
11.ul.firstElementChild.nextElementSibling:获取第一个元素的下一个兄弟元素
12.ul.lastElementChild.previousElementSibling:获取最后一个元素的上一个兄弟元素

页面 CURL

13.append:在父级元素最后追加一个子元素
14.prepend:在父级元素最前追加一个子元素
15.insertAdjacentElement(“插入位置”，元素)
插入位置有四个
1.afterBegin:开始标签之后，第一个元素
2.beforeBegin:开始标签之前，是他的前一个兄弟元素
3.afterEnd:结束标签之后，他的下一个兄弟元素
4.beforeEnd:结束标签之前，它的最后一个子元素

如果是自定义属性，该怎么获取：

<input type="" id="user" data-email="12" />

一般情况下通过找到该元素获取 id 值通过上面的 2 方法：
document.querySelector(“input”).id;
但是获取自定义属性 data-email 就不能这么干
需要 document.querySelector(“input”).dataset.email;
注意这个自定义属性必须是 data-这种形式的；

class 操作

一般给元素添加 class 最初的方法是：
document.querySelector(“h2”).classsName = “red”; //red 为设定好的叫做 red 的类样式；但是这种方法已经被淘汰了；现在采用如下方式：
h2 = document.querySelector(“h2”);
h2.classList.add(“red”);

h2.style.fontSize 可以查看元素的内联元素样式；
但是如果不是内敛样式元素，浏览器自己的样式呢就需要其他方式：
styles = window.getComputedStyle(h2 , null);
这就获取了这个元素的所有样式，例如我们想看 height
styles.getPropertyValue(“height”);