Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 构造函数和dom操作
Blogger Information
Blog 37
fans 0
comment 0
visits 34818
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
构造函数和dom操作
手机用户1607314868
Original
653 people have browsed it

构造函数

构造一个函数都有一个原型属性：prototype
本质上构造函数跟普通函数是没有区别。
构造函数的特征：

  • prototype对于普通函数没用，对构造函数才有用
  • 构造函数是对象工厂，是用来创建对象的
  • 对象也叫实例，实际案例
  • js中没有 类 的概念，他是基于原型的语言，所以可以简单的将构造函数当成类
  • 构造函数必须使用new 来调用，普通函数不用
  • new的过程就是 类的实例化过程，就是创建一个对象的过程
  • 创建对象的过程就叫类的实例化
  1. //声明一个构造函数
  2. function User(name,email){
  3. this.name=name;
  4. this.email=email;
  5. }
  6. const user=new User("小红","12@qq.com");
  7. user.__proto_num=123;
  8. console.log(user.num);
  9. console.dir(User.prototype);

可以发现构造函数的prototype内也有一个num属性。
实例的原型永远指向它的构造函数的原型，实例的原型从构造函数的原型继承成员(属性或方法);
user.__proto__===User.prototype;
注意：需要被所有实例共享的成员，应该写到构造函数的原型上
User.prototype.salary="123";
属性通常不应该共享的，他是区分不同对象的标志，方法更适合共享

  1. User.prototype.show=function(){
  2.   return {name:this.name,email:this.email};
  3. }

es6中的类

es6中的类特点

  • 使用class声明类
  • 构造方法使用constructor
  • 静态方法无需实例调用，类就可直接调用，使用static声明
  • 私有成员，不能被外界调用，子类也不可以使用 #声明。如果想拿到私有成员可以使用访问器属性来调用
  1. class User2{
  2.         //代表构造方法
  3.   constructor(name,email){
  4.             this.name=name;
  5.             this.email=email;
  6.         }
  7. //原型方法
  8.    show(){
  9. return {name:this.name,email:this.email}
  10. }
  11.  //静态方法：不需要通过对象调用，直接用类调用就行
  12. static fetch(){
  13.   return this.hello(this.userName);
  14. }
  15.   static userName="小明";
  16.  static hello(name){
  17.      return name;
  18. }
  19.  // 私有成员，只能再本类中使用，类外，子类不能调用
  20.         #age=20;
  21.         set age(num){
  22.            this.#age=num;
  23.         }
  24.         get age(){
  25.             return this.#age;
  26.         }
  27.     }
  28. const user1=new User("累累","12@qq.com");
  29. console.log(user1.show());
  30. console.log(User2.fetch());
  31. user1.age=30;
  32. console.log(user1.age);
类的继承

子类继承父类，需要注意this的指向，使用super来调用父类的构造

  1. class Child extends User2{
  2.        //子类继承父类的功能，可以拥有自己的属性或方法
  3.        //子类不饿能访问父类的私有成员
  4.        constructor(name,email,gender){
  5.         //调用父类构造方法，确定this指向
  6.            super(name,email);
  7.            this.gender=gender;
  8.        }
  9.        show(){
  10.            return {name:this.name,email:this.email,gender:this.gender};
  11.        }
  12.    } 
  13.   const child=new Child("工人","123@qq.com",'男');
  14.   console.log(child.show());

dom操作

dom元素获取

1.querySelectorAll获取全部元素返回数组。
2.querySelector获取单个元素

  1. <body>
  2.   <ul id="list">
  3.       <li class="item">item1</li>
  4.       <li class="item">item2</li>
  5.       <li class="item">item3</li>
  6.       <li class="item">item4</li>
  7.       <li class="item">item5</li>
  8.   </ul>
  9.     <script>
  10.         // 1.获取dom元素 返回所有li
  11.         const lis=document.querySelectorAll("#list li");
  12.         // lis是一个类数组
  13.         let lisArr=Array.from(lis);//改为数组
  14.         console.log([...lis]);//转为数组
  15.         //lis类数组可以直接使用forEach()遍历
  16.         lis.forEach(function(item){
  17.             console.log(item);
  18.         });
  19.      //2.返回一个
  20.      let first=document.querySelector("#list li");

快速获取某个元素

  1. 获取html元素
    document.documentElement;
  2. 获取head元素
    document.head;
  3. 获取body元素
    document.body;
  4. 获取title
    document.title;
  5. 获取表单
    document.froms[0]或者document.froms.item(0);
dom的增删改查

//创建一个元素

  1.         const body=document.body;
  2.         const ul=document.createElement("ul");
  3.         ul.classList.add("list");
  4.         body.appendChild(ul);
  6.         const li=document.createElement("li");
  7.         li.innerHTML="item1";
  8.         ul.appendChild(li);
  9.         //将html字符串直接解析为dom元素
  10.         let htmlStr='<i style="color:red">item2</i>';
  11.         //htmlStr也可以写入多条语句
  12.         ul.insertAdjacentHTML("beforeEnd",htmlStr);
  14.         //如果大量添加元素应该使用文档片段完成
  15.         const frag=new DocumentFragment();
  16.         for(let i=0;i<5;i++){
  17.             const li=document.createElement("li");
  18.             li.textContent="item"+(i+1);
  19.             frag.append(li);
  20.         }


更新

  1.        let h3=document.createElement("h3");
  2.        h3.innerHTML="你好！";
  3.        document.querySelector("li:nth-of-type(1)").replaceWith(h3);
  4.        //父类操作
  5.        ul.replaceChild(h3,document.querySelector("li:last-of-type"));


删除

  1.   ul.removeChild(document.querySelector(".list h3"));

查询

  1.     //查询
  2.     // 获取所有子元素
  3. console.log(ul.children);
  4. // 获取子元素数量
  5. console.log(ul.children.length);
  6. console.log(ul.childElementCount);
  7. //第一个元素
  8. console.log(ul.firstElementChild);
  9. //最后一个
  10. console.log(ul.lastElementChild);
  11. //父节点
  12. console.log(ul.lastElementChild.parentElement);
  13. //前一个兄弟
  14. const er=document.querySelector(".list li:nth-of-type(2)");
  15. console.log(er.previousElementSibling.innerHTML);
  16. //后一个兄弟
  17. console.log(er.nextElementSibling.innerHTML);

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post