js基础学习第三天

DOM中的表单

表单就是在标签<form>中的节点，可以用取得普通节点的方法获取表单节点

事实上，0级DOM（0级DOM并不是任何DOM规范，事实上它是BOM的内容，但浏览器都实现的比较好）为我们提供了更简单的访问From对象的方法——使document.formName

需要注意的是。因为表单可以重名。所以这个返回对象是一个nodeList。如果只有一个。可以直接把他当做node也可以当做数组 用下表【0】来操作。（本来菜鸟 这个不明白为什么）。

document.forms是获取所有的form。永远返回一个array。
Form对象有个elements属性，包是一个含了form标签里面的所有表单控件（input,select等标签，但不包含如div之类的标签）的伪数组
[code]	var fm = document.forms[0];
alert(fm.elements.length);//length属性报告了元素的个数

在之前，访问input这类标签和访问其它标签没什么区别，可以使用ID，也可以使用className,但当它们在表单中时，可以使用它们的nam有来访问

<form name="formName">
<input name="textInput" type="text" value="文本框" />
</form>
alert(document.formName.textInput.value);

Form对象相关事件及方法

当表单提交时会发生submit事件，我们可以设置事件监听，当用户提交表单时检查表单内容。同时，如果用户输入有误，要阻止表单提交，可以在事件处理函数里return false就行了，当正确时可以调用表单的submit方法提交表单，使用表单的submit方法时不会执行submit事件处理函数

document.formName.onsubmit = function () {
//检查表单
if (result) {
this.submit();
} else {
return false;
}
};

当表单被重置时会发生reset事件，但这个事件意义不大，因为reset按钮本身意义就不大。同时也有一个reset方法

document.formName.onreset = function () {
if (confirm("您真的要重置表单吗？")) {
this.reset();
} else {
return false;
}
};

DOM中的表格

[/code]

表格对象的一些方法
创建标题:createCaption() 方法用于在表格中获取或创建  元素。返回一个 HTMLElement 对象，表示该表的  元素。如果该表格已经有了标题，则返回它。如果该表没有  元素，则创建一个新的空  元素，把它插入表格，并返回它。
[code]	var caption = document.createElement("caption");
caption.appendChild(document.createTextNode("新标题"));
table.insertBefore(caption,table.firstChild);
/*
上面方法有两大缺点：
1.方法复杂
2.如果已经存在caption标签，则会造成caption标签重复，导致后插入的无效
*/
caption = table.createCaption();//注意，并不需要指定要将其插入到哪个表格中
//因为该方法必须在对应的表格对象上调用
caption.innerHTML = "新标题";

与createCaption相似的还有：
createTFoot() 在表格中创建一个空的 tFoot 元素;返回一个 TableSection，表示该表的〈tfoot〉 元素。如果该表格已经有了脚注，则返回它。如果该表没有脚注，则创建一个新的空 〈tfoot〉 元素，把它插入表格，并返回它。
createTHead() 在表格中创建一个空的 tHead 元素;返回一个 TableSection，表示该表的〈thead〉元素。如果该表格已经有了表头，则返回它。如果该表没有表头，则创建一个新的空〈thead〉元素，把它插入表格，并返回它。
既然有增加的方法，就有对应的删除的方法
deleteCaption() 从表格删除 caption 元素以及其内容。 如果该表有 〈caption〉 元素，则从文档树种删除它。否则，什么也不做。
deleteTFoot() 从表格删除 tFoot 元素及其内容。 如果该表有 〈tfoot〉 元素，则将它从文档树种删除，否则什么也不做。
deleteTHead() 方法用于从表格删除thead 元素。如果该表有 〈thead〉元素，则将它从文档树种删除，否则什么也不做。
添加与删除行
insertRow() 在表格中插入一个新行。 返回一个 TableRow，表示新插入的行。该方法创建一个新的 TableRow 对象，表示一个新的〈tr〉标记，并把它插入表中的指定位置。新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。如果表是空的，则新行将被插入到一个新的〈tbody〉 段，该段自身会被插入表中。
deleteRow() 从表格删除一行。参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。〈thead〉和〈tfoot〉 中的行与表中其它行一起编码。

行 (TableRow) 对象

行对象的一些属性：cells属性返回行中所有单元格的一个数组。rowIndex属性返回该行在表中的位置。sectionRowIndex属性返回在 tBody 、tHead 或 tFoot 中，行的位置。

var row = table.rows[0];
alert(row.cells.length);//第一行中单元格的数目
alert(row.rowIndex);//0

TableRow 对象的方法
deleteCell() 删除行中的指定的单元格。参数 index 是要删除的表元在行中的位置。该方法将删除表行中指定位置的表元。
insertCell() 在一行中的指定位置插入一个空的td元素。 返回一个 TableCell 对象，表示新创建并被插入的 td 元素。 该方法将创建一个新的 td 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。请注意，该方法只能插入 td 数据表元。若需要给行添加头表元，必须用 Document.createElement() 方法和 Node.insertBefore() 方法（或相关的方法）创建并插入一个 th 元素。

var row =table.rows[2];
var cell = row.insertCell(2);
cell.innerHTML = "新插入的单元格";
//上面的代码与下面的等效(但不考虑空白文本节点)
var cell = document.createElement("td");
cell.innerHTML = "新插入的单元格";
row.insertBefore(cell,row.childNodes[2]);
//删除单元格
row.deleteCell(2);
//等效代码(同样不考虑空白文本节点)
row.removeChild(row.childNodes[2]);

TableCell 单元格对象

与TableCell对象相关的有用的属性只有一个：cellIndex属性返回单元在格行中的下标

alert(table.rows[2].cells[3].cellIndex);//3

[/code]