留言板
<!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> <style> .login { width: auto; height: 150px; border: 1px dashed red; background-color: rgb(132, 193, 193); } form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(219, 195, 12, 0.4); background-color: rgba(255, 255, 255, 0.2); width: 250px; border-radius: 3px; padding: 10px 15px; margin: 0 auto 10px auto; /* display: block; */ text-align: center; font-size: 18px; color: rgb(17, 93, 233); transition-duration: 0.25s; font-weight: 300; } </style> </head> <body> <form action="login.php" method="post" id="login"> <fieldset class="login" align="center"> <legend>请登录</legend> <label for="email">邮箱：</label> <input type="email" name="email" id="email" value="admin@php.cn" autofocus /> <br /> <label for="password">密码：</label> <input type="password" name="password" id="password" value="123456" /> <br /> <button>提交</button> </fieldset> </form> <script> //获取form元素 第一种方法用querySelector // const form = document.querySelector("#login"); // // console.log(form); // let email1 = form.querySelector("#email"); // console.log(email.value); // //获取form元素 第二种方法用forms // const form1 = document.forms; // console.log(form1[0][1]); // console.log(form1.login.email.value); // 对于forms来说, 索引与id同义; // 可以直接使用input的name属性来匹配表单控件元素; // 控件可以用name来引用, 如果没有name, 就用id; let email = document.forms.login.email.value; let password = document.forms.login.password.value; let user = { email, password, }; console.log(JSON.stringify(user, null, 2)); </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 class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> </ul> <script> //子元素用children let list = document.querySelector(".list"); console.log(list.children); //类数组转换成这数组 //1.用Array.from() console.log(Array.isArray(Array.from(list.children))); // 2.用...rest console.log(Array.isArray([...list.children])); //遍历 //1 传统方式获取第一个元素 document.querySelector(".list>.item:first-of-type").style.color = "white"; //或者 list.children[0].style.background = "coral"; //2用特定语法 // 获取第一个元素用firstElementChild list.firstElementChild.style.background = "blue"; // 获取最后一个元素用lastElementChild list.lastElementChild.style.background = "coral"; // 获取第一个元素的下一个兄弟元素用nextElementSibling list.firstElementChild.nextElementSibling.style.background = "green"; // 获取一个元素的上一个兄弟元素用previousElementSibling list.lastElementChild.previousElementSibling.style.background = "red"; //获取父节点 list.firstElementChild.parentNode.style.border = "2px solid"; </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> <input type="text" onkeydown="addMsg(this)" placeholder="请输入留言" autofocus /> <ul class="list"></ul> <script> function addMsg(e) { //1获取输入框容器 if (event.key === "Enter") { // console.log(e); const ul = document.querySelector(".list"); // 2判断输入内容是否为空， if (e.value.trim().length === 0) { alert("留言不能为空"); e.focus(); return false; } const li = document.createElement("li"); //3不为空则添加到ul里，且添加一个删除按钮 li.innerHTML = e.value + "<button onclick='del(this.parentNode)'>删除</button>"; if (ul.firstElementChild !== null) { ul.firstElementChild.before(li); } else { ul.append(li); } // 4.将输入框清空 e.value = null; // 5，输入框焦点重置 e.focus(); } } function del(e) { return confirm("是否删除") ? e.remove() : false; } </script> </body></html>
