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

首页 > 博客列表 > 【JS】JS获取表单元素和遍历Dom树***前后端交互*重点掌握

博主信息

博文 94

粉丝 0

访问量 111265

专题推荐

更多>

表单元素获取和遍历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>