search

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

原型/类与DOM操作

庄周梦蝶
庄周梦蝶原创
2021年02月13日 23:05:57675浏览

循环

  1. <script>
  2. //while循环，入口判断
  3.     const colors=["red","grenn","blue"]
  4.     let i=0;
  5.     //length是数组的长度
  6.     while(i<colors.length){
  7.     console.log("%c%s", "color:red",colors[i]);
  8.     //更新变量
  9.     i++
  10.     }
  11.     //for循环
  12.     for(i=0;i<colors.length;i++){
  13.     console.log("%c%s", "color:blue", colors[i]);
  14.     }
  15.     //以上对象不能用，对象用for-in
  16.     const less={name:"js",score:80};
  17.     for(let key in less){
  18.     console.log(less[key]);
  19.     }
  20.     //其中的key可以是变量名，也可以遍历数组
  21.     for(let key in colors){
  22.     console.log(coloes[key]);
  23.     }
  24.     //for-of：遍历的终结者，都可以用这个来遍历
  25.     for (let item of colors){
  26.     console.log(irem);
  27.     }
  28.     //但是在遍历自定义对象的时候回报错
  29.     for(let item of less){
  30.     console.log(item);
  31.     }
  32.     //因为自定义对象没有代送器接口
  33. </script>

构造函数的原型与对象原型之间的区别与联系

  1. <script>
  2. //声明构造函数，一般是首字母大写，里面的可以传参数
  3.     function User(name,email){
  4.     this.name=name;
  5.     this.email=email;
  6.     }
  7.     //声明对象，给构造函数里面的参数传参
  8.     const user=new User("马","ma@qq.com");
  9.     console.log(user);
  10.     //给user的父级原型里面加点东西
  11.     user._proto_.salary=8899;
  12.     //访问,它这个访问会先出自由属性上找，找不到会去原型里面找，这叫原型链
  13.     console.log(user.salary);
  14.     //再声明一个对象，给构造函数的参数传参
  15.     const user1=new User("张","za@qq.com");
  16.     //访问这个对象的salary属性
  17.     console.log(user1.salary);
  18.     //访问发现user._proto_的salary共享给了user1
  19.     //让对象的_proto_和构造函数的prototype后返回true，发现完全相等
  20.     console.log(user1.__proto__ === User.prototype);
  21.     //可以通过prototype添加值和属性来共享给下面的子对象
  22.     //构造函数的自由属性比原型链权限高，会覆盖
  23. </script>

类模拟构造函数与子类

  1. <script>
  2. //先声明一个类
  3.     const User=function(name,email){
  4.     this.name=name;
  5.     this.email=email;
  6.     };
  7.     //然后给这个类的原型链上加上匿名函数
  8.     User.prototype.show=function(){
  9. return{name:this.name,email:this.email};
  10.     };
  11.     //然后声明变量赋值
  12.     const user=new User("小马","ma@qq.com");
  13.     //然后调用原型链上的show方法
  14.     console.log(user.show());
  16.     //es6中改写方法
  17.     class User1{
  18.         constructor(name,email){
  19.             this.name=name;
  20.             this.email=email;
  21.         }
  22.         show(){
  23.             return{name:this.name,email:this.email}
  24.         }
  25.     }
  26.     const user1=new User1("小马","ma@qq.com");
  27.     console.log(user1.show());
  29.     //静态方法
  30.     class User2{
  31.     //static是关键字，后面加上静态方法
  32.         static fetch(){
  33.             return this.hello(this.userName);
  34.         }
  35.         //静态属性
  36.         static userName="小王";
  37.         //静态方法
  38.         static hello(name){
  39.             return"hello"+name;
  40.         }
  41.     }
  42.     console.log(User2.fetch());
  44.     //私有变量，只能在本类中使用，类外，子类中不能用，重名没关系，外面比里面的大，会覆盖，不知道为啥火狐不支持私有变量语法
  45.     class User3{
  46.     //前面加个#就是私有变量
  47.         #age=40;
  48.         get age(){
  49.             return this.#age;
  50.         }
  51.         set age(value){
  52.             if(value>=18 && value<=60){
  53.                 this.#age=value;
  54.             }elsr{
  55.                 throw new Error("必须在18-60之间")
  56.             }
  57.         }
  58.     }
  59.     console.log(User3.get);
  60.     console.log(User3.age);
  62.     //类的继承，叫子类
  63.     //子类继承类的一切，处了私有的
  64.     //用extends来关联两者
  65.     class Child extends User1{
  66.         constructor(name,email,gender){
  67.             //如果要调用父级的变量，必须用super俩调用，要是直接用回报错
  68.             super(name,email);
  69.             this.gender=gender;
  70.         }
  71.         show() {
  72.             return { name: this.name, 
  73.                     email: this.email, 
  74.                     gender: this.gender 
  75.             };
  76.         }
  77.     }
  78.     const child = new Child("老师", "a@qq.con", "男");
  79.     console.log(child.show());
  80. </script>

获取dom元素的常用方法

  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.     <form action="">
  10.       <input type="text" />
  11.     </form>
  12. <script>
  13.     //querSelectorALL获取满足所以的条件的元素
  14.     const lis = document.querSelectorALL("#list li");
  15.     console.log(lis);
  16.     //用forEach（）来遍历获取到的值
  17.     lis.forEach((item)=>console.log(item));
  18.     //获取第一个，直接用伪类选择器来选中
  19.     let first=document.querySelectorALL("#list li:first-of-type");
  20.     console.log(first[0]);
  21.     //可以通过用document.querySelector来直接选择第一个
  22.     first=document.querySelector("#list li")
  23.     console.log(first);
  24. </script>
  25. </body>

dom元素的增删改查常用操作

  1. <body>
  2.     <ul id="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.     </ul>
  9.     <script>
  10.     //增加
  11.     const ul=document.querySelector("#list");
  12.     const li=document.createElement("li");
  13.     ul.appendChild(li);
  14.     li.innerText="新添加的";
  15.     //li.innerHTML = '<li style="color:red">红色</li>';
  16.     </script>
  17. </body>

  1. <body>
  2.     <ul id="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.     </ul>
  9.     <script>
  10.     const ul = document.querySelector("#list");
  11.     //批量增加
  12.     const Frag=new DocumentFragment();
  13.     for(let i=0;i<4;i++){
  14.         const li=document.createElement("li");
  15.         li.innerText="批量添加";
  16.         Frag.appendChild(li);
  17.     }
  18.     ul.appendChild(Frag);
  19.     </script>
  20. </body>

  1. <body>
  2.     <ul id="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.     </ul>
  9.     <script>
  10.     const ul = document.querySelector("#list");
  11.     //更新插入一个值
  12.     let h3=document.createElement("h3");
  13.     h3.innerText="晚上好";
  14.     //先把h3代替第三位
  15.     document.querySelector("li:nth-of-type(3)").replaceWith(h3);
  16.     //然后把h3代替到第一位
  17.     ul.replaceChild(h3, document.querySelector("li:nth-of-type(1)"));
  18.     </script>
  19.     </body>


  1. <body>
  2.     <ul id="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.     </ul>
  9.     <script>
  10.     const ul = document.querySelector("#list");
  11.     //更新插入一个值
  12.     let h3=document.createElement("h3");
  13.     h3.innerText="晚上好";
  14.     //先把h3代替第三位
  15.     document.querySelector("li:nth-of-type(3)").replaceWith(h3);
  16.     //然后把h3代替到第一位
  17.     ul.replaceChild(h3, document.querySelector("li:nth-of-type(1)"));
  18.     //删除h3
  19.     ul.removeChild(document.querySelector("#list h3"));
  20.     </script>
  21.     </body>

  1. <body>
  2.     <ul id="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.     </ul>
  9.     <script>
  10.     const ul = document.querySelector("#list");
  11.     //批量增加
  12.     const Frag=new DocumentFragment();
  13.     for(let i=0;i<4;i++){
  14.         const li=document.createElement("li");
  15.         li.innerText="批量添加";
  16.         Frag.appendChild(li);
  17.     }
  18.     ul.appendChild(Frag);
  19.      //遍历，用于查询
  20.       //获取所以的子元素
  21.       console.log(ul.children);
  22.       //获取子元素的数量,就是现实子元素的长度
  23.       console.log(ul.children.length);
  24.       //更优雅的,第二种方式好
  25.       console.log(ul.childElementCount);
  26.       //第一个子元素
  27.       console.log(ul.firstElementChild);
  28.       //最后一个
  29.       console.log(ul.lastElementChild);
  30.       //获取父节点
  31.       console.log(ul.lastElementChild.parentElement);
  32.       //前一个兄弟
  33.       const jiu = document.querySelector("#list li:nth-of-type(9)");
  34.       //给他加个样式
  35.       jiu.style.color = "yellow";
  36.       //那到前一个兄弟看看内容
  37.       const ba = jiu.previousElementSibling;
  38.       ba.style.color = "green";
  39.       //拿到后一个兄弟
  40.       console.log(jiu.nextElementSibling.innerHTML);
  41.       console.log((jiu.nextElementSibling.style.color = "green"));
  42.     </script>
  43. </body>

上一条：第2章 0126-细说变量与常量，课程笔记、心得（数据类型的转换与检测技术，实例演示; 变量声明与常用声明的方式与使用，实例演示）下一条：1222 flex的简单练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多