search

博客列表 >原型/类与dom操作

原型/类与dom操作

心
心原创
2021年01月08日 18:36:43644浏览

流程控制:循环

  • 循环
    -数组为列:while:
    -入口判断
    -出口判断 : 条件不满足，至少执行一次循环体
    -初始变量，循环条件，条件更新
    -for 循环
    -ES6 将所有集合类型的数据便利进行统一 for-of
    -
  1. <script>
  2.     //以数组为例
  3.     const colors = ['red','green','blue'];
  4.     //初始变量，循环条件，条件更新
  5.     let i = 0 ;
  6.     while(i<colors.length){
  7.         cobsole.log("%c%s","color:red",colors[i]);
  8.         i++;
  9.     }
  11.     //出口判断
  12.     i = 0;
  13.     do {
  14.         cobsole.log("%c%s","color:red",colors[i]);
  15.         i++;
  16.     }while(i<colors.length);
  18.     //for 循环
  19.     for(let i = 0;i<colors.length;i++){
  20.     cobsole.log("%c%s","color:red",colors[i]);
  21.     }
  23.     //对象使用for-in
  24.     const lesson = {name:'js',score:80};
  25.     for (let key in lesson){
  26.     cobsole.log("%c%s","color:red",colors[key]);
  27.     }
  28.     // for - of
  29.     for (let item of colors){
  30.         cobsole.log("%c%s","color:red",item);
  31.     }
  32. </script>

迭代器

  1. <script>
  2.     // 手写迭代器
  3.     function myIterator(data){
  4.         //迭代器中必须要有一个-next()
  5.         let i = 0;
  6.         return {
  7.             next(){
  8.                 //done:表示遍历是否完成
  9.                 // value:当前遍历的数据
  10.                 let done = i >= data.length ? false : true
  11.                 let value = !done ? data[i++]:undefined;
  12.                 return {done,value}
  13.             }
  14.         }
  15.     }
  16.     let iterator = myIterator(['a','b','c']);
  17.     console.log(iterator.next());
  18. </script>

构造函数和原型

— 任何一个函数都有一个原型属性:portotype

  • prototype 对于普通函数没用，对构造函数才有用
    -构造函数是对象工厂，用来创建对象
    -对象也叫：“实列”，实列：所有事物
    -js 中没有“类”的概念，它是基于原型的语言，所以可简单的将构造函数当成“类”
    -构造函数必须使用“new”来调用，普通函数不用
    -“new” 的过程就是类的实列化过程，就是创建一个对象的过程
    -创建对象的过程，也叫“类的实列化”
    -实列的原型永远指向它的构造函数的原型，实例的原型从构造函数的原型继承成员（属性/方法）
    -需要被所有实列共享的成员，应该写道构造函数的原型上
    -属性不应该共享，它是区分不同对象的标志，方法更适合共享
  1. <script>
  2.     function f1(){}
  3.     console.dir(f1);
  4.     //声明一个构造函数
  5.     function User(name,email){
  6.         //创建出一个新对象，用this来表示（伪d代码，系统自动创建并执行
  7.         const this = new User;、
  8.         //初始化对象，给对象添加自定义属性，用来和其他实列进行区分
  9.         this.name = name;
  10.         this.email = email;
  11.         //返回这个对象
  12.         //return this;
  13.     }
  14.     const user = new User('admin','admin@php.cn');
  15.     console.log(user);
  16.     user.__proto__.salary = 8899;
  17.     console.log(user.salary);
  18.     const user1 = new User('admin1','admin1@php.cn');
  19.     console.log(user1);
  20.     //实列的原型永远指向它的构造函数的原型，实例的原型从构造函数的原型继承成员（属性/方法）
  21.     console.log(user1.__proto__ === User.prototype);
  22.     //需要被所有实列共享的成员，应该写道构造函数的原型上
  23.     User.prototype.nation = "CHINA";
  24.     console.log(user.nation,user1.nation);
  25.     //属性不应该共享，它是区分不同对象的标志，方法更适合共享
  26.     User.prototype.show = function(){
  27.         return {name:this.name,email:this.emali,salary:this.salary}
  28.     }
  29.     console.log(user.show());
  30.     console.log(user1.show());
  31. </script>

类和继承

  • 构造函数模拟类
    -constructor 构造方法
    -静态方法：static 不需要通过对象调用，直接用类调用
    -静态方法中的this指向类
    -私有成员，只能在奔本类中使用，类外，子类中不能用 #,静态方法不能访问，声明为私有主要是为访问限制

  • 类的继承
    -扩展父类的功能，可以拥有自己的属性或方法
    -子类中可以访问父类的构造方法，原型方法，静态方法，不能访问私有的
    -使用super（）调用父类构造方法，确定this指向

  1. const User = function(name,email){
  2.     this.name = name;
  3.     this.email = email;
  4. }
  5. //原型方法
  6. User.prototype.show = function(){
  7.     return {name:this.name,email:this.email};
  8. }
  9. const user = new User("世界"，"你好@qq.com")
  10. console.log(user.show);
  12. // es6中的类，来改写上面
  13. class User1{
  14.     //构造方法
  15.     constructor(name,email){
  16.         this.name = name;
  17.         this.email = email;
  18.     }
  19.     show(){
  20.         return {name:this.name,email:this.email,agethis.age};
  21.     }
  22.     //静态方法：不需要通过对象调用，直接用类调用
  23.     static fetch(){
  24.         //return {name:this.name,email:this.email};
  25.         return this.hello(this.userName);
  26.     }
  28.     static userName = '你好';
  29.     static hello(name){
  30.         return 'hello' + name;
  31.     }
  33.     #age = 40;
  34.     //访问器属性
  35.     set age(value){
  36.         if(value>=18 && value<=80){
  37.             this.#age = value;
  38.         }else{
  39.             throw new Error('年龄必须在18-60之间')
  40.         }
  41.     }
  42.     get age(){
  43.         return this.#agep;
  44.     }
  45. }
  46. const user1 = new User1("世界"，"你好@qq.com")
  47. console.log(user1.show);
  49. console.log(Array.of(1,2,3));
  50. user.age = 53;
  51. console.log(user1.age);
  52. // 类的继承
  53. class Child extends User1{
  54.     constructor(name,email,la){
  55.         super(name,email);
  56.         this.la = la;
  57.     }
  59.     show(){
  60.         return {name:this.name,email:this.email,la:this.la}
  61.     }
  62. }
  63. const child = new Child('世界'，'shijie@11.con','1亿');
  64. console.log(child);

dom 操作

  • 获取dom元素
    -使用css选择器是最直观的
    -获取满足条件的所有元素 document.querySelectorAll
    -Nodelist 是浏览器内置的集合类型，属性类数组
    -Array.from(), …rest,都可以转为真正的数组
    -Nodelist可以直接用forEach()遍历
    -获取满足条件的第一个元素 document.querySelector()
  • 有及格快捷方式是，用来快速获取莫一个或某一个元素
    -html document.documentElement
    -head document,head
    -body document.body
    -title document.title
    -forms document.forms[0] = document.forms.itms(0)
    imgs document.imgs
  1. <ul id="lilst">
  2.     <li class="item"></li>
  3.     <li class="item"></li>
  4.     <li class="item"></li>
  5.     <li class="item"></li>
  6.     <li class="item"></li>
  7. <ul>
  8. <script>
  9.     //使用css选择器是最直观的
  10.     //获取满足条件的所有元素
  11.     const lis = document.querySelectorAll('#list > *);
  12.     console.log(lis);
  13.     //Nodelist 是浏览器内置的集合类型，属性类数组
  14.     let lisArr = Array.from(lis);
  15.     console.log(lisArr);
  16.     // ...
  17.     let larr = [...lis];
  18.     console.,log(larr);
  19.     //Nodelist可以直接用forEach()遍历
  20.     lis.forEach(function(item,index,arr){
  21.         console.log(item,index,arr);
  22.     })
  23.     //使用箭头函数
  24.     lis.forEach((item)=>console.log(item));
  25.     // 只获取一个，但返回的仍然是一个集合
  26.     let first = document.querySelecouAll('#list 里：first-of-type');
  27.     console.log(first[0]);
  28.     //获取满足条件的第一个元素
  29.     first = document.querySelector('#list l;i');
  30. </script>

dom增删改查

  • 创建元素
    -createElement();
    -parent appendChild(newEl),添加到页面
    -将html逐个添加 字符串直接解析dom元素 insertAdjacentHTML(beforeEnd(到最后))
    insertAdjacentHTML(afterBegin(到前面))
    -如果大量添加元素应该使用文档片段完成

  • 更新
    -replaceWith()
    -replaceChild();

  • 移除
    -removeChild()

-遍历查询
-获取所有的子元素 children

  1. <ul id="lsit">
  2.     <li></li>
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6. </ul>
  7. <script>
  8.     const ul = document.querySelector('#list');
  9.     //创建元素
  10.     const li = document.createElement('li');
  11.     //parent appendChild(newEl),添加到页面
  12.     ul.appendChild(li);
  13.     li.innerText = 'item6';
  14.     //将html逐个添加 字符串直接解析dom元素 insertAdjacentHTML()
  15.     let htmlStr = "<li style='color:red'>item7</li>";
  16.     ul.insertAdjacentHTML('beforeEnd',htmlStr);
  17.     //如果大量添加元素应该使用文档片段完成
  18.     const frag = doucument.createDocumentFrament();
  19.     const frag = new DocumentFragment():
  20.     for(let i=0;i<5;i++){
  21.         const li = document.creatElement('li');
  22.         li.textContent = 'Hello' + (i+1);
  23.         frag.appendChild(li);
  24.     }
  25.     ul.appendChild(frag);
  27.     htmlStr = `
  28.     <li style="color:violet">牛号<li>
  29.     `;
  30.     //用元素不用字符串
  31.     ul.insertAdjacentElement("afterBegin",htmlStr)
  32.     //更新
  33.     let h3 = document.createElememt("h3");
  34.     h3.innerHTML = '晚上好';
  35.     document.querySelector('li:nth-of-type(3)').replaceWith(h3);
  36.     document.querySelector('li:last-of-type').replaceChild(h3);
  37.     // 移除
  38.     ul.removeChild(document.querySelector('#list h3'));
  39.     //遍历查询
  40.     //获取所有子元素
  41.     console.log(ul.children);
  42.     //获取子元素的数量
  43.     console.log(ul.children.length)
  44.     console.log(ul.childElementCount)
  45.     // 第一个子元素
  46.     console.log(ul.firstElementChild);
  47.     //最后一个
  48.     console.log(ul.lastElementChild);
  49.     //父节点
  50.     console.log(ul.lastElementChild.parentElement);
  51.     //前一个兄弟节点
  52.     const jiu = document.querySelector('#list li:net-of-type(9)');
  53.     jiu.style.background = 'yellow';
  54.     console.log(jiu.previousElementSibling.innerHTML);
  55.     //后一个兄弟
  56.     console.log(jiu.nextElementSibling.innerHTML);
  57. </script>
上一条：js事件和字符串方法下一条：JS对象与简单流程控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多