2020/6/2 JS DOM访问表单、下拉框、表格的常用属性和方法，对HTML元素的增删改操作

1.DOM访问表单控件的常用属性和方法如下：

　　action：返回该表单的提交地址。

　　elements：返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。

　　length：返回表单内表单域的个数。

　　method：返回表单内的method属性，主要有get和post两个值。

　　target：确定提交表单时的结果窗口，主要有_self、_blank、_top等。

　　reset()、submit()：重置表单和确定表单方法。

2.在elements返回的数组中访问具体的表单控件：

　　.elements[index]：返回该表单中第index个表单控件。

　　.elements[elementName]：返回表单内id或name为elementName的表单控件。

　　.elementName：返回表单内id或name为elementName的表单控件。

3.DOM访问列表框、下拉菜单的常用属性：

　　form：返回列表框、下拉菜单所在的表单对象。

　　length：返回列表框、下拉菜单的选项个数。

　　options：返回列表框、下拉菜单里所有选项组成的数组。

　　selectedIndex：返回下拉列表中选中选项的索引。

　　type：返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one

4.使用options[index]返回具体选项所对应的常用属性：

　　defaultSelected：返回该选项默认是否被选中。

　　index：返回该选项在列表框、下拉菜单中的索引。

　　selected：返回该选项是否被选中。

　　text：返回该选项呈现的文本。

　　value：返回该选项的value属性值。

5. DOM访问表格子元素的常用属性和方法：

　　caption：返回表格的标题对象。

　　rows：返回该表格里的所有表格行(数组)。

　　cells：返回该表格行内所有的单元格组成的数组。

　　cellIndex：返回该单元格在表格行内的索引值。

6.  DOM对HTML元素的增删改

　　DOM创建节点的方法：document.createElement(Tag)，Tag必须是合法的HTML元素

　　DOM复制节点的方法：节点cloneNode(boolean deep)，当deep为true时，表示复制当前节点以及当前结点的全部后代节点。为false时，只复制当前节点。

　　　　　　　　　　　　  浅复制：只复制元素节点          深复制：元素节点以及其中的文本节点属性都复制

　　DOM添加、删除节点的方法：

　　　　　　　　appendChild(newNode)：将newNode添加成当前节点的最后一个子节点。

　　　　　　　　insertBefore(newNode,refNode)：将refNode节点之前插入newNode节点。

　　　　　　　　replaceChild(newNode,oldNode)：将oldNode节点替换成newNode节点。

　　　　　　　　removeChild(oldNode)：将oldNode子节点删除。

7.DOM为下拉菜单（select）添加选项的方式：

　　创建select元素节点：var select=document.createElement("select");

　　设置select标签的id属性以及size属性：select.id = "city";

    　　　　　　　　　　　　　　　　　　select.size = 5;

　　循环创建option元素：for (i = 0; i < 10; i++) {

            　　　　　　　　　　创建option元素：

　　　　　　　　　　　　　  var option = new Option("选项" + i, i);

　　　　　　　　　　　　　 将option元素添加到ul里：

           　　　　　　　　　　 select.options[i] = option;

      　　　　　　　　　　  }

　　获取body标签：var body = document.getElementsByTagName("body")[0];

　　将select元素添加到body标签中：body.appendChild(select);

　　删除option：（删除select下的最后一个option） select.remove(select.options.length - 1);

　　清空下拉菜单：（直接让option组成的数组的长度为0）select.options.length = 0；