构造函数及dom元素持增删改查操作

构造函数及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，user2
const 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类第一个元素
//当需要获取到所有相同属性的元素集合时，可以使用querySelectorAll
let 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.增加元素

//需要增加的元素li
const 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);