Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【JS】JS获取表单元素和遍历Dom树***前后端交互*重点掌握
Blogger Information
Blog 94
fans 0
comment 0
visits 92495
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【JS】JS获取表单元素和遍历Dom树***前后端交互*重点掌握
可乐随笔
Original
502 people have browsed it

表单元素获取和遍历Dom树**前后端交互重点掌握

1.表单元素获取

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>获取表单元素</title>
  8.   </head>
  9.   <body>
  10.     <form action="login.php" method="post" id="login">
  11.       <fieldset class="login">
  12.         <legend>用户名称</legend>
  13.         <label for="email">邮箱：</label>
  14.         <input type="email" name="email" id="email" value="admin@qq.com" />
  15.         <label for="password">密码：</label>
  16.         <input
  17.           type="password"
  18.           name="password"
  19.           id="password"
  20.           value="123456"
  21.           autocomplete
  22.         />
  23.         <button>提交</button>
  24.       </fieldset>
  25.     </form>
  27.     <script>
  28.       // 1. 获取表单：forms.id
  29.       console.log(document.forms.login);
  30.       // 2. 获取表单控件：forms.id.name //id和name都可以获取控件元素
  31.       console.log(document.forms.login.email);
  32.       // 3. 获取表单控件的值，forms.id.name.value
  33.       console.log(document.forms.login.email.value);
  35.       // 前后端分离
  36.       // 前端 <-> (JSON格式的字符串) <-> 服务器
  37.       // 将表单中邮箱和密码发送到服务器端
  39.       // 第一步：获取表单邮箱和密码
  40.       let login = document.forms.login;
  41.       let email = login.email.value;
  42.       let password = login.password.value;
  43.       console.log(email, password);
  45.       // 第二步：转为JS对象
  46.       let user = { email, password };
  48.       // 第三步：把JS对象序列化为JSON字符串
  49.       let json = JSON.stringify(user)
  50.       console.log(json)
  52.       /**
  53.        * * 总结
  54.        * * 1. 表单：form.id
  55.        * * 2. 表单控件：input.name
  56.        * * 3. 表单控件的值：input.name.value
  57.       */
  59.     </script>
  61.   </body>
  62. </html>

2.遍历Dom树

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>遍历Dom树</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.       <li>item6</li>
  17.     </ul>
  19.     <script>
  20.       /**
  21.        * * 节点类型（12个，常用3个）
  22.        * * 1. document:文档类型，9
  23.        * * 2. element:元素类型，1
  24.        * * 3. text:文本类型，3
  25.        */
  26.       // 列表 <ul class='list'>
  27.       let list = document.querySelector('.list');
  28.       // nodeType 节点类型
  29.       console.log(list.nodeType);
  31.       // 1. 获取所有子节点：childNodes
  32.       let items = list.childNodes;
  33.       console.log(items);
  34.       //输出了13个子节点，包括7个文本节点（控制元素：回车符、空格符等）
  35.       //输出6个元素结点
  36.       //返回的是一个类数组，可以用forEach属性遍历
  38.       // 2.将类数组转换为真数组
  39.       // 2.1 Array.from
  40.       console.log(Array.from(items));
  41.       // 2.2. ...rest
  42.       console.log([...items]);
  43.       // 转为数组之后，Array很多API都可以调用
  45.       // 3. 将数组中的元素类型节点返回
  46.       let result = [...items].filter((item) => item.nodeType === 1);
  47.       console.log(result);
  48.       //3.1 封装一个函数，方便获取子元素使用
  49.       const getChildren = (items) =>
  50.         [...items].filter((item) => item.nodeType === 1);
  51.       //使用这个函数API
  52.       console.log(getChildren(items));
  53.       //3.2 children: js已经给我们封装好了一个属性，children
  54.       console.log(list.children);
  55.       //children 获取的是类数组
  56.       //3.3 取第一个子元素
  57.       //ele.textContent:元素内的文本
  58.       console.log(list.children[0].textContent);
  59.       // 4. 语法糖
  60.       // 4.1 拿到第一个元素
  61.       let first = list.firstElementChild;
  62.       console.log(first);
  63.       // 4.2 拿到下一个兄弟
  64.       let next = list.querySelector(':first-child + *');
  65.       next.style.color = 'blue';
  66.       next = first.nextElementSibling;
  67.       //4.3 最后一个
  68.       let last = list.lastElementChild;
  69.       last.style.color = 'red';
  70.       //4.4 前一个兄弟
  71.       let prev = last.previousElementSibling;
  72.       prev.style.color = 'violet';
  73.       //4.5 父节点
  74.       let parnet = first.parentElement;
  75.       parnet.style.border = '1px solid';
  77.       // 5. 遍历
  78.       // {}[]()前面加; 
  79.       [...list.children].forEach((item) => (item.style.border ='1px solid'));
  80.     </script>
  81.   </body>
  82. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post