博客列表 >构造函数和dom元素的常用方法

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

陈强
陈强原创
2021年01月07日 15:18:41674浏览

构造函数的基本概念

  • 任何一个函数都有一个原型属性: prototype ,即使是空函数
  1. function f1() {}
  2. console.dir(f1);

  • 声明一个构造函数,函数名首字母大写
  1. function User() {};
  • 初始化对象,给这个对象添加一个自定义属性,用来和其它实例进行区分
  1. function User(name) {
  2. this.name = name;
  3. };
  • 创建对象的过程,就叫“类的实例化”
  1. const user = new User('jack');
  • 需要被所有类实例共享的成员,应该写到构造函数的原型上
  1. User.prototype.age = 18;
  2. console.log(user.age);

  • 属性通常不应该共享的,它是区分不同对象的标志,方法更适合共享;方法要写在构造函数体外会被共享,写在内是私有,不会被共享
  1. User.prototype.show = function () {
  2. return { name: this.name };
  3. };
  4. console.log(user.show());

类与继承

类的基本概念

  • 构造函数模拟类
  1. class User {
  2. constructor(name, age) {
  3. this.name = name;
  4. this.age = age;
  5. }
  6. }
  • 静态方法: 不需要通过对象调用,直接用类调用就行
  1. static show() {
  2. return this.tell(this.gender);
  3. }
  4. static gender = "fale";
  5. static tell(gender) {
  6. return gender;
  7. }
  8. console.log(User.show());
  • 私有成员,只能在本类中使用,类外,子类中都不能用
  1. #money = 100;

类的继承

  • 子类扩展父类的功能,可以拥有自己的属性或方法
  • 子类中可以访问并继承父类的构造方法,原型方法,静态方法,不能访问私有成员
  1. class User1 extends User {
  2. constructor(name, age, money) {
  3. //super用来继承父类属性
  4. super(name, age);
  5. this.money = money;
  6. }
  7. }
  8. //子类继承父类的静态方法
  9. console.log(User1.show());

dom元素的增删改查

  • 获取元素
  1. //获取第一个元素
  2. document.querySelector()
  3. //获取全部元素
  4. document.querySelectorAll()
  • 创建元素
  1. document.createElement();
  • 增加元素
  1. let htmlStr = "<li>item5</li>";
  2. lis.insertAdjacentHTML("beforeEnd", htmlStr);
  • 增加大量元素 使用文档片断
  1. const frag = new DocumentFragment();
  2. for (i = 0; i < 5; i++) {
  3. const li = document.createElement("li");
  4. li.textContent = "add " + (i + 1);
  5. //将生成的节点先临时挂载到文档片断中
  6. frag.appendChild(li);
  7. }
  8. lis.appendChild(frag);
  • 更新元素
  1. let h3 = document.createElement("h3");
  2. h3.innerHTML = "123333";
  3. lis.replaceChild(h3, document.querySelector("li:last-of-type"));
  • 移除元素
  1. lis.removeChild(document.querySelector("span"));
  • 遍历查询
  1. //获取所有元素
  2. console.log(lis.children);
  3. //获取所有元素的数量
  4. console.log(lis.childElementCount);
  5. //获取第一个子元素
  6. console.log(lis.firstElementChild);
  7. //获取最后一个子元素
  8. console.log(lis.lastElementChild);
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议