构造函数、原型和Dom操作

构造函数、原型和Dom操作

  任何一个函数都有一个原型：prototype，prototype 对于普通函数没用，对构造函数才有用，构造函数是“对象的工厂”，是用来创建对象的，对象也叫实例 ；

  构造函数必须用new来调用，普通函数不用，new的过程就是类的实例化过程，就是创建一个对象的过程，创建对象的过程就叫类的实例化；

      // 声明一个构造函数
      function User(name, email) {
        // 1.创建出一个新对象，用this来表示（伪代码，系统自动创建并执行）
        // const this = new User();
        // 2.初始化对象，给这个对象添加一个自定义的属性，用来和其它实例进行区分
        this.name = name;
        this.email = email;
        // 3.返回这个对象（系统自动返回，不用写）
        // return this;
      }

Dom操作

  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>

js代码如下：

<script>
      // 创建子元素用doucument.createElement(),添加元素要在父节点上添加，用appendChild（）；
      const ul = document.querySelector("#list");
      const li = document.createElement("li");
      // 在父节点上添加子元素
      //   ul.appendChild(li);
      li.innerHTML = "item6";
      //   insertAdjacentHTML必须是HTML标签代码
      //   ul.insertAdjacentHTML("beforeEnd", "<li>8888</li>");
      //   insertAdjacentHTML插入式可以写变量元素
      //   ul.insertAdjacentElement("afterBegin", li);
      //替换
      //   子节点上替换用replaceWith（h3）
      let h3 = document.createElement("h3");
      h3.innerHTML = "Hello";
      //   document.querySelector("#list li:nth-of-type(1)").replaceWith(h3);
      //   也可以在父节点上替换用，replaceChild（h3,document.querySelector('#list li:last-of-type')
      ul.replaceChild(h3, document.querySelector("#list li:last-of-type"));
      //   移除
      // 用RemoveChild(document.querySelector('#list li:first-of-type'));在父节点上调用
      //   ul.removeChild(document.querySelector("#list li:nth-of-type(3)"));
      //   遍历查询获取所有子元素
      console.log(ul.children);
      // 获取子元素的数量
      console.log(ul.children.length);
      console.log(ul.childElementCount);
      // 获取第一个子元素
      console.log(ul.firstElementChild);
      //   console.log(ul.firstChild);
      //   获取最后一个子元素
      console.log(ul.lastElementChild);
      //   console.log(ul.lastChild);
      // 改变css属性，先选中，然后改变
      // 父节点
      console.log(ul.lastElementChild.parentElement);
      let three = document.querySelector("#list li:nth-of-type(3)");
      three.style.background = "blue";
      //前一个兄弟元素
      console.log(three.previousElementSibling.innerHTML);
      //后一个兄弟元素
      console.log(three.nextElementSibling.innerHTML);
    </script>

执行结果：