实例演示类数组与纯数组及获取dom元素和表单及控件值与dom元素遍历

题目一：1实例演示类数组与纯数组

对应的js文件如下：

// *一.纯数组
const city=['beijing','shanghai','guangzhou'];
console.log(city);
// *判断数组是否是对象
console.log(city instanceof Object);
// *观察这种数组有两个特点：
// *1.每个值对应一个键名（也叫索引），是从0，1，2，3，...
// *2.有一个length属性，叫数组长度
// *3.这种数组叫纯数组或叫真数组
// *二.模仿数组的形式创建一对象：类数组：
const student={
    0:'name1',
    1:'age',
    2:'sex',
    length:3,
};
console.log(student);
// *以上两种形式都很相似，而区别就是：一种是数组构造器，另一种是对象构造器
// *这样的对象数组就称为类数组，其实就是一个对象字面量。
// *类数组的意思就是很相似数组，但其实不是数组

对应的浏览器效果图如下：

题目二：2获取dom元素的API以及使用场景实例

对应的js文件如下：

// *获取dom元素有两种方式：
// *1.获取一组dom元素：
// *用querySelectorAll()方式，返回类数组
const list=document.querySelectorAll('.menu .title');
console.log(list);
// *2.获取一个dom元素
// *用querySelector()方式，返回一个dom元素
// *取第一个元素
const first=document.querySelector('.menu .title');
console.log(first);
first.style.backgroundColor='red';

对应的浏览器效果图如下：

题目三：3实例演示优雅获取form表单的元素与控件的值

对应的js文件如下：

// *用较为优雅简洁的方式获取表单元素及其控件的值：
// *获取表单
console.log(document.forms.login);
// *获取控件邮箱
console.log(document.forms.login.email);
// *获取控件邮箱的值
console.log(document.forms.login.email.value);
// *获取控件密码
console.log(document.forms.login.password);
// *获取控件密码的值
console.log(document.forms.login.password.value);

对应的浏览器效果图如下：

题目四：4实例演示dom元素的遍历与常用的API

对应的js文件如下：

let ul=document.querySelector('.gz');
// *返回元素节点（类数组）
console.log(ul.children);
// *将类数组转为真数组的方法
console.log([...ul.children]);
// *设置第一个元素背景色
ul.firstElementChild.style.backgroundColor='red';
// *第二个
ul.firstElementChild.nextElementSibling.style.backgroundColor='green';
// *最后一个
ul.lastElementChild.style.backgroundColor='lightblue';
// *倒数第二个
ul.lastElementChild.previousElementSibling.style.backgroundColor='lightgreen';
// *为父节点加边框
ul.lastElementChild.parentElement.style.border='2px solid red';

对应的浏览器效果图如下：