javascript 学习笔记 基础篇(2) HTML DOM

=================================================

2011-07-31 周日 18:27 javascript 文档对象(常用)

=================================================

------------------第三部分----------------------

3.javascript DOM实例
***3.1Document 对象
(1)document.write("xxx")
(2)document.getElementById("xxid") 获取某指定id的元素
(3)document.getElementByName("xxname") 获取某指定name 的元素
(4)document.forms.length 返回文档中表单的数目
(5)document.image.length 文档中图像的数目

***3.2 Event对象
(1)event.button == 2(1) 判断点击了鼠标哪个键
(2)event.clientX(X坐标) event.clientY(Y坐标) 获取鼠标位置
(3)event.keyCode 获取按了键盘的哪个键
(4)event.screenX / event.screenY 相对于屏幕光标的位置
(5)alert(event.type) 显示哪个类型的事件发生了

***3.3 Form 和 Input 对象
(1)获取向服务器发送数据的方法类型
var x = docoment.getElementById("myForm");
alert(x.method); -->post
(2)防止表单重复提交
document.getElementById("myButton").disabled = true;
(3)控制复选框
document.getElementById("checkBox").checked = true;
(4)获取复选框中的值
for(i=0;i<coffee.length;i++) {
if(coffee[i].checked) {
txt = txt+coffee[i].value;
}
}
(5)重置表单
document.getElementById("myButton").reset();
(6)提交表单
document.getElementById("myButton").submit();
(7)验证表单 获取表单的值 ById("").value
(8)设置焦点
document.getElementById("text1").focus()
(9)失去焦点
document.getElementById("text2").focus();
(10)选取文本的内容
document.getElementById("text1").select();
(11)下拉列表
(12)达到文本框最大长度跳到另外一个文本框
(13)为元素添加快捷键
document.getElementById("myName").accessKey = "n"
快捷键 alt+n

***3.4 Image 对象
(1)更改图像的高度和宽度
document.getElementById("myImage").height = "200"
(2)更改图像的源文件
documetn.getElementById("myImage").src = "../image/2.jpg"

***3.5 Location 对象
(1)把用户带到一个新的地址
window.location = "../index.html"
alert(window.location); //显示用户当前的url
(2)重写加载页面
window.location.reload();
(3)跳出框架
if(window.top != window.self) {
window.top.location = "../index.html"
}

***3.6 Navigator 对象
(1)检查用户的浏览器和版本号
navigator.appName navigator.appVersion
(2)获取用户浏览器的更多信息
navigator.appName 浏览器
navigator.appVersion 浏览器版本
navigator.platform 平台
navigator.userAgent 用户报头

***3.7 Option 和 select 对象
(1)禁用列表 启用列表
document.getElementById("mySelect").disabled = true;
document.getElementById("mySelect").disabled = false;
(2)取得列表中的可选数目
document.getElementById("mySelect").length;
(3)改变下来列表中的可见行数 默认为1
document.getElementById("mySelect").size = 4;
(4)设置列表的多选属性
document.getElementById("mySelect").mutiple = true;
(5)获取列表中的所有值
var x = document.getElementById("mySelect");
for(i = 1; i<x.length; i++) {
document.write(x.option[i].text);
}
(6)改变选择项
document.getElementById("banana").selected = true;
(7)移除列表中选中的数据
var x = document.getElementById("mySelect");
x.remove(x.selectedIndex);

***3.8 Screen 对象
(1)获取屏幕的细节
screen.xxx(属性)

***3.9 Table , TableHeader ,TableRow TableData 对象
(1)更改表格边框的宽度
document.getElementById("myTable").border = "10";
(2)更改cellPadding(自身大小) cellSpacing(单元格与单元格之间的间距)
document.getElementById("myTable").cellPading = "15";
document.getElementById("myTable").cellSpacing = "15";
(3)只显示表格的上边距
document.getElementById("myTable").frame = "above";
(4)只显示表格的下边距
document.getElementById("myTable").frame = "below";
(5)规定表格内部边框
//仅显示行
document.getElementById("myTable").rule = "rows";
//仅显示列
document.getElementById("myTable").rule = "cols";
(6)显示第一行内部的数据
alert(document.getElementById("myTable").row[0].innerHTML)
(7)显示第一行的第一个单元格内的内容
var myCells = document.getElementById("myTable").row[0].cells;
alert(x[0].innerHTML)
(8)手动为表格创建标题
var myCaption = document.getElementById("myTable").createCaption();
x.innerHTML = "我的表格标题";
(9)从表格中删除行
document.getElementById("myTable").deleteRow(i);
(10)向表格中插入新行并添加内容
var x = document.getElementById("myTable").insertRow(0);
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML = "NEW CELL1"
z.innerHTML = "NEW CELL2"
(11)向已有行中插入单元格
var x = document.getElementById("tr2").insertCell(0);
x.innerHTML = "John";
(12)控制单元格的对齐方式
document.getElementById("r1").align = "left";
(13)垂直对齐单元格中的内容
document.getElementById("tr2").VAlign = "left";
(14)修改单元格的内容
var x = document.getElementById("myTable").row(0).cells
x[0].innerHTML = "新的内容";

***3.10 Window 对象
(1)消息框 alert("xxx")
(2)确认框 var x = confirm("press a button");
(3)提示框 var x = propmpt("请输入你的信息","orclight")
(4)打开指定窗口
window.open("../../xxx.html");
(5)打开一个窗口,并且控制其外观
window.open("../../xx/Html","height = '400',weight = '300'")
(6)显示当前url alert(window.location);
(7)到指定的地址 window.location = "xxx/index.html";
(8)重新加载文档
window.location.reload();
(9)调整窗口到指定的大小
top.resizeTo(500,300);
(10)滚动窗体
window.scroolTo(100,50);
(11)定时器 定时调用一个函数
var t =setTimeOut("mFunc()",500);
(12)清楚定时器 clearTimeout(t)