![[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="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>表单元素的获取</title></head><body><form action="login.php" method="post" id="login"><fieldset class="login" style="display: inline-grid; gap: 10px"><legend>用户登录</legend><div><label for="email">邮箱:</label><input type="email" name="email" id="email" value="admin@php.cn" autofocus /></div><div><label for="password">密码:</label><input type="password" name="password" id="password" value="123456" /></div><button>提交</button></fieldset></form><script>// 1. 获取表单: forms.idconsole.log(document.forms.login)// 2. 获取表单控件: forms.id.name/idconsole.log(document.forms.login.email)// 3. 获取表单控件的值: forms.id.name.valueconsole.log(document.forms.login.email.value)// 前后端分离/// 前端 <->(JSON格式的字符串) <-> 服务器端// 将表单中的用户邮箱和密码发送到服务器端// 第一步: 获取表邮箱和密码let login = document.forms.loginlet email = login.email.valuelet password = login.password.value// 第二步: 转为 JS 对象let user = { email, password }// 第三步: 把JS对象序列化成JSON字符串let json = JSON.stringify(user)console.log(json)/*** * 总结* * 1. 表单: form.id* * 2. 表单控件: input.name* * 3. 表单控件的值: input.name.value*/</script></body></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><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li></ul><script>/*** * 节点类型(12个,常用3个)* * 1. document: 文档类型, 9* * 2. element: 元素类型, 1* * 3. text: 文本类型, 3*/// 列表<ul class='list'>let list = document.querySelector('.list')// nodeType 节点类型console.log(list.nodeType)// 1. 所有子节点: childNodeslet items = list.childNodesconsole.log(items)// 类数组// 1. Array.fromconsole.log(Array.from(items))// 2. ...restconsole.log([...items])// 转为数组之后,Array很多API都可以用// 要求只返回“元素类型的节点”let result = [...items].filter(item => item.nodeType === 1)console.log(result)// 封装const getChildren = items => [...items].filter(item => item.nodeType === 1)console.log(getChildren(items))// js已经给我们封装好一个属性 children// 2. children : 所有子元素节点console.log(list.children)// children : 类数组// 3. 第一个子元素// ele.textContent: 元素内的文本console.log(list.children[0].textContent)// 语法糖let first = list.firstElementChildconsole.log(first.textContent)// 4. 后一个let next = list.querySelector(':first-child + *')next.style.color = 'red'next = first.nextElementSibling// 5. 最后一个let last = list.lastElementChildlast.style.color = 'red'// 6. 前一个let prev = last.previousElementSiblingprev.style.color = 'violet'// 7. 父节点: 一定是元素或文档类型let parent = first.parentNodeconsole.log(parent)parent.style.border = '1px solid'// 8. 遍历// 在 [],{},()前分号不能省// 为什么不能用forEach,因为返回的不是 NodeList;[...list.children].forEach(item => (item.style.border = '1px solid red'))</script></body></html>
