![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
构造函数是对象的生产工厂，生产出来的对象，其原型会指向构造函数的原型，对象的原型会从构造函数的原型继承成员（属性和方法），示例如下
function Obj(name,age){this.name = name;this.age = age;}const student1 = new Obj("张三",8);console.log(student1);console.log(student1 instanceof Obj);Obj.prototype.banji = "三年级";console.log(student1);Obj.prototype.show = function(){return `学生${this.name}的年龄是${this.age}岁，目前上${this.banji}。`;};console.log(student1.show());
获取元素的常用方法一般有四种，通过css选择器，css属性选择器获取,通过id获取，通过标签元素获取。
示例如下
<title>跟着朱老师学php</title><body><ul><li id="site">首页</li><li class="lanmu">栏目1</li><li class="lanmu">栏目2</li><li class="lanmu">栏目3</li><li class="lanmu">栏目4</li></ul><script>//通过标签元素获取，获取后用数组下标的方式调用某个元素let huoQu = document.getElementsByTagName("title");console.log(huoQu[0]);//通过id获取，直接调用,不检查id是否唯一，返回第一个huoQu = document.getElementById("site");console.log(huoQu);//通过css属性选择器，用数组索引号的方式调用某个元素huoQu = document.getElementsByClassName("lanmu");console.log(huoQu[2]);//通过css选择器，适用范围最广，既能用id也能用css属性，还能用标签huoQu = document.querySelectorAll(".lanmu");console.log(huoQu);huoQu = document.querySelectorAll("#site");console.log(huoQu[0]);huoQu = document.querySelectorAll("ul");console.log(huoQu[0]);</script></body>
1、创建元素要用createElement方法
2、给元素添加内容有两种方法，一种是innerHTML,一种是innerText
3、添加到页面中，要用appendChild方法，应用在其父元素上
示例如下
<body><ul><li id="site">首页</li><li class="lanmu">栏目1</li><li class="lanmu">栏目2</li><li class="lanmu">栏目3</li><li class="lanmu">栏目4</li></ul><script>const ul = document.querySelector("ul");const li = document.createElement('li');li.innerHTML = "<i>栏目5</i>";ul.appendChild(li);console.log(ul);</script></body>
1、需要使用 AdjacentHTML方法
2、AdjacentHTML()，方法有两个参数，第一个是插入位置，比如beforeEnd（结束标签之前）、afterBegin(开始标签之后),第二个参数是插入字符串
示例如下
<body><ul><li id="site">首页</li><li class="lanmu">栏目1</li><li class="lanmu">栏目2</li><li class="lanmu">栏目3</li><li class="lanmu">栏目4</li></ul><script>const ul = document.querySelector("ul");const li = document.createElement('li');let str = '<li class="lanmu">栏目5</li>';ul.insertAdjacentHTML("beforeEnd",str);console.log(ul);</script></body>
文档片段方法为createDocumentFragment(),利用for循环将所有生成的元素挂载到文档片段上面，然后统一添加。
示例如下
<body><ul><li id="site">首页</li><li class="lanmu">栏目1</li><li class="lanmu">栏目2</li><li class="lanmu">栏目3</li><li class="lanmu">栏目4</li></ul><script>const ul = document.querySelector("ul");const frag = document.createDocumentFragment();for(let i=0;i<5;i++){const li = document.createElement('li');li.innerText = `栏目${i+5}`;frag.appendChild(li);}ul.appendChild(frag);console.log(ul);</script></body>
运算结果如下图所示
修改替换，使用的是replaceWith()方法
如果用父级方法，使用的是replaceChild(替换内容,被替换的子元素)
<body><ul><li id="site">首页</li><li class="lanmu">栏目1</li><li class="lanmu">栏目2</li><li class="lanmu">栏目3</li><li class="lanmu">栏目4</li></ul><script>const li3 = document.querySelector("li:nth-of-type(4)");let tiHuan = document.createElement('li');tiHuan.innerHTML = '这个栏目内容被替换';li3.replaceWith(tiHuan);console.log(li3);</script></body>
运算结果如图所示
使用父节点操作方法 removeChild()
示例如下
<body><ul><li id="site">首页</li><li class="lanmu">栏目1</li><li class="lanmu">栏目2</li><li class="lanmu">栏目3</li><li class="lanmu">栏目4</li></ul><script>const ul = document.querySelector("ul");const li3 = document.querySelector("li:nth-of-type(4)");ul.removeChild(li3);</script></body>
//获取所有子元素
ul.children
//获取所有子元素的数量
ul.childElementCount