class类/DOM学习

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
1. class 声明与实例化,属性,方法,静态方法与继承的语法学习class（类）

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

  1. class关键字用于创建了类
  2. static关键字可以创建类的属性及方法，且只能由类访问
  3. 在类里未使用static关键字创建的属性及方法为实例属性与实例方法，只能由实例访问
  4. 构造函数constructor(){}，接收实例化时的传参，并在实例化时调用。
  5. constructor(){}里的this是类本身
  6. 继承：在constructor(){}使用super()关联父类的实例属性
  7. 继承：在子类方法中使用super.xxx调用父类的实例方法
  1.   //使用class关键字定义了一个Person类
  2.       class Person {
  3.         // name = "莫莫莫"; //Person类的实例属性，只能由实例访问
  4.         // age = 30; //Person类的实例属性，只能由实例访问
  5.         // gender = "男"; //Person类的实例属性，只能由实例访问
  7.         static testAttribute = "这是一个静态属性, 只有用类去访问。";
  9.         //实例方法，只有由实例对象访问。
  10.         sayHello() {
  11.           console.log("你好！我是" + this.name);
  12.         }
  14.         //静态方法，只有能由类访问。
  15.         static testMethod() {
  16.           console.log("我是静态方法，只能由类访问");
  17.         }
  19.         //在类中使用特殊方法constructor()，这个方法称为构造函数（构造方法）。
  20.         //构造函数会在实例化对象是执行。
  21.         constructor(name, age, gender) {
  22.           //构造函数的形参，用于接收实例对象的实参
  23.           this.name = name;
  24.           this.age = age;
  25.           this.gender = gender;
  26.         }
  27.       }
  29.       //用new关键字实例化一个Person类的对象p1
  30.       //当new Person()时构造函数就执行了，我理解为执行new Person() 就是调用了 constructor(){}，也就是说：new Person() => constructor(){}
  31.       //当创建了对象就调用了函数，所以称之为**构造函数**
  32.       const zhangSan = new Person("张三", 30, "男");
  34.       console.log(zhangSan.name, zhangSan.age, zhangSan.gender);
  35.       //new Person()，圆括号里的参数会传递到构造函数的圆括号里的参数中。
  36.       //new Person("张三",30,"男") -> constructor(name,age,gender){}
  38.       console.log(Person.age); //undefined 实例属性只能由实例访问，不能用类访问。
  39.       console.log(Person.testAttribute); //类属性，只有用类去访问。
  40.       console.log(zhangSan.testAttribute); //undefined 类属性不能用实例对象访问。
  42.       zhangSan.sayHello(); //实例方法由实例调用
  43.       Person.testMethod(); //静态方法由类调用
  45.       console.log("_______________________________________________");
  47.       // 继承---使用关键字extends
  48.       class Animal extends Person {
  49.         constructor(name, age, gender, color) {
  50.           super(name, age, gender);
  51.           //新增实例属性
  52.           this.color = color;
  53.         }
  55.         //重写方法
  56.         sayHello() {
  57.           super.sayHello(); //通过super可引入父类的方法
  58.           console.log(`我是${this.name}父类的方法，也有自己的方法！`);
  59.         }
  60.       } // 子类Animal 继承自 父类Person
  61.       Animal.testMethod(); //Animal可直接访问Person的静态方法
  62.       console.log(Animal.testAttribute); //Animal可直接访问Person的静态属性
  64.       //通过子类实例化对象
  65.       const cat = new Animal("狸花猫", 3, "母", "黄色");
  66.       console.log(cat);
  67.       cat.sayHello();
2. DOM元素的获取方法演示
  1.         /*
  2.             获取DOM元素的方法
  3.                 - 获取一组：document.querySelectorAll()
  4.                 - 获取一个：document.querySelector()
  5.                 - 获取html: document.documentElement
  6.                 - 获取body: document.body
  7.                 - 获取head: document.head
  8.                 - 获取title: document.title
  9.         */
  11.         // 获取一组元素
  12.         const items = document.querySelectorAll('.list > li');
  13.         console.log(items)
  14.         //获取一个元素
  15.         const li = document.querySelector('.list > li');
  16.         console.log(li)
  17.         //获取元素的内容
  18.         console.log(li.textContent)
  19.         //修改元素内容
  20.         console.log(li.textContent = "abc")
  21.         //获取html根元素
  22.         console.log(document.documentElement)
  23.         //获取body元素
  24.         console.log(document.body)
  25.         //获取head元素
  26.         console.log(document.head)
  27.         //获取title元素
  28.         console.log(document.title)
3. DOM遍历的常用方法
  1.     <ul>
  2.       <li>item1</li>
  3.       <li>item2</li>
  4.       <li>item3</li>
  5.       <li>item4</li>
  6.       <li>item5</li>
  7.       <li>item6</li>
  8.     </ul>
  1.       const ul = document.querySelector("ul");
  2.       console.log(ul.nodeType); //查看节点类型
  3.       console.log(ul.textContent); //获取元素文本
  4.       console.log(ul.firstElementChild); //获取第一个子元素
  5.       console.log(ul.firstElementChild.nextElementSibling); //获取子元素的下一个元素
  6.       console.log(ul.lastElementChild); //获取最后一个子元素
  7.       console.log(ul.lastElementChild.previousElementSibling); //获取子元素的上一个元素
  8.       let items = ul.childNodes; //获取ul的所有子节点，包括：元素、文本（这里的文本指换行，不是元素指元素包起来的文本）
  9.       console.log(items);
  10.       items = ul.children; //获取ul的所有元素子节点（这通常是我们想要的）
  11.       console.log(items);
  12.       const li = ul.firstElementChild;
  13.       const pElement = li.parentElement; //获取子元素的父元素，也可以用 parentNode
  14.       console.log(pElement);
【本文转自：美国cn2站群服务器 http://www.558idc.com/mggfzq.htm提供,感谢支持】
更多阅读