浏览器中的JS以及表单的DOM元素获取

浏览器中的JS

事件属性

1.预定义属性：比如classs,id等等这些就是预定义属性
2.自定义属性：data-xxxx 这就是自定义属性，data- 是前缀
3.事件属性： 事件属性就是JS代码 用on+事件名称

3.1 和CSS一样 写在事件属性中的JS代码叫行内脚本
3.2 写在HTML中的<script></script>标签中的叫文档脚本（一个HTML中，可以又几个script 会自动合并）
3.3 写在外部JS文件里面 通过<script src="这里是地址"></script>引入的叫做外部脚本

类数组

  const a =[1,2,3,4,5,6];
   console.log(a);
    const b ={
        0:1,
        1:2,
        2:3,
        3:4,
        4:5,
        5:6,
        length:6,
    };
    console.log(b);

在上方代码中，a就是一个真数组，而下面的b虽然是对象字面量，但是他的内部结构与数组一样，所以被称为类数组。
类数组的访问与真数组一样
console.log(b[0]);

页面中的DOM元素获取

html的文档结构 是一个树形的层级的结构化文档，在页面中通过docmuent来访问
下面是获取模型
1.这里有一个列表

  <ul class="list">
        <li class="item">ltem1</li>
        <li class="item">ltem2</li>
        <li class="item">ltem3</li>
        <li class="item">ltem4</li>
        <li class="item">ltem5</li>
    </ul>

通过dom操作获取上面列表中的对象
querySelectorAll 是获取一组模型 获取结果是一个类数组

 const a =document.querySelectorAll('.list .ltem');

querySelector 是获取当前选择器的第一个模型 返回结果是一个DOM对象

 const b =document.querySelector('.list');

for-Each 遍历语法

注:上面已经用常量a 接收了通过DOM操作获取到的值
然后在a上调用for-Each方法对a里面的值进行遍历

在for-Each语法中，有两个参数，第一个参数用来存储当前遍历的值，第二个参数用来存储当前遍历值的键名（第二个参数可以选择不接收）

  a.forEach(function(c,d){
        console.log(c,d);
      })

获取表单与控件

在document里面的forms来获取当前页面中的表单（这个是获取所有表单，是一个类数组）
然后通过数组健名获取到对应的表单，再一层一层的往下那，直到拿到对应的值（最后选中的控件里面的值通过 .value 来获取）

 const a = document.forms.biaodan.name.value;

常用的遍历dom的API

html中的节点类型
1.window 全局对象
2.document 文档对象 也就是当前html文件
3.element 元素对象 就是页面的标签
4.texe 文本对象

 const b =document.querySelectorAll('.list');
 console.log(b.childNodes)

childNodes 可以查看当前获取元素的节点（所有节点，具体的类型通过数字表示）

 console.log(b.children)

children 可以值获取元素类型的节点 这个是最常用的（返回结果是一个类数组）

将类数组转换为真数组，然后用for-Each 遍历并进行操作

转换方法：将获取的类数组展开.获得当前的元素节点，变成一个真数组

 [...b.children].for-Each(li,a);

下方API 拿到当前元素的下一个兄弟元素

 nextElementSibling

下方API 拿到当前元素的前一个兄弟元素

 previousElementSibling

拿到当前元素的父节点

 parentElement