Dom的高级应用

1.对表格的操作

 

HTML  

属性或方法 说明

caption 保存着<caption>元素的引用

tBodies 保存着<tbody>元素的HTMLCollection集合

tFoot 保存着对<tfoot>元素的引用

tHead 保存着对<thead>元素的引用

rows 保存着对<tr> 元素的HTMLCollection集合

rowIndex 返回该表格行在表格内的索引值

sectionRowIndex 返回该表格行在其所在元素(<tbody>,<thead>等元素)的索引值

cells 保存着<tr>元素中单元格的HTMLCollection

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

createTHead() 创建<thead>元素，并返回引用

createTFoot() 创建<tfoot>元素，并返回引用

createCaption() 创建<caption>元素，并返回引用

deleteTHead() 删除<thead>元素

deleteTFoot() 删除<tfoot>元素

deleteCaption() 删除<caption>元素

deleteRow(pos) 删除指定的行

insertRow(pos) 向rows集合中的指定位置插入一行

 

 

<tbody>元素添加的属性和方法

属性或方法 说明

rows 保存着<tbody>元素中行的HTMLCollection

deleteRow(pos) 删除指定位置的行

insertRow(pos) 向rows集合中的指定位置插入一行，并返回引用

 

<tr>元素添加的属性和方法

属性或方法 说明

cells 保存着<tr>元素中单元格的HTMLCollection

deleteCell(pos) 删除指定位置的单元格

insertCell(pos) 向cells集合的指定位置插入一个单元格，并返回引用

 

 

 

2.form表单

获取表单可以使用

1.document.forms   返回form集合

2.document.forms[0]

3.document.forms['myform3']

3.document.myForm

4.document['myForm']

 

获取表单中的字段

f2.elements ： 获取表单中所有的元素。

document.forms[0].elements['username'] 获取name为username的字段对象

document.forms[0].username

   表单验证：

如果希望在表单提交之前，能够对表单中输入的内容数据进行校验，如果校验通过，允许提交表单，如果校验不通过，希望还留在当前页面，不触发submit事件。

在当前表单对象上添加onsubmit事件监听

<form action="test.html" οnsubmit="return checkForm(this);">

username:<input type="text" name="username">

password:<input type="text" name="password">

<input type="submit" value="提交">

</form>

<script type="text/javascript">

function checkForm(fs){

var user = fs.username.value;

var password = fs.password.vaule;

if(user.length<5){

return false;

}

if(password<6){

return false;

}

return true;

}

</script>

note:当checkForm函数的返回结果为true，那么表单可以正常提交到action所指定的url，如果返回结果为false，那么还留在当前页面。

3.cookie：

通过document.cookie直接存取

设置cookie：

document.cookie = "username=a1";

document.cookie = "password=a2";

获取cookie：

var str = document.cookie;

str打印出的结果为：username=a1;password=a2;