构造函数和dom元素的常用方法

构造函数的基本概念

• 任何一个函数都有一个原型属性: prototype ，即使是空函数

function f1() {}
console.dir(f1);

• 声明一个构造函数,函数名首字母大写

function User() {};

• 初始化对象,给这个对象添加一个自定义属性,用来和其它实例进行区分

function User(name) {
this.name = name;
};

• 创建对象的过程,就叫“类的实例化”

const user = new User('jack');

• 需要被所有类实例共享的成员,应该写到构造函数的原型上

User.prototype.age = 18;
console.log(user.age);

• 属性通常不应该共享的,它是区分不同对象的标志,方法更适合共享;方法要写在构造函数体外会被共享，写在内是私有，不会被共享

User.prototype.show = function () {
   return { name: this.name };
};
console.log(user.show());

类与继承

类的基本概念

• 构造函数模拟类

class User {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
}

• 静态方法: 不需要通过对象调用,直接用类调用就行

static show() {
     return this.tell(this.gender);
}
static gender = "fale";
static tell(gender) {
     return gender;
 }
console.log(User.show());

• 私有成员,只能在本类中使用,类外,子类中都不能用

#money = 100;

类的继承

• 子类扩展父类的功能,可以拥有自己的属性或方法
• 子类中可以访问并继承父类的构造方法,原型方法,静态方法,不能访问私有成员

class User1 extends User {
     constructor(name, age, money) {
     //super用来继承父类属性
     super(name, age);
     this.money = money;
  }
}
//子类继承父类的静态方法
console.log(User1.show());

dom元素的增删改查

• 获取元素

//获取第一个元素
document.querySelector()
//获取全部元素
document.querySelectorAll()

• 创建元素

document.createElement();

• 增加元素

let htmlStr = "<li>item5</li>";
lis.insertAdjacentHTML("beforeEnd", htmlStr);

• 增加大量元素 使用文档片断

const frag = new DocumentFragment();
for (i = 0; i < 5; i++) {
   const li = document.createElement("li");
   li.textContent = "add " + (i + 1);
   //将生成的节点先临时挂载到文档片断中
   frag.appendChild(li);
}
lis.appendChild(frag);

• 更新元素

let h3 = document.createElement("h3");
h3.innerHTML = "123333";
lis.replaceChild(h3, document.querySelector("li:last-of-type"));

• 移除元素

lis.removeChild(document.querySelector("span"));

• 遍历查询

//获取所有元素
console.log(lis.children);
//获取所有元素的数量
console.log(lis.childElementCount);
//获取第一个子元素
console.log(lis.firstElementChild);
//获取最后一个子元素
console.log(lis.lastElementChild);