构造函数、dom元素的基础 - 前端学习

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

博主信息

博文 29

粉丝 0

访问量 25166

专题推荐

更多>

流程控制：循环

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

        const colors = ["red", "green", "blue"];
        // 1,while :入口判断
        // 
        let i = 0;
        while (i < colors.length) {
            console.log("%c%s", "color:red", colors[i]);
            i++;
        }
        console.log("%c--------------", 'color:blue');
        // 2.while：出口判断
        i = 0;
        do {
            //  条件不满足的时候，至少执行一次循环体
            console.log(colors[i]);
            i++;
        } while (i > colors.length);
        console.log("%c--------------", 'color:green');
        // 3.for （初始变量，循环条件，条件更新）
        for (let i = 0; i < colors.length; i++) {
            console.log(colors[i]);
        }
        console.log("%c--------------", 'color:green');
        // 对象使用for in
        const lesson = { name: "js", score: 90 };
        for (let key in lesson){
            console.log("%s",lesson[key]);
        }
        console.log("%c--------------", 'color:green');
        // for in 也可以便利数组
        for (let key in colors){
            console.log("%s",colors[key]);
        }
        console.log("%c--------------", 'color:green');
        // for of 将所有集合类型的数据的遍历进行了统一，是遍历的终结者
        // 可以遍历数组
        for (let item of colors){
            console.log(item);
        }
        console.log("%c--------------", 'color:green');
        // 可以遍历对象
        for (let item of lesson){
            console.log(item);
        }
        // 报错 ： lesson不是一个可以迭代的对象。

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

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

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

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

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

获取dom元素的常用方法

  <ul id="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
  </ul>
  <form action="">
      <input type="text" />
  </form>
  <script>
      // 使用css是最直观的
      // 1，获取满足条件的所以元素
      const lis = document.querySelectorAll("#list li")
      console.log(lis);
      console.log('---------------');
      // 2.获取满足条件的第一个元素
      first = document.querySelector("#list li")
      console.log(first);
      // 其他
      // 返回对拥有指定 ID 的第一个对象的引用
      id = document.getElementById('list')
      console.log(id);
      // 返回带有指定标签名的对象的集合
      tagname = document.getElementsByTagName('li')
      console.log(tagname);
      // 返回带有指定名称的对象的集合
      name = document.getElementsByName('')
      // 获取所有指定类名的元素
      classname = document.getElementsByClassName('item')
      console.log(classname);
      // 有几个快捷方式,用来快速 获取某一个或某一类元素
      // html
      //   console.log(document.documentElement);
      // head
      console.log(document.head);
      // body
      console.log(document.body);
      // title
      console.log(document.title);
      // forms
      console.log(document.forms[0]);
      console.log(document.forms.item(0));
      console.log(document.images);
  </script>

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

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

    <ul id="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
    </ul>
    <script>
        const ul = document.querySelector('#list')
        // 1.创建元素
        const li = document.createElement('li');
        // parent.appendChild(newEl),添加到页面(在父元素中调用)
        ul.appendChild(li);
        li.innerText = 'item6';
        // innerHTML支持代码
        //   li.innerHTML = '<i style="color:red">item6</i>';
        let htmlStr = "<li style='color:red'>item7</li>";
        // 将html字符串直接解析为dom元素
        ul.insertAdjacentHTML("beforeEnd", htmlStr);
        // 如果大量添加元素应该使用文档片断完成
        //   const frag = document.createDocumentFragment(); 以下是简化成构造函数
        const frag = new DocumentFragment();
        for (let i = 0; i < 5; i++) {
            const li = document.createElement("li");
            li.textContent = "Hello " + (i + 1);
            // 将生成的节点先临时挂载到文档片断中
            frag.appendChild(li);
        }
        ul.appendChild(frag);
        htmlStr = `
      <li style="color:violet">demo1</li>
      <li style="color:violet">demo2</li>
      <li style="color:violet">demo3</li>
      <li style="color:violet">demo4</li>
      <li style="color:violet">demo5</li>
      `;
        ul.insertAdjacentHTML("afterBegin", htmlStr);
        // 用元素不用字符串
        ul.insertAdjacentElement("afterBegin", li);
        ul.insertAdjacentHTML("afterBegin", "<li>item888</li>");
        // 2. 更新
        let h3 = document.createElement("h3");
        h3.innerHTML = "晚上好";
        document.querySelector("li:nth-of-type(3)").replaceWith(h3);
        ul.replaceChild(h3, document.querySelector("li:last-of-type"));
        // 3.移除
        ul.removeChild(document.querySelector("#list h3"));
        // 4. 遍历查询
        // 获取所有子元素
        console.log(ul.children);
        // 获取子元素数量
        console.log(ul.children.length);
        console.log(ul.childElementCount);
        // 第一个子元素
        console.log(ul.firstElementChild);
        // 最后一个
        console.log(ul.lastElementChild);
        // 父节点
        console.log(ul.lastElementChild.parentElement);
        // 前一个兄弟
        const jiu = document.querySelector("#list li:nth-of-type(9)");
        jiu.style.background = "yellow";
        console.log(jiu.previousElementSibling.innerHTML);
        // 后一个兄弟
        console.log(jiu.nextElementSibling.innerHTML);
    </script>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

01-03上课操作

2019-12-21 23:01:15