![[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
console.log(document.forms[0]);
form.id
console.log(document.forms.login);
input:name
console.log(document.forms.login.email);
value
console.log(document.forms.login.email.value);
第一个firstElementChildul.firstElementChild.style.backgroundColor = "yellow";
下一个nextElementSiblingul.firstElementChild.nextElementSibling.style.backgroundColor = "green";
前一个previousElementSiblingul.lastElementChild.previousElementSibling.style.backgroundColor = "lightgreen";
最后一个lastElementChildul.lastElementChild.style.backgroundColor = "yellow";
父节点parentElementul.lastElementChild.parentElement.style.border = "4px solid";
元素节点parentNodeul.lastElementChild.parentNode.style.border = "4px solid red";
增加元素 append
for (let i = 0; i < 5; i++) {const li = document.createElement("li");li.textContent = "item" + (i + 1);ul.append(li);}
移除 removeul.lastElementChild.remove();
替换 replaceChild
const last = document.querySelector("ul li:last-of-type");const a = document.createElement("a");a.textContent = "https://php.cn";ul.replaceChild(a, last);
textContent:返回元素以及后代元素中的所有内容，包括style,display:none的内容
innerText:返回元素以及后代中的文本
innerHTML：返回内部的html中的字符串
outerHTML:返回当前节点的自身的html字符串
textContent首选，innerText,2016年才成为w3c标准
innerHTML可解析html字符，innerText：不解析html 字符
<!DOCTYPE html><html lang="zh-CN"><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><input type="text" onkeydown="addMsg(this)" placeholder="请输入留言内容" autofocus /><ul class="list"></ul><script>function addMsg(ele) {console.log(ele);console.log(event);console.log(event.key);if (event.key === "Enter") {const ul = document.querySelector(".list");if (ele.value.length === 0) {alert("留言板内容不为空");ele.focus();return false;}const li = document.createElement("li");li.textContent = ele.value;ul.append(li);ul.insertAdjacentElement("afterbegin", li);ul.lastElementChild.style.backgroundColor = "yellow";ele.value = null;ele.focus();}}</script></body></html>
dataset 可读可写
function getIndex(btn) {console.log("点击了第", btn.dataset.index, "个按钮");}const user = document.querySelector(".user");console.log(user.dataset.email);console.log(user.dataset.workUnit);user.dataset.workUnit = "php.cn";console.log(user.dataset.workUnit);
getComputedStyle
const div = document.querySelector("div");console.log(window.getComputedStyle(div).width);console.log(window.getComputedStyle(div).height);
1.传统方式
const h2 = document.querySelector("h2");h2.className = "red bgc";
2.classList add添加
h2.classList.add("red");h2.classList.add("bgc");
3.contains；判断
console.log(h2.classList.contains("bgc"));
4.remove 移除class
h2.classList.remove("bgc");
5.replace 替换
h2.classList.replace("red", "blue");
6.toggle:切换class
h2.classList.toggle("bd");
1.事件添加
const btn1 = document.querySelector("button:first-of-type");btn1.onclick = function () {console.log(event);};
const btn3 = document.querySelector("button:nth-of-type(3)");let i = 0;btn3.addEventListener("click",() => {console.log("恭喜你，又赚了" + i + "元");i += 0.8;},false);