DOM表格,表单操作

2018-07-19  本文已影响12人  ErrorCode233

1. DOM表格

1.1 获取表格头部

语法:

表格.tHead

作用:
获取表格thead里的所有内容。

返回值:
返回由thead里内容组成的一个对象。
表格只有一个thead,如果没有的话返回一个null

var tab = document.getElementById("tab");
var tabHead  = tab.tHead;
=console.log(tabHead);      //<thead>

1.2 获取表格主体

语法:

表格.tBodies

作用:
获取到表格tbody的内容。

返回值:
tbody在表格中可以出现多个
返回一个由tbody的内容组成的类数组,每个tbody是类数组中的一个数据。

var tabBodies = tab.tBodies;
console.log(tabBodies);         //HTMLCollection [ <tbody> ]

1.3 获取表格底部内容

语法:

表格.tFoot

作用:
获取表格tfoot里的所有内容。

返回值:
返回由获取到的tfoot里的内容组成的一串对象
表格里只有一个tfoot,如果没有,则返回一个null

var tabFoot = tab.tFoot;
console.log(tabFoot);           //<tfoot>

1.4 获取表格行

语法:

tBodies[n].rows   //获取表格主体里的某行  
thead.rows        //获取表格头部里的行  
tFoot.rows        //获取表格底部里的行  
表格.rows         //获取表格里的行

返回值:
获取到的是一行,是一个集合。使用的话需要使用下标去取,可以直接给这一行进行操作。

//获取第一组tbody中的所有行
var body1 = tabBodies[0].rows;          
console.log(body1);                     //HTMLCollection [ <tr>, <tr>, <tr> ] 
console.log(body1[0])                   //<tr>      获取第一个tbody中的第一个行  

1.5 获取单元格

rows[n].cells

作用:
获取到某一行所有的单元格,他是一个类数组,不能直接操作整行,只能操作单个。

返回值:
返回一个由这一行所有单元格里的内容组成的 类数组

var cell = body1[0].cells;
console.log(cell);      //HTMLCollection [ <td>, <td>, <td> ]
console.log(cell[1].innerHTML)      //小明

2. 表单操作

2.1 获取表单

获取表单也可以使用name去获取
语法:

表单.name

2.2获取表单的值:

可以获取值的表单有:text/radio/checkbox/select/textarea

语法:

node.value

2.3 表单事件

2.3.1 onchange

语法:

表单元素.onchange    

当表单有变化的时候会触发这个事件,一般用在select

2.3.2 oninput

语法:

表单元素.oninput     

当输入框内容有变化的时候出发这个事件(包括输入空格)

2.3.3 onsubmit

语法:

form.onsubmit

当表单被提交的时候会触发,当点击提交按钮的时候会触发,只能添加给form对象

2.3.4 onreset

语法:

form.onreset

当表单被重置时出发。当点击重置按钮的时候会触发,只能添加给form对象

2.4 表单方法

2.4.1 sublime()

语法:

form.submit();

调用后会立即执行表单提交,执行后会调用表单的onsubmit事件。

2.4.2 reset()

语法:

form.reset();

调用后会立即执行重置表单操作,执行后会调用表单的onrest事件

上一篇 下一篇

猜你喜欢

热点阅读