![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>获取表单元素</title></head><body><style>.form {width: 20em;display: grid;grid-template-columns: 1fr;gap: 0.5em 1em;}input {text-align: center;}</style><form class="form" id="form"><input type="text" name="user" placeholder="输入用户名" /><input type="text" name="pass" placeholder="输入密码" /><button>提交</button><script>// 传统获取方式：上一课讲的两个API// 获取表单let form = document.querySelector(".form");// 获取用户let user = document.querySelector("input[name='user']");// 获取密码let pass = document.querySelector("input[name='pass']");console.log(form);console.log(user);console.log(pass);// 推荐方式：用document.forms属性.name属性值(或id值)user = document.forms.form.user;pass = document.forms.form.pass;user.value = "超人";pass.value = "123456789";// 前后端数据交互、form = document.forms.form;user = form.user.value;pass = form.pass.value;// 转为jsonlet users = { user, pass };// 用函数转为json字符串let data = JSON.stringify(users);console.log(data);</script></form></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>遍历DOM树</title></head><body><ul class="list"><li class="item">项目1</li><li class="item">项目2</li><li class="item">项目3</li><li class="item">项目4</li><li class="item">项目5</li><li class="item">项目6</li></ul><script>// 1. 节点类型：元素、文本、属性、注释、文档// 通常只关注元素类型let Ul = document.querySelector(".list");let items = Ul.children;// 上条获得的items类型是HTMLCollection// 获得的是类数组，不是数组，不能用数组的方法// 类数组特征：// 有从0开始递增的正整数索引// 有length属性console.log(items);// 2. 转化为真数组// 2.1 用函数转化let Li = Array.from(items);// 现在items类型是Array数组了，可以用数组的方法引用console.log(Li);// 2.2 用...rest转化let Li_items = [...items];console.log(Li_items);Li[0].style.fontSize = "3em";// 3. 用语法糖遍历// 第一个子元素Ul.firstElementChild.style.color = "red";// 下一个兄弟元素Ul.firstElementChild.nextElementSibling.style.color = "blue";// 最后一个子元素Ul.lastElementChild.style.fontSize = "2em";// 前一个兄弟元素Ul.lastElementChild.previousElementSibling.style.color = "red";</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>dom元素的增删改</title></head><body><script>// 1. 创建元素const h3 = document.createElement("h3");// 2.添加到页面中document.body.append(h3);h3.textContent = "创建的元素";// 创建ul元素const ul = document.createElement("ul");document.body.append(ul);// 创建列表项for (i = 0; i < 6; i++) {const li = document.createElement("li");li.textContent = "项目" + (i + 1);ul.append(li);}console.log(ul);console.log(ul.outerHTML);// 3. 插入节点// 示例：在第四个节点前后插入列表项const li = document.createElement("li");// 设置列表内容和样式li.textContent = "新的项目";li.style.fontSize = "3em";// 获取第四个节点const li_four = document.querySelector("li:nth-of-type(4)");// 在节点前插入新列表项li_four.before(li);// 克隆列表，用colenNode方法，true复制后代内容，即文本const li_copy = li.cloneNode(true);// 在节点后插入li_four.after(li_copy);// 以父节点标签为插入点，进行插入元素示例// 语法：insertAdjacentElement('插入位置',元素)// 插入位置有四个：可以不分大小写// afterBegin:开始标签后的第一个子元素// beforeBegin:开始标签之前的兄弟元素// afterEnd：结束标签之后的兄弟元素// beforeEnd：结束标签之前的子元素// 例：在上面列表前插入h4const h4 = document.createElement("h4");h4.textContent = "新列表";ul.insertAdjacentElement("beforebegin", h4);// 例：在列表后插入pconst p = document.createElement("p");p.textContent = "共计8个项目";ul.insertAdjacentElement("afterEnd", p);// 4. 替换节点语法： replaceChild(新节点，替换的节点)// 获取要替换的节点const li_replace = document.querySelector("li:nth-of-type(8)");// 创建要替换的元素const a = document.createElement("a");a.textContent = "php.cn";a.href = "https://php.cn";// 调用函数替换ul.replaceChild(a, li_replace);// 5. 删除节点：获取要删除的节点，使用 remove()方法document.querySelector("li:nth-of-type(7)").remove();</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>js操作元素内容</title></head><body><div class="box"><style>h3 {color: crimson;}</style><h3>聚餐通知</h3><p>公司全体员工：</p><p>今天晚上全体在食堂聚餐，加菜，全羊宴！</p></div><script>// 查看元素内容textContent、innerHtml、innerText的不同const div = document.querySelector(".box");// textContent：返回元素及后代元素中所有文本内容，包括h3样式的内容console.log(div.textContent);// innerHTML：返回文本内容包含标签字符串console.log(div.innerHTML);// innerText：只返回元素以及后代中的文本console.log(div.innerText);// outerHTML：返回当前节点的html字符串console.log(div.outerHTML);// 小结：首选textContent// 清空div.outerHTML = null;</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>DOM实战：留言板</title></head><body><style>input {width: 30em;height: 1.5rem;}li {margin: 0.4em;}</style><!-- 按下键时触发 --><input type="text" placeholder="输入留言" onkeydown="addMsg(this)" /><hr /><p>留言：</p><ul class="msgList"></ul><script>// 定义触发函数，接收传递的元素function addMsg(inputText) {// 判断按下的键是否是回车，回车就记录输入的留言。// 用event对象的key值是否是“enter”判断// event对象包含当前事件的所有信息，是当前事件的对象if (event.key === "Enter") {// 判断留言是否为空。这个判断语句不完善，根据长度判断也不完善if (inputText.value === "") {alert("留言不能为空");// 重新激活输入框inputText.focus();return false;}// 获取留言列表const ul_Msg = document.querySelector(".msgList");// 添加留言，带删除按键，调用删除函数。const li = document.createElement("li");li.innerHTML = `${inputText.value}<button onclick="del(this.parentNode)">删除</button>`;// 留言添加到ul开始元素后面，这样确保最新留言在最前ul_Msg.insertAdjacentElement("afterbegin", li);// 清空留言框inputText.value = null;// 重新激留言框inputText.focus();}}// 定义删除函数，接收传递的li删除function del(li_del) {// 删除前用户确认，用函数confirm("提示信息")// 点确定返回true，点取消返回falsereturn confirm("是否删除此留言？") ? li_del.remove() : false;}</script></body></html>
元素属性有二类:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>自定义属性: dataset对象</title></head><body><!-- 根据按钮显示自定义属性的值 --><div class="btn-group"><!-- 用data-value自定义属性存放值 --><button data-index-value="1号" onclick="getValue(this)">按键1</button><button data-index-value="2号" onclick="getValue(this)">按键2</button><button data-index-value="3号" onclick="getValue(this)">按键3</button></div><p data-value="php.cn"></p><script>function getValue(value) {// 自定义属性使用dataset.属性名调用// 属性名有-符号时改为驼峰写法alert(`点击的是${value.dataset.indexValue}按钮`);}// 自定义属性可读可写const p = document.querySelector("p");p.dataset.value = "php中文网";console.log(p.dataset.value);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>js操作css</title></head><body><style>div {width: 20em;}</style><div style="font-size: 2em; color: chocolate"></div><script>let div = document.querySelector("div");// 获取行内样式console.log(div.style.fontSize);// 计算样式：指内部style标签样式或外部css文件样式// 获取外部样式，用全局方法window.getComputedStyle(标签，伪元素)console.log(window.getComputedStyle(div).width);// 操作：宽度加100pxlet width = window.getComputedStyle(div).width;// 得到的宽度是字符串，用parseInt()函数提取出数字width = parseInt(width) + 100 + "px";// 在行内样式中加入样式div.style.width = width;console.log(div.style.width);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>js操作class属性: classList对象</title></head><body><h2>学习php</h2><style>.red {color: red;}.bg-yello {background-color: yellow;}.turquoise {color: turquoise;}</style><script>// 1. 用传统方式添加样式let h2 = document.querySelector("h2");h2.className = "red bg-yello";// 2. 用classList对象// 添加样式：add方法h2.classList.add("turquoise");// 判断样式是否存在：contains方法console.log(h2.classList.contains("red"));// 移除样式h2.classList.remove("bg-yello");// 替换样式：方法replace(要替换的样式名，替换样式)h2.classList.replace("turquoise", "red");// 切换样式：toggle方法// 如果要切换的样式已存在，则移除，否则添加// 如red样式上条语句已生效，则下面语句变为移除red样式h2.classList.toggle("red");</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件的添加与删除</title></head><body><button>开始</button><button>事件监听</button><button>事件派发</button><script>// 获取元素const btn1 = document.querySelector("button:first-of-type");// 添加点击事件btn1.onclick = () => {console.log(event);};// 删除事件btn1.onclick = null;// 事件监听器// 获取元素const btn2 = document.querySelector("button:nth-of-type(2)");// 监听事件addEventListener("监听事件",动作,false)，false表示冒泡事件btn2.addEventListener("click", show, false);// 删除事件btn2.removeEventListener("click", show, false);function show() {console.log(event);}// 事件派发：事件发生时，自动触发动作btn3 = document.querySelector("button:nth-of-type(3)");// 监听事件，自调用let i = 0;btn3.addEventListener("click",() => {console.log(`点赞${++i}个`);},false);// 创建自定义事件，通过event对象const myClick = new Event("click");// 触发3次自定义事件btn3.dispatchEvent(myClick);btn3.dispatchEvent(myClick);btn3.dispatchEvent(myClick);// 用一次性定时器触发1500毫秒setTimeout(() => {btn3.dispatchEvent(myClick);}, 1500);// 用间歇定时器触发setInterval(() => {btn3.dispatchEvent(myClick);}, 1500);</script></body></html>