search

博客列表 >构造函数、dom元素的基础

构造函数、dom元素的基础

手机用户1576673622
手机用户1576673622原创
2021年03月15日 18:41:56523浏览

流程控制：循环

while：入口判断与出口判断的唯一区别，出口判断条件不满足的时候，至少执行一次循环体。
for of：将所有集合类型的数据的遍历进行了统一，是遍历的终结者

  1.         const colors = ["red", "green", "blue"];
  2.         // 1,while :入口判断
  3.         // 
  4.         let i = 0;
  5.         while (i < colors.length) {
  6.             console.log("%c%s", "color:red", colors[i]);
  7.             i++;
  8.         }
  9.         console.log("%c--------------", 'color:blue');
  11.         // 2.while：出口判断
  12.         i = 0;
  13.         do {
  14.             //  条件不满足的时候，至少执行一次循环体
  15.             console.log(colors[i]);
  16.             i++;
  17.         } while (i > colors.length);
  18.         console.log("%c--------------", 'color:green');
  20.         // 3.for （初始变量，循环条件，条件更新）
  21.         for (let i = 0; i < colors.length; i++) {
  22.             console.log(colors[i]);
  23.         }
  24.         console.log("%c--------------", 'color:green');
  26.         // 对象使用for in
  27.         const lesson = { name: "js", score: 90 };
  28.         for (let key in lesson){
  29.             console.log("%s",lesson[key]);
  30.         }
  31.         console.log("%c--------------", 'color:green');
  32.         // for in 也可以便利数组
  33.         for (let key in colors){
  34.             console.log("%s",colors[key]);
  35.         }
  36.         console.log("%c--------------", 'color:green');
  38.         // for of 将所有集合类型的数据的遍历进行了统一，是遍历的终结者
  39.         // 可以遍历数组
  40.         for (let item of colors){
  41.             console.log(item);
  42.         }
  43.         console.log("%c--------------", 'color:green');
  44.         // 可以遍历对象
  45.         for (let item of lesson){
  46.             console.log(item);
  47.         }
  48.         // 报错 ： lesson不是一个可以迭代的对象。

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

实例的原型永远指向它的构造函数的原型,实例的原型从构造函数的原型继承成员(属性/方法)
需要被继承的所有类实例共享的成员，应该写在构造函数原型上。
通常属性不应该被共享，他们是区分不同对象的标志，方法更适合共享。

  • 任何函数都有一个原型属性：prototype。
  • prototype对于普通函数没用,对构造函数来说才有用
  • 构造函数是”对象工厂”,是用来创建对象的
  • 对象也叫”实例”, 实例: 实际案例
  • js中没有“类”的概念,它是基于原型的语言,所以可简单的将构造函数当成“类”
  • 构造函数必须使用“new”来调用,普通函数不用
  • new 的过程就是类的实例化过程,就是创建一个对象的过程

  • 创建对象的过程,就叫“类的实例化”

    1.      // 声明构造函数（行业规范：首字母大写，用来区分。）
    2.       function User(name, email) {
    3.           // 1. 创建出一个新对象,用this来表示(这是伪代码,系统自动创建并执行，不用写)
    4.           // const this = new User;
    6.           // 2.初始化对象,给这个对象添加一个自定义属性,用来和其它实例进行区分
    7.           // 可以为空
    8.           this.name = name;
    9.           this.email = email;
    11.           // 3. 返回这个对象
    12.           // return this;
    13.       }
    15.       // 使用 new 调用
    16.       const user = new User("admin", "admin@php.cn");
    17.       console.log(user instanceof User);
    18.       console.log(user);
    19.       // 在原型属性中增加一个属性
    20.       user.__proto__.salary = 8899;
    21.       // 先在自由属性中找，找不到再到原型属性上找。
    22.       console.log(user.salary);
    24.       const user1 = new User("peter", "peter@php.cn");
    25.       console.log(user1);
    26.       //   console.log(user1.salary);
    27.       console.dir(User);
    28.       // 实例的原型永远指向它的构造函数的原型,实例的原型从构造函数的原型继承成员(属性/方法)
    29.       console.log(user1.__proto__ === User.prototype);
    31.       // 需要被所有类实例共享的成员,应该写到构造函数的原型上
    32.       User.prototype.nation = "CHINA";
    33.       console.log(user.nation, user1.nation);
    35.       // 属性通常不应该共享的,它是区分不同对象的标志,方法更适合共享
    36.       User.prototype.show = function () {
    37.           return { name: this.name, email: this.email, salary: this.salary };
    38.       };
    39.       console.log(user.show());
    40.       console.log(user1.show());

    获取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>
    9.   <form action="">
    10.       <input type="text" />
    11.   </form>
    12.   <script>
    13.       // 使用css是最直观的
    15.       // 1，获取满足条件的所以元素
    16.       const lis = document.querySelectorAll("#list li")
    17.       console.log(lis);
    18.       console.log('---------------');
    20.       // 2.获取满足条件的第一个元素
    21.       first = document.querySelector("#list li")
    22.       console.log(first);
    24.       // 其他
    25.       // 返回对拥有指定 ID 的第一个对象的引用
    26.       id = document.getElementById('list')
    27.       console.log(id);
    29.       // 返回带有指定标签名的对象的集合
    30.       tagname = document.getElementsByTagName('li')
    31.       console.log(tagname);
    33.       // 返回带有指定名称的对象的集合
    34.       name = document.getElementsByName('')
    36.       // 获取所有指定类名的元素
    37.       classname = document.getElementsByClassName('item')
    38.       console.log(classname);
    40.       // 有几个快捷方式,用来快速 获取某一个或某一类元素
    41.       // html
    42.       //   console.log(document.documentElement);
    43.       // head
    44.       console.log(document.head);
    45.       // body
    46.       console.log(document.body);
    47.       // title
    48.       console.log(document.title);
    49.       // forms
    50.       console.log(document.forms[0]);
    51.       console.log(document.forms.item(0));
    52.       console.log(document.images);
    53.   </script>

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

  • 创建元素

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

  • 更新

    • replaceWith()
    • replaceChild();

  • 移除

    • removeChild()
  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.         // parent.appendChild(newEl),添加到页面(在父元素中调用)
  13.         ul.appendChild(li);
  14.         li.innerText = 'item6';
  15.         // innerHTML支持代码
  16.         //   li.innerHTML = '<i style="color:red">item6</i>';
  18.         let htmlStr = "<li style='color:red'>item7</li>";
  19.         // 将html字符串直接解析为dom元素
  20.         ul.insertAdjacentHTML("beforeEnd", htmlStr);
  22.         // 如果大量添加元素应该使用文档片断完成
  23.         //   const frag = document.createDocumentFragment(); 以下是简化成构造函数
  24.         const frag = new DocumentFragment();
  25.         for (let i = 0; i < 5; i++) {
  26.             const li = document.createElement("li");
  27.             li.textContent = "Hello " + (i + 1);
  28.             // 将生成的节点先临时挂载到文档片断中
  29.             frag.appendChild(li);
  30.         }
  31.         ul.appendChild(frag);
  33.         htmlStr = `
  34.       <li style="color:violet">demo1</li>
  35.       <li style="color:violet">demo2</li>
  36.       <li style="color:violet">demo3</li>
  37.       <li style="color:violet">demo4</li>
  38.       <li style="color:violet">demo5</li>
  39.       `;
  41.         ul.insertAdjacentHTML("afterBegin", htmlStr);
  42.         // 用元素不用字符串
  43.         ul.insertAdjacentElement("afterBegin", li);
  44.         ul.insertAdjacentHTML("afterBegin", "<li>item888</li>");
  46.         // 2. 更新
  47.         let h3 = document.createElement("h3");
  48.         h3.innerHTML = "晚上好";
  49.         document.querySelector("li:nth-of-type(3)").replaceWith(h3);
  50.         ul.replaceChild(h3, document.querySelector("li:last-of-type"));
  52.         // 3.移除
  53.         ul.removeChild(document.querySelector("#list h3"));
  55.         // 4. 遍历查询
  56.         // 获取所有子元素
  57.         console.log(ul.children);
  58.         // 获取子元素数量
  59.         console.log(ul.children.length);
  60.         console.log(ul.childElementCount);
  61.         // 第一个子元素
  62.         console.log(ul.firstElementChild);
  63.         // 最后一个
  64.         console.log(ul.lastElementChild);
  65.         // 父节点
  66.         console.log(ul.lastElementChild.parentElement);
  67.         // 前一个兄弟
  68.         const jiu = document.querySelector("#list li:nth-of-type(9)");
  69.         jiu.style.background = "yellow";
  70.         console.log(jiu.previousElementSibling.innerHTML);
  71.         // 后一个兄弟
  72.         console.log(jiu.nextElementSibling.innerHTML);
  73.     </script>
上一条：后台六 功能权限（阅读）下一条：无法访问此卷不包含可识别的文件系统 chkdsk无法修复. 不知道怎么寻回呢??
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多