一,DOM对象:
1:访问节点:
访问HTML元素用getElementsByTagName("ul");
getElementById("cssLi");
2:遍历节点
var oUL=document.getElementById("myList");
var DOMString="";
if(oUL.hasChildNodes())
{
var oCh=oUL.childNodes;
for(var i=0;i<oCh.length;i++)
{
DOMString+=oCh[i].nodeName+"\n";
}
}
alert(DomString);
3:获取节点属性
var myImag=document.getElementsByTagName("img")[0] //获取第0张图片
alert(myImg.getAttribute("title")) //获取第0张图片的title属性
4:创建节点
function creatP() //创建P节点
{
var oP=document.createElement("p");
var oText=document.createTextNode("这是一段感人的故事") ;
oP.appendChild(oText);
document.body.appendChild(op);
}
5:innerHTML属性
该属性表示某个标记之间的所有内容,包括代码本身,该属性可以读取,同时也可以写
function myDOMInnerHTML()
{
var myDiv=document.getElementById("myTest");
alert(myDiv.innerHTML); //直接显示innerHTML的内的标记和内容
myDiv.innerHTML="<img src='01.jpg' title='情人坡'>" //修改innerHTML属性,可以直接添加代码
}
二,事件
1 监听函数
(1)简单的监听函数
window.onload=function()
{
var oP=document.getElementById("myP") //找到对象
oP.onclick=function()
{
alert("我被点击了");
}
}
(2)IE的监听函数
window.onload=function()
{
var oP=document.getElementById("myP"); //找到对象
oP.attachEvent("onclick",fnClick); //添加监听函数
}
function fnClick()
{
alert("我被点击了");
//oP.detachEvent("onclick",fnClick); //点击了一次后删除监听函数
}
(3)标准DOM的事件监听(Firefox)
window.onload=function()
{
var oP=document.getElementById("myP"); //找到对象
oP.addEventListener("click",fnClick1,false); //添加监听函数,注意是click,false代表冒泡型事件
oP.addEventListener("click",fnClick2,false);
}
function fnClick1()
{
alert("我被fnClick1点击了");
// oP.removeEventListener("click",fnClick2,false); 删除监听函数
}
function fnClick2()
{
alert("我被fnClick2点击了");
}
2事件对象
(1)通常为了兼容两种浏览器,通常采用下面的方法
oP.onclick=function(oEvent)
{
if(window.event)
oEvent=window.event;
}
(2)事件类型
window.onload=function()
{
var oImg=document.getElementsByTagName("img")[0];
oImg.onclick=handle;
oImg.onmouseover=handle;
}
function handle(oEvent)
{
var oDiv=document.getElementById("display");
if(window.event)
oEvent=window.event; //处理兼容性,获得事件对象
if(oEvent.type=="click")
oDiv.innerHTML+="你点击了我"
if(oEvent.type=="mouseover")
oDiv.innerHTML+="你移动到了我的上方";
}
三, 动态添加表格和删除表格
添加: window.onload=function()
{
var oTr=document.getElementById("talbe").inserRow(2); //插入一行,位置是第三行
var aText=new Array();
aText[0]=document.createTextNode("fresheggs");
aText[1]=document.createTextNode("W610");
aText[2]=document.createTextNode("Nov 5th");
for(var i=0;i<aText.length;i++)
{
var oTd=oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
删除: window.onload=function()
{
var oTable=document.getElementById("talbe");
oTable.deleteRow(2); //只删除一行,位置是第三行,后面的行号自动补齐
oTable.rows[2].deleteCell(1); //只删除一个单元格,后面的单元格也自动补齐
}
隔行换色
<script language="javascript">
window.onload = function(){
var oTable = document.getElementById("oTable"); //获取表格的ID
for(var i=0;i<oTable.rows.length;i++){
if(i%2==0) //偶数行时
oTable.rows[i].className = "altrow";
}
}
</script>
四, 表单基础
加入<lable>标记后可以友好地提示,如
<lable for="name">姓名:<input type="text" name="txtname"/></lable>
onmouseover="this.focus()" 获得焦点
onfocus="this.select()"
五,异常处理
1: window.onerror=function() //如果试先定义了这个函数,如果javascript中有错,会自己调用
{
alert("出错啦!");
}
2: try{
alert("this is an example");
alert(fresheggs) //未定义
}catch(exception)
{
var sError="";
for(var i in exception)
{
sError+=i+":"+exception[i]+"\n";
}
alert(sError);
}
六, Ajax
(1)创建:
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
(2)建立请求:
xmlHttp.open("GET","a.aspx",true);
(3)异步对象链接服务器
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4&&xmlHttp.status==200)
alert("服务器:"+xmlHttp.responseText);
}
(4)send()发送
xmlHttp.send(null); //通过Get提交