获取元素的api
<!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.id console.log(document.forms.login) // 2. 获取表单控件: forms.id.name/id 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 // 第二步: 转为 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>
dom常用的遍历方法
<!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. 所有子节点: childNodes let items = list.childNodes console.log(items) // 类数组 // 1. Array.from console.log(Array.from(items)) // 2. ...rest console.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.firstElementChild console.log(first.textContent) // 4. 后一个 let next = list.querySelector(':first-child + *') next.style.color = 'red' next = first.nextElementSibling // 5. 最后一个 let last = list.lastElementChild last.style.color = 'red' // 6. 前一个 let prev = last.previousElementSibling prev.style.color = 'violet' // 7. 父节点: 一定是元素或文档类型 let parent = first.parentNode console.log(parent) parent.style.border = '1px solid' // 8. 遍历 // 在 [],{},()前分号不能省 // 为什么不能用forEach,因为返回的不是 NodeList ;[...list.children].forEach(item => (item.style.border = '1px solid red')) </script> </body></html>
