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;

原文地址:https://www.cnblogs.com/jalenFish/p/14099085.html