构造函数及dom元素持增删改操作
1. 构造函数的原型与对象原型之间的区别与联系
总体上，构造函数是“对象工厂”，是用来创建对象的
对象也叫“实例”，是Js通过new来调用构造函数来创建一个实际案例。
new创建对象的过程，就叫类的实例化
示范代码：
// 一个“类”function User(name,age){this.name = name;this.age = age;}//定义User构造函数原型方法User.prototype.showName = function(){console.log(`my name is ${this.name},from ${this.nation}`);};User.prototype.shwoAge = function(){console.log(`i am ${this.age} old`);};//定义User构造函数原型变量User.prototype.nation = "中国";//实例两个对象user1，user2const user1 = new User("神仙",20);const user2 = new User("魔鬼",30);//以下输出 User {name:"神仙",age:20}console.log(user1);//以下输出 中国，原来user1或者user2定义时，并没有传入中国的属性，代码在对象user1/user2中没有找到相关变量声明时，就会回到两个对象共同的构造函数中去找，且找到User.prototype.nation="中国"声明，该属性被所有通过User构造函数实例的对象共享console.log(user1.nation);console.log(user2.nation);//以下输出：User {name: "神仙", age: 20, nation: "联合国"}，User虽然声明了nation=中国，但是user1已经将nation属性重新定义，定义后就可以打印到控制台中user1.nation = "联合国";console.log(user1);//d输出 User {name: "魔鬼", age: 30}，没有重新定义nation，所以不会打印出来，但是的确存在共享属性nation=中国。console.log(user2);//输出 my name is 神仙,from 联合国，user1没有定义该方法，系统会向上查找到构造方法原型中console.log(user1.showName());//改写对象中的原型方法user1.__proto__.showName = function(){console.log("神挡杀神");};// 输出 神挡杀神console.log(user1.showName());
不难看出，通过构造函数new（实例化）出来的对象，都会继承构造函数原型中的所有属性或者方法，属性不建议共享，但是方法写到构造函数原型中，能够简化代码，方便调用
当调用属性或者方法在对象中没找到，系统便会去构造函数的原型中找，还没有找到的情况下会向上查找到object的原型，直到报null为止；
2. 获取dom元素的常用方法
dom元素的获取有多种方法
<button id="1",class="2",name="3">button1</button>let btn = document.getElementById("1"); //通过id属性来获取元素let btn = document.getElementByTagName("button"); //通过标签名来获取元素let btn = document.getElementByName("3"); //通过name属性来获取元素let btn = document.getElementByClassName("2");//通过class类名属性来获取元素
方法有多种，但是我们推荐用CSS选择器的方式来获取
<ul class="course"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li></ul>let ul = document.querySelector(".course");//获取到ul元素let liList = document.querySelector(".course .item");//获取item类第一个元素//当需要获取到所有相同属性的元素集合时，可以使用querySelectorAlllet liList = document.querySelectorAll(".course > .item");//获取所有li//里面元素可以使用【下标】来提取console.log(liList[0]); //第一个，等同于querySelector（）；//拿到元素集合后，可以通过foreach来遍历liList.foreach((item,index,Array){console.log(item,index);//index代表下标索引，item代表元素});//也可以将liList 转化为数组，下面提供两种转化方法let lisArr = Array.from(liList);let lisArr = [...liList];
3. dom元素的增删改查常用操作
公共代码：
<ul class="course"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li></ul>//获取ul元素const ul = document.querySelector(".course");
1.增加元素
//需要增加的元素liconst li = document.createElement("li");//parent.appendChild(li); //将li元素添加到html页面中，最后位置//想将li添加到ul中，有三种方法：//方法1：子元素扩充，li成为ul的最后一个子元素ul.appendChild(li);//方法2：定义新增元素的html代码语句，用insertAdjacentHTML方法，可以指定位置let addLiHtml = "<li style='color:red'>新增元素li</li>";//insertAdjacentHTML方法的第一个参数：// beforeBegin:开始之前，即已经不属于ul了// afterBegin:开始之后，此时新增li变成ul的第一个子元素// beforeEnd:结束之前，此时新增li变成ul的最后一个子元素// afterEnd:结束之后，即已经不属于ul了ul.insertAdjacentHTML("beforeEnd",addLiHtml);//方法3：增加元素，可以指定位置ul.insertAdjacentElement("afterBegin",li);//需要大量添加元素时，如果一个一个加，页面就会频繁刷新，此时可以考虑用文档片断完成const frag = new DocumentFragment();//const frag = document.createDocumentFragment(); 这种方法创建片断也可以for(let i=0;i<5;i++){const li = document.createElement("li");li.textContent = 'hello' + (i+1);frag.appendChild(li);}//将片断挂到ul后面，成为ul的子元素ul.appendChild(flag);
2.更新元素
const h3 = document.createElement("h3");h3.innerHTML = "晚上好";//先查找被替换的旧元素，然后用replaceWith()将，新元素替换旧元素document.querySelector('li:nth-of-type(3)').replaceWith(h3);、//如果要在父元素上进行操作replaceChild(新元素，旧元素)ul.replaceChild(h3,document.querySelector("li:nth-of-type(3)"));
3.移除元素
//在父元素进行操作,删除子元素ul.removeChild(document.querySelector("#list h3"));
4.查询元素
//获取所有子元素console.log(ul.children);//获取所有子元素的数量console.log(ul.children.lenght);console.log(ul.childElementCount);//获取第一个子元素console.log(ul.firstElementChild);//获取最后一个子元素console.log(ul.lastElementChild);//找前一个兄弟,先定位const nine = document.querySelector("li:nth-of-type(2)");//从定位出发，找前一个console.log(nine.previousElementSibling.innerHTML);//从定位出发，找后一个console.log(nine.nextElementSibling.innerHTML);
