class类/DOM学习

1. class 声明与实例化,属性,方法,静态方法与继承的语法

学习class（类）

为了实现批量创建对象简化代码我们应该使用类，类是我们创建对象的模板。

1. class关键字用于创建了类
2. static关键字可以创建类的属性及方法，且只能由类访问
3. 在类里未使用static关键字创建的属性及方法为实例属性与实例方法，只能由实例访问
4. 构造函数constructor(){}，接收实例化时的传参，并在实例化时调用。
5. constructor(){}里的this是类本身
6. 继承：在constructor(){}使用super()关联父类的实例属性
7. 继承：在子类方法中使用super.xxx调用父类的实例方法

  //使用class关键字定义了一个Person类
      class Person {
        // name = "莫莫莫"; //Person类的实例属性，只能由实例访问
        // age = 30; //Person类的实例属性，只能由实例访问
        // gender = "男"; //Person类的实例属性，只能由实例访问
        static testAttribute = "这是一个静态属性, 只有用类去访问。";
        //实例方法，只有由实例对象访问。
        sayHello() {
          console.log("你好！我是" + this.name);
        }
        //静态方法，只有能由类访问。
        static testMethod() {
          console.log("我是静态方法，只能由类访问");
        }
        //在类中使用特殊方法constructor()，这个方法称为构造函数（构造方法）。
        //构造函数会在实例化对象是执行。
        constructor(name, age, gender) {
          //构造函数的形参，用于接收实例对象的实参
          this.name = name;
          this.age = age;
          this.gender = gender;
        }
      }
      //用new关键字实例化一个Person类的对象p1
      //当new Person()时构造函数就执行了，我理解为执行new Person() 就是调用了 constructor(){}，也就是说：new Person() => constructor(){}
      //当创建了对象就调用了函数，所以称之为**构造函数**
      const zhangSan = new Person("张三", 30, "男");
      console.log(zhangSan.name, zhangSan.age, zhangSan.gender);
      //new Person()，圆括号里的参数会传递到构造函数的圆括号里的参数中。
      //new Person("张三",30,"男") -> constructor(name,age,gender){}
      console.log(Person.age); //undefined 实例属性只能由实例访问，不能用类访问。
      console.log(Person.testAttribute); //类属性，只有用类去访问。
      console.log(zhangSan.testAttribute); //undefined 类属性不能用实例对象访问。
      zhangSan.sayHello(); //实例方法由实例调用
      Person.testMethod(); //静态方法由类调用
      console.log("_______________________________________________");
      // 继承---使用关键字extends
      class Animal extends Person {
        constructor(name, age, gender, color) {
          super(name, age, gender);
          //新增实例属性
          this.color = color;
        }
        //重写方法
        sayHello() {
          super.sayHello(); //通过super可引入父类的方法
          console.log(`我是${this.name}父类的方法，也有自己的方法！`);
        }
      } // 子类Animal 继承自 父类Person
      Animal.testMethod(); //Animal可直接访问Person的静态方法
      console.log(Animal.testAttribute); //Animal可直接访问Person的静态属性
      //通过子类实例化对象
      const cat = new Animal("狸花猫", 3, "母", "黄色");
      console.log(cat);
      cat.sayHello();

2. DOM元素的获取方法演示

        /*
            获取DOM元素的方法
                - 获取一组：document.querySelectorAll()
                - 获取一个：document.querySelector()
                - 获取html: document.documentElement
                - 获取body: document.body
                - 获取head: document.head
                - 获取title: document.title
        */
        // 获取一组元素
        const items = document.querySelectorAll('.list > li');
        console.log(items)
        //获取一个元素
        const li = document.querySelector('.list > li');
        console.log(li)
        //获取元素的内容
        console.log(li.textContent)
        //修改元素内容
        console.log(li.textContent = "abc")
        //获取html根元素
        console.log(document.documentElement)
        //获取body元素
        console.log(document.body)
        //获取head元素
        console.log(document.head)
        //获取title元素
        console.log(document.title)

3. DOM遍历的常用方法

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>

      const ul = document.querySelector("ul");
      console.log(ul.nodeType); //查看节点类型
      console.log(ul.textContent); //获取元素文本
      console.log(ul.firstElementChild); //获取第一个子元素
      console.log(ul.firstElementChild.nextElementSibling); //获取子元素的下一个元素
      console.log(ul.lastElementChild); //获取最后一个子元素
      console.log(ul.lastElementChild.previousElementSibling); //获取子元素的上一个元素
      let items = ul.childNodes; //获取ul的所有子节点，包括：元素、文本（这里的文本指换行，不是元素指元素包起来的文本）
      console.log(items);
      items = ul.children; //获取ul的所有元素子节点（这通常是我们想要的）
      console.log(items);
      const li = ul.firstElementChild;
      const pElement = li.parentElement; //获取子元素的父元素，也可以用 parentNode
      console.log(pElement);