抽象基类的继承、DOM、JavaScript事件

目录

一、继承

1、抽象基类（抽象类）

2、super的使用

（1）super在类继承过程中代表基类

（2）使用super时应注意的问题

 二、DOM

1、WebAPI

2、JavaScript的组成

3、DOM

4、DOM的应用

（1）通过document获取页面的元素

（2）HTML5中新增的获取元素的方法

（3）document对象的属性

三、事件

1、事件的三要素

 2、页面元素的操作内容

 3、操作元素的属性

 4、操作元素的样式

（1）操作元素的style属性

（2）操作元素的className属性

---

一、继承

1、抽象基类（抽象类）

（1）抽象类：有些类不能实例化，但可以专门用于其他类的继承

在抽象基类中定义的方法，在其子类中会被覆盖（重写），通常抽象基类中的方法没有具体的实现

Person、Animal都是抽象基类,实例化没有实际意义,专门用于派生子类

                           

 （2）JavaScript中实现抽象基类：在JS中没有专门支持抽象类的语法，但是可以通过new.target来实现

class Animal{
    constructor(){
        if(new.target === Animal){  //new.target代表的是新创建的对象的类型
            throw new Error('抽象类不能实例化')
        }
    }
    eat(){}
    sleep(){}
}
let a1 = new Animal()  //创建抽象基类的实例（抽象类得实例化）

2、super的使用

（1）super在类继承过程中代表基类

（2）使用super时应注意的问题

A：super可以在派生类的构造方法中使用（调用基类的构造方法）

B：在派生类中可以通过super调用基类的成员方法

C：在类的构造方法中，不能在调用super（）之前使用this；在之前使用系统运行会报错

D：如果在派生类中显式的定义了构造方法，则要么必须在其中调用super()，要么在其中返回一个对象。

class Animal{
    constructor(){
        if(new.target === Animal){  //new.target代表的是新创建的对象的类型
            throw new Error('抽象类不能实例化')
        }
    }
    eat(){}
    sleep(){}
}
  
class Dog extends Animal{
    constructor(nickname){
        //this.name = nickname
        super()   //在子类的构造方法中使用
        this.name = nickname
    }
    eat(){
        console.log('狗在啃骨头')
    }
    sleep(){
        console.log('狗趴在地上睡觉')
    }
}
let d1 = new Dog('小黑');
d1.eat()
d1.sleep()

 二、DOM

1、WebAPI

WebAPI：浏览器提供的一套操作浏览器功能和页面元素的接口（包括DOM、BOM）

2、JavaScript的组成

（1）核心：ECMAScript5 -- ECMAScript2015（ES6）-- ECMAScript2016

（2）DOM：文档对象模型

（3）BOM：浏览器对象模型

3、DOM

DOM（Document Object Model）：文档对象模型。W3C推荐标准的标记语言是HTML，在DOM中把HTML文档看做是一棵树结构，文档中得标签、标签的属性、标签的内容都是树的结点。

（1）文档（document）：一个页面（html文件）就是一个文档

（2）元素（element）：页面中的标签

（3）节点（node）：页面中的所有元素（包括元素节点、属性节点、内容节点、注释节点等）。节点都是对象，都有属性和方法

4、DOM的应用

（1）通过document获取页面的元素

A、通过id获取

doucumen.getElementById( 'ID属性值' )

因为元素的id属性值