表单元素获取和遍历Dom树**前后端交互重点掌握
1.表单元素获取
<!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> <form action="login.php" method="post" id="login"> <fieldset class="login"> <legend>用户名称</legend> <label for="email">邮箱：</label> <input type="email" name="email" id="email" value="admin@qq.com" /> <label for="password">密码：</label> <input type="password" name="password" id="password" value="123456" autocomplete /> <button>提交</button> </fieldset> </form> <script> // 1. 获取表单：forms.id console.log(document.forms.login); // 2. 获取表单控件：forms.id.name //id和name都可以获取控件元素 console.log(document.forms.login.email); // 3. 获取表单控件的值，forms.id.name.value console.log(document.forms.login.email.value); // 前后端分离 // 前端 <-> (JSON格式的字符串) <-> 服务器 // 将表单中邮箱和密码发送到服务器端 // 第一步：获取表单邮箱和密码 let login = document.forms.login; let email = login.email.value; let password = login.password.value; console.log(email, password); // 第二步：转为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>
2.遍历Dom树
<!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>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. 获取所有子节点：childNodes let items = list.childNodes; console.log(items); //输出了13个子节点，包括7个文本节点（控制元素：回车符、空格符等） //输出6个元素结点 //返回的是一个类数组，可以用forEach属性遍历 // 2.将类数组转换为真数组 // 2.1 Array.from console.log(Array.from(items)); // 2.2. ...rest console.log([...items]); // 转为数组之后，Array很多API都可以调用 // 3. 将数组中的元素类型节点返回 let result = [...items].filter((item) => item.nodeType === 1); console.log(result); //3.1 封装一个函数，方便获取子元素使用 const getChildren = (items) => [...items].filter((item) => item.nodeType === 1); //使用这个函数API console.log(getChildren(items)); //3.2 children: js已经给我们封装好了一个属性，children console.log(list.children); //children 获取的是类数组 //3.3 取第一个子元素 //ele.textContent:元素内的文本 console.log(list.children[0].textContent); // 4. 语法糖 // 4.1 拿到第一个元素 let first = list.firstElementChild; console.log(first); // 4.2 拿到下一个兄弟 let next = list.querySelector(':first-child + *'); next.style.color = 'blue'; next = first.nextElementSibling; //4.3 最后一个 let last = list.lastElementChild; last.style.color = 'red'; //4.4 前一个兄弟 let prev = last.previousElementSibling; prev.style.color = 'violet'; //4.5 父节点 let parnet = first.parentElement; parnet.style.border = '1px solid'; // 5. 遍历 // {}[]()前面加; [...list.children].forEach((item) => (item.style.border ='1px solid')); </script> </body></html>
