目录
一. HTML DOM常用对象: 对常用元素的简化 *** 作
1. img元素: 唯一的简化，就是创建img时
2. table元素: 逐级管理的方式
(1). table管着行分组
(2).行分组管着行:
(3). 行管着格
(4). 示例: 使用HTML DOM简化动态生成表格，并实现删除行
3. form元素
⬛总结: DOM 5件事: 增删改查+事件绑定:
【前文回顾】👉 DOM *** 作之如何添加、删除、替换元素_04
一. HTML DOM常用对象: 对常用元素的简化 *** 作 1. img元素: 唯一的简化，就是创建img时
(1). var img元素=new Image();
(2). 旧js中: var img元素=document.createElement("img");
(3).强调: 常用的DOM元素中，只有img元素能用new创建。其余元素都只能用document.createElement()创建。
2. table元素: 逐级管理的方式 (1). table管着行分组a. table可以创建行分组
1). var thead=table.createTHead(); //相当于旧js两句话
旧js: var thead=document.createElement("thead");//即创建
table.appendChild(thead);//又添加
2). var tbody=table.createTBody(); //相当于旧js两句话
3). var tfoot=table.createTFoot(); //相当于旧js两句话
b. table可以删除行分组
1). table.deleteTHead();
2). table.deleteTFoot();
c. table可以获取行分组
1). table.tHead
2). table.tFoot
3). table.tBodies[i]
因为HTML标准中规定，其实一个table中可以有多个tbody。HTML DOM就将多个tbody集中保存在一个table.tBodies集合中。通过下标方式，访问某一个tBody。正是因为一个table下可以有多个tBody，所以table是没有deleteTBody()函数的，因为不知道该删除哪一个。
(2). 行分组管着行a. 行分组可以添加行:
1). var tr=行分组.insertRow(i); //一个函数干2件事
2). 意为: 先创建一个新行对象，再将新行对象添加到行分组中i位置。
3). 大概相当于旧js中:
var tr=document.createElement("tr");
行分组.appendChild(tr);
4). 固定套路:
i. 在当前行分组末尾追加新行: var tr=行分组.insertRow()//默认结尾
ii. 在当前行分组开头插入新行: var tr=行分组.insertRow(0)
b. 行分组可以删除行:
1). 行分组.deleteRow(i)
2). 意为: 删除当前行分组内的第i行
3). 坑: 如果deleteRow.前使用行分组删除行时，则下标必须使用行在行分组内的相对下标位置！
4). 问题: 如果用户随便点击一行中的删除按钮，我们虽然可以根据按钮逐级向上找到父元素tr对象。但是，依然不知道用户点的这一行在整个行分组内是第几行。如果不知道下标，就无法删除当前行。
5). 解决: 其实每个行对象身上都自动就有一个属性rowIndex。记录着当前行对象在整个表中的下标位置。
6). 坑: 行对象的rowIndex属性记录的是行在整个表中的下标位置，不是在行分组内的相对位置。而受到表头行的影响，表体中的行的rowIndex值比行在行分组内的相对位置都要大！如果使用行分组作为主语，使用rowIndex作为删除行的参数值，结果实际删除的行一定是原本要删除行的下一行！
7). 解决: 今后要想删除任意一行，不要用行分组作为主语，而应该用table作为主语:
table.deleteRow(tr.rowIndex)
因为主语变成了table，所以参数值刚好也是行在整个table中的下标位置，参数与主语配套了！
c. 行分组可以获取行
行分组.rows[i] //行分组下的所有行对象都集中保存在名为rows的集合中
(3). 行管着格a. 行可以添加格:
1). var 格对象=行.insertCell()//末尾插入！
插入 格
2). 意为: 先创建一个td对象，再将td对象追加到行中
b. 行可以删除格:
行.deleteCell(i) //删除行中下标为i的一个单元格
c. 行可以获取格:
行.cells[i] //行中的所有格对象已经被提前保存在了名为cells的集合中
(4). 示例: 使用HTML DOM简化动态生成表格，并实现删除行1_createTable3_delete.html
动态创建表格
ename
salary
age
运行结果：
3. form元素🌱 扩展：对象底层的原理：
◼️对象底层的原理: js中对象底层其实也是一个关联数组。——整个js内存中，一切都是关联数组！
👉1). 都是保存的"名值对儿"的集合
👉2). 其实无论访问数组的元素，还是访问对象的成员，都可以用["下标名"]方式访问。只不过，如果属性名是自定义字符串，就可简写为".属性名"方式
➡️ 如果我们写".属性名"会被自动翻译回["属性名"]
➡️ 总结: 今后，如果要访问的属性名是写死的固定不变的，既可以用[""]，又可以用.
➡️ 但是, 今后，要访问的属性名来自于变量或动态拼接生成，不是固定的，只能用[变量或表达式]，还不能加""
(1). 获取