js之DOM操作/取form表单/遍历DOM树

1.类数组

1.类数组就是对象，属性也是从0开始有lenth属性
2.类数组和真数组访问方式一样

        const url = {
          0: 111,
          1: 222,
          2: 333,
        };
        console.log(url[0], url[1]);

2.获取dom元素的方法

1.querySelectorAll 获取一个组
2.1.querySelector 获取一个值

      //   querySelectorAll类数组
      const items = document.querySelectorAll(`.list .item`);
      console.log(items);
      let ul = document.querySelector(`.list`);
      console.log(ul.childNodes);
      ul.childNodes.forEach((node) => {
        if (node.nodeType === 1) {
          console.log(node);
        }
      });

遍历

      //   第一个
      console.log([...ul.children][0]);
      //   [...ul.children][0].style.color = "blue";
      ul.firstElementChild.style.color = "blue";
      //   第二个
      ul.firstElementChild.nextElementSibling.style.color = "red";
      // 最后一个
      ul.lastElementChild.style.color = "blue";
      //   倒数第二个
      ul.lastElementChild.previousElementSibling.style.color = "yellow";
      //   父节点
      ul.lastElementChild.parentElement.style.border = "2px solid red";

3.获取表单元素的值

    <form action="" id="login">
      <input type="admin" id="admin" value="admin123" /><br />
      <input type="password" id="password" value="password1234556" /><br />
      <button>登录</button>
    </form>
    <script>
      console.log(document.forms.login.admin.value);
      console.log(document.forms.login.password.value);
    </script>