收藏
PHPz批改状态：合格
老师批语：
<!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><inputtype="password"name="password"id="password"value="123456"autocomplete/><button>提交</button></fieldset></form><script>// 1. 获取表单：forms.idconsole.log(document.forms.login);// 2. 获取表单控件：forms.id.name //id和name都可以获取控件元素console.log(document.forms.login.email);// 3. 获取表单控件的值，forms.id.name.valueconsole.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>
<!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. 获取所有子节点：childNodeslet items = list.childNodes;console.log(items);//输出了13个子节点，包括7个文本节点（控制元素：回车符、空格符等）//输出6个元素结点//返回的是一个类数组，可以用forEach属性遍历// 2.将类数组转换为真数组// 2.1 Array.fromconsole.log(Array.from(items));// 2.2. ...restconsole.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);//使用这个函数APIconsole.log(getChildren(items));//3.2 children: js已经给我们封装好了一个属性，childrenconsole.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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
