构造函数、dom元素的基础

流程控制：循环

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>