第16章 0106-原型类与DOM操作，学习心得、笔记

今天所学心得、笔记

1、构造函数的原型与对象原型

    // 构造函数的原型是，构造函数创建时系统自动创建的一个对象，它指向Object对象的原型__proto__；
    //对象原型是，对象创建时系统自动创建的一个对象，它指向构造函数的原型prototype；
    // 构造函数的原型关键字：prototype，对象原型关键字：__proto__；
    //构造函数的原型，创建属性和方法，对象原型不创建属性和方法，而直接使用构造函数的原型的属性和方法；
    // 如果对象中有创建属性和方法，和构造函数的原型中的同名，系统优先使用对象中有创建属性和方法；
    // 当一个需要使用的属性和方法在对象中没找到，系统便会去构造函数的原型中找，还没有找到的情况下，
    // 会向上查找到object的原型，直到报null为止；
    // 当所有对象有共同的方法和属性的时候，将这些方法和属性放在构造函数原型中，可以节省资源；
    //声明一个“模拟类”的构造函数
    function User(name, age) {
        this.name = name;
        this.age = age;
    }
    // 构造函数的原型
    User.prototype.showName = function (){
        console.log(`My name is ${this.name}`);
    };
    User.prototype.showAge = function (){
        console.log(`I'm ${this.age} years old`);
    };
    User.prototype.nation = "中国";
    // User.prototype = {
    //     // 如果修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的使用constructor
    //     // 指回原为的构造函数
    //     constructor: User,
    //     showName: function (){
    //         console.log(`My name is ${this.name}`);
    //     },
    //     showAge: function () {
    //         console.log(`I'm ${this.age} years old`);
    //     },
    //     // nation: "中国",
    // }
    const user1 = new User("admin", 20);
    user1.nation = "联合国";
    console.log(user1); //{name: "admin", age: 20, nation: "联合国"}
    console.log(user1.__proto__);   //{nation: "中国", showName: ƒ, showAge: ƒ, constructor: ƒ}
    console.log(User.prototype);    //{nation: "中国", showName: ƒ, showAge: ƒ, constructor: ƒ}
    console.log(user1.__proto__ === User.prototype);    //true
    user1.showName();   //My name is admin
    user1.showAge();    //I'm 20 years old
    const user2 = new User("peter", 30);
    console.log(user2); //User {name: "peter", age: 30}

---

2、获取dom元素的常用方法

    //获取所有li元素
    const list = document.querySelectorAll("#list li")
    console.log(list);
    //获取第一个li元素
    let first = document.querySelector("#list li");
    console.log(first);
    // 获取某一个或某一类元素
    // 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]);
    // images
    console.log(document.images);
    // href
    console.log(document.location.href);
    // domain
    console.log(document.domain);

---

2、获取dom元素的常用方法

    // 增
    const ul = document.querySelector("#list");
    // 1. 创建元素
    const li = document.createElement("li");
    // parent.appendChild(newEl),添加到页面
    ul.appendChild(li);
    li.innerText = "大家好！";
    //   li.innerHTML = '<i style="color:red">item6</i>';
    let htmlStr = "<li style='color:#ff0000'>同学们好！</li>";
    // 将html字符串直接解析为dom元素
    ul.insertAdjacentHTML("beforeEnd", htmlStr);
    // 删, 删除item4
    ul.removeChild(document.querySelector("li:nth-of-type(4)"));
    // 改
    let h3 = document.createElement("h3");
    h3.innerHTML = "开始上课了......";
    document.querySelector("li:nth-of-type(2)").replaceWith(h3);
    // ul.replaceChild(h3, document.querySelector("li:last-of-type"));
    // 查
    // 获取所有子元素
    console.log(ul.children);
    // 第一个子元素
    console.log(ul.firstElementChild);
    // 最后一个
    console.log(ul.lastElementChild);
    // 父节点
    console.log(ul.lastElementChild.parentElement);
    // 前一个兄弟
    const jiu = document.querySelector("#list li:nth-of-type(9)");
    // 后一个兄弟
    console.log(jiu.nextElementSibling.innerHTML);

例程演示结果