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)