search

博客列表 >js急速入库之三（构造函数与原型/类/及dom操作）

js急速入库之三（构造函数与原型/类/及dom操作）

培(信仰)
培(信仰)原创
2021年01月15日 23:18:42732浏览

js急速入库之三（构造函数与原型/类/及dom操作）

构造函数和原型

任何一个函数都有一个原型属性：prototype，该属性是一个指针，指向一个对象，该对象称之为原型对象（可以使用这个原型对象帮助我们在js中实现继承）
原型对象上默认有一个属性constructor,该属性也是一个指针，指向其相关联的构造函数。
调用构造函数实例化对象，都拥有一个内部属性，指向原型对象。其实例对象能够访问原型对象上的所有属性和方法
简言之：每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数

  1.       //任何一个函数都有一个原型属性：prototype
  2.       function f1() {}
  3.       console.log(f1);
  4.       //prototype对普通函数没用，对构造函数才有用
  5.       //构造函数是"对象工厂"，是用来创建对象的
  6.       //对象也叫做“实例”，实例：实际案例 是具体的。
  7.       //js中没有“类”的概念，他是基于原型的语言，所以可以将构造函数当成类
  8.       //构造函数必须使用“new”来调用，普通函数不用
  9.       //new的过程就是类的实例化过程，就是创建一个对象的过程
  10.       //创建类的过程，就叫“类的实例化”
  11.       // 声明一个构造函数
  12.       function User(name, email) {
  13.         //1. 创建出一个新对象，用this来表示（伪代码）
  14.         // const this = new User;
  16.         //2. 初始化对象，给这个对象添加自定义属性，用来和其他实例进行区分
  17.         this.name = name;
  18.         this.email = email;
  19.         //3. 返回这个对象
  20.         // return this;
  21.       }
  22.       const user = new User("admin", "admin@php.cn");
  23.       console.log(user instanceof User);
  24.       console.log(user);
  25.       user.__proto__.salary = 8899;
  26.       console.log(user.salary);
  28.       const user1 = new User("tp", "tp@php.cn");
  29.       console.log(user1);
  30.       console.dir(User);
  31.       //实例的原型永远指向他的构造函数的原型，实例的原型从构造函数的原型继承成员（属性/方法）
  32.       console.dir(user1.__proto__ === User.prototype);
  34.       //需要被所有的类实例共享的成员，应该写在构造函数的原型上
  35.       User.prototype.nation = "CHINA";
  36.       console.log(user.nation, user1.nation);
  37.       //属性通常不应该共享，是区分不同对象的标志，方法更适合共享
  38.       User.prototype.show = function () {
  39.           return {name:this.name,email:this.email,salary:this.salary};
  40.       }
  41.       console.log(user.show());
  42.       console.log(user1.show());

类与继承

  1.         //构造函数模拟类
  2.         const User = function (name, email) {
  3.           this.name = name;
  4.           this.email = email;
  5.         };
  6.         //原型方法
  7.         User.prototype.show = function () {
  8.           return { name: this.name, email: this.email };
  9.         }
  11.         const user = new User("tp", "tp@php.cn");
  12.         console.log(user.show());
  14.         // es6 中的类来改写
  15.         class User1 {
  16.           // 类的构造方法
  17.           constructor(name, email) {
  18.             this.name = name;
  19.             this.email = email;
  20.           }
  21.           //原型方法，使用类实例/对象来调用
  22.           show() {
  23.             return { name: this.name, email: this.email,age: this.#age};
  24.           }
  25.           //静态方法：不需要通过对象调用，直接用类调用
  26.           static fetch(){
  27.               //静态方法中的this指向类
  28.               // return { name: this.name, email: this.email };
  29.               return this.hello(this.userName);
  30.           }
  31.           static userName = 'xxx';
  32.           static hello(name){
  33.               return 'hello '+name;
  34.           }
  36.           //私有成员，只能在本类中使用，类外，子类中都不能用
  37.           #age = 40;
  38.           //声明为私有主要是访问限制
  39.           //访问器属性
  40.           set age(value){
  41.               if (value >= 18 && value <= 60){
  42.                   this.#age = value;
  43.               } else {
  44.                   throw new Error("年龄必须在18-60之间");
  45.               }
  46.           }
  47.           get age(){
  48.               return this.#age;
  49.           }
  50.         }
  52.         const user1 = new User1("tp", "tp@php.cn");
  53.         console.log(user1.show());
  55.         //静态方法用类调用比如 Array.of(),Array.form()
  56.         console.log(User1.fetch());
  58.         //访问私有成员
  59.         console.log(user1.age);
  61.         // user1.age=80;
  62.         // console.log(user1.age);
  64.         // 类的继承
  65.         class Child extends User1 {
  66.             //子类扩展父类的功能，可以拥有自己的属性或者方法
  67.             // 子类中可以访问父类的构造方法，原型方法，静态方法，不能访问父类的私有成员
  68.             constructor(name, email,gender) {
  69.             // this.name = name;
  70.             // this.email = email;
  71.             // super()调用父类构造方法，确定this指向
  72.             super(name,email);
  73.             this.gender = gender;
  75.           }
  76.           show(){
  77.             return { name: this.name, email: this.email ,gender:this.gender}; 
  78.           }
  79.         }
  81.         const child = new Child("yy","yy@php.cn","yy_yy");
  82.         console.log(child.show());
  84.         // 类中成员：构造方法，原型方法，静态方法，私有方法
  85.         // 继承 extends,super()

总结：js中类是构造函数的语法糖；class 中 constructor 关键字；子类 扩展 extends ，以及子类中constructor 中的super()
类中不同方法的调用：原型方法使用实例调用，静态方法使用类调用，静态方法使用static 关键字

获取dom元素

使页面动起来的必要条件，获取元素

  1.     <ul id="list">
  2.       <li class="item">item1</li>
  3.       <li class="item">item2</li>
  4.       <li class="item">item3</li>
  5.       <li class="item">item4</li>
  6.       <li class="item">item5</li>
  7.     </ul>
  8.     <img src="../1223/static/images/jddog.png" alt="">
  9.     <a href="../1223/static/images/jddog.png">连接</a>
  10.     <form action="">
  11.         <input type="text">
  13.     </form>
  14.     <script>
  15.       //使用css选择器是最直观的
  16.       //1. 获取满足条件的所有元素
  17.       const lis = document.querySelectorAll("#list li");
  18.       console.log(lis);
  19.       //Nodelist 是浏览器内置的集合类型，属性类数组
  20.       //Array.from(),[...rest],都可以转为真正的数组
  21.       let lisArr = Array.from(lis);
  22.       console.log(lisArr);
  23.       console.log([...lis]);
  24.       // Nodelist 可以直接用forEach()遍历
  25.     //   lis.forEach(function (item, index, arr) {
  26.     //     console.log(item, index, arr);
  27.     //   });
  28.       // 一般只写第一个参数 拿到遍历的元素
  29.     //   lis.forEach(function (item) {
  30.     //     console.log(item);
  31.     //   });
  32.       //使用箭头函数简写
  33.     //   lis.forEach(item=>console.log(item));
  34.     let first = document.querySelectorAll("#list li:first-of-type");
  35.     console.log(first);
  36.     console.log(first[0]);
  38.     //2. 获取满足条件的第一个元素
  39.     first = document.querySelector("#list li");
  40.     console.log(first);
  41.     console.log("---------------------");
  42.     // 还有传统的方式
  43.     // document.getElementById()
  44.     // document.getElementsByTagName()
  45.     // document.getElementsByName()
  46.     // document.getElementsByClassName()
  47.     // console.log(document.getElementById("list"));
  48.     // console.log(document.getElementsByTagName("ul"));
  49.     // console.log(document.getElementsByTagName("li"));
  50.     // console.log(document.getElementsByClassName("item"));
  52.     // 有几个快捷方式，用来快速获取某一或者某一类元素
  53.     //html
  54.     // console.log(document.documentElement);
  55.     //head
  56.     console.log(document.head);
  57.     //body
  58.     console.log(document.body);
  59.     //title
  60.     console.log(document.title);
  61.     //forms
  62.     console.log(document.forms);
  63.     console.log(document.forms[0]);
  64.     console.log(document.forms.item(0));
  66.     console.log(document.images);
  67.     console.log(document.anchors);
  69.     </script>

总结：一招鲜吃遍天下 document.quyerySelector() 返回满足条件的第一个元素；document.quyerySelectorAll()返回满足条件的一个元素集合。可以使用Array.from()转化为数组，或者使用 …rest 语法：[...lis]。一组快捷键需要记下

  1.     //html
  2.      console.log(document.documentElement);
  3.     //head
  4.     console.log(document.head);
  5.     //body
  6.     console.log(document.body);
  7.     //title
  8.     console.log(document.title);
  9.     //forms
  10.     console.log(document.forms);
  11.     console.log(document.forms[0]);
  12.     console.log(document.forms.item(0));
  14.     console.log(document.images);

dom元素的增删改查

  1.     <ul id="list">
  2.         <li class="item">item1</li>
  3.         <li class="item">item2</li>
  4.         <li class="item">item3</li>
  5.         <li class="item">item4</li>
  6.         <li class="item">item5</li>
  7.     </ul>
  8.     <script>
  9.         const ul =document.querySelector("#list");
  10.         //1. 创建元素
  11.         const li = document.createElement("li");
  12.         li.innerText='新增';
  13.         //parent.appendChild(childEl),父元素里添加新的子元素
  14.         ul.appendChild(li);
  15.         li.innerHTML=`<li style="color:red"> item6 </li>`;
  16.         let htmlStr="<li style='color:blue'>item7</li>";
  17.         ul.insertAdjacentHTML("beforeend",htmlStr);
  19.         // 如果大量添加元素应该使用文档片段完成
  20.         // const frag = document.createdocumentfragment();
  21.         const frag = new DocumentFragment;
  22.         for (let i=0;i<5;i++){
  23.             const li = document.createElement("li");
  24.             li.textContent="item8-"+(i+1);
  25.             //将生成的节点先临时挂载到文档片段中
  26.             frag.appendChild(li)
  27.         }
  28.         ul.appendChild(frag);
  30.         htmlStr = `
  31.         <li style="color:violet"> demo1 </li>
  32.         <li style="color:violet"> demo2 </li>
  33.         <li style="color:violet"> demo3 </li>
  34.         <li style="color:violet"> demo4 </li>
  35.         `;
  36.         ul.insertAdjacentHTML("afterbegin",htmlStr);
  38.         //用元素不用字符串
  39.         ul.insertAdjacentElement("afterbegin",li);
  40.         ul.insertAdjacentHTML("afterbegin","<li>itme test</li>");
  41.         //2.更新
  42.         let h3 = document.createElement("h3");
  43.         h3.innerHTML =" hello ";
  44.         document.querySelector("li:nth-of-type(3)").replaceWith(h3);
  45.         // console.log(document.querySelector("ul > li:last-of-type"));
  46.          ul.replaceChild(h3, document.querySelector("ul > li:last-of-type"));
  48.         //3.删除
  49.          ul.removeChild(h3);
  50.         // h3.remove();
  52.         // 4. 遍历查询
  53.         console.log(ul.children);
  54.         //获取子元素的数量
  55.         // console.log(ul.children.length);
  56.         //推荐使用已下方法获取子元素数量
  57.         console.log(ul.childElementCount);
  58.         //获取第一个子元素
  59.         console.log(ul.firstElementChild);
  60.         //已下方法会取出空白节点，不推荐使用
  61.         // console.log(ul.firstChild);
  62.         console.log(ul.lastElementChild);
  64.         //获取父节点
  65.         // console.log(h3.parentElement);
  66.         console.log(document.querySelector(".item").parentElement);
  67.         //获取前一个兄弟
  68.         console.log(document.querySelector("#list li:nth-of-type(9)").previousElementSibling.innerHTML);
  69.         //获取后一个兄弟
  70.         console.log(document.querySelector("#list li:nth-of-type(9)").nextElementSibling.innerHTML);
  71.     </script>

总结：

  1. 插入或者新增元素都需要在父节点上调用。一种是单个插入，第二种是先插入到文档片段在整体插入
  1. //新增子元素（最下面）
  2. ul.appendChild(li);
  3. //插入子元素到指定位置
  4. ul.insertAdjacentElement("afterbegin",li);
  5. ul.insertAdjacentHTML("afterbegin","<li>itme test</li>");

  1. 更新或者替换元素

    2.1 在子元素上调用使用旧值.replaceWith(新值)

  1. document.querySelector("li:nth-of-type(3)").replaceWith(h3);
  1. 2.2 在父元素上调用使用  `父元素.replaceChild(新值,旧值)`
  1. ul.replaceChild(h3, document.querySelector("ul > li:last-of-type"));
  1. 删除

方法一：
父元素.removeChild(需要删除的子元素);
方法二：
子元素.remove();

  1. 遍历
    推荐使用
  1.         console.log(ul.children);
  2.         //获取子元素的数量
  3.         // console.log(ul.children.length);
  4.         //推荐使用已下方法获取子元素数量
  5.         console.log(ul.childElementCount);
  6.         //获取第一个子元素
  7.         console.log(ul.firstElementChild);
  8.         //已下方法会取出空白节点，不推荐使用
  9.         // console.log(ul.firstChild);
  10.         console.log(ul.lastElementChild);
  12.         //获取父节点
  13.         // console.log(h3.parentElement);
  14.         console.log(document.querySelector(".item").parentElement);
  15.         //获取前一个兄弟
  16.         console.log(document.querySelector("#list li:nth-of-type(9)").previousElementSibling.innerHTML);
  17.         //获取后一个兄弟
  18.         console.log(document.querySelector("#list li:nth-of-type(9)").nextElementSibling.innerHTML);

神秘的js，似乎也很可爱。继续找寻它的可爱之处。

上一条：课上vue指令全部上机操作下一条：xrj一切都会过去的，包括那些烦恼
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多