Javascript DOM

(三)CSS DOM 编程

1. IE4.0为 每一个Web页面元素 引入了一个style对象来管理元素的css样式，最后被DOM沿用至今
2. 改变border line的代码

var  oDiv  =  document.getElementById( " div1 " );
oDiv.style.border  =   " 1px solid black " ;

3. 通过下面的代码，可以实现hover的效果

<!----> < div  id ="div1"  onmouseover ="this.style.backgroundColor='blue'"  onmouseout ="this.style.backgroundColor='red'" >

4. style对象有一些方法,这些是DOM标准里面有的，但是IE不支持，所以最好还是直接使用style的属性,如：style.backgroundColor的形式来设置style的property值比较好。
    style.getPropertyValue(propertyName);
    style.getPropertyPriority();
    style.item(index);
    style.removeProperty(propertyName);
    style.setProperty(propertyName, value, privority);
5. Copy下面的内容到txt文件，然后改后缀为.htm，用IE打开，可以看到一个黄色的Tip，主要原理是操作style.Visibility属性，这个属性和style.display是不一样的，前者只是控制visible，不会影响布局，后者不仅仅控制visible，还会影响布局。

<!----> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
    < head >
        < title > Style Example </ title >
        < script  type ="text/ecmascript" >
            function  showTip(oEvent)
            {
                var  oDiv  =  document.getElementById( " divTip1 " );
                oDiv.style.visibility  =   " visible " ;
                oDiv.style.left  =  oEvent.clientX  +   5 ;
                oDiv.style.top  =  oEvent.clientY  +   5 ;
            }
            function  hideTip(oEvent)
            {
                var  oDiv  =  document.getElementById( " divTip1 " );
                oDiv.style.visibility  =   " hidden " ;
            }
        </ script >
    </ head >
    < body >
       < p >
            Move your mouse over the red square.
        </ p >

        < div
            id ="div1"
            style ="background-color: red; height: 50px; width:50px"
            onmouseover ="showTip(window.event)"  onmouseout ="hideTip(window.event)" >
        </ div >

        < div
            id ="divTip1"
            style ="background-color: Yellow; position:absolute;visibility:hidden;padding:5px" >

            < span  style ="font-weight:bold" >
                Custom Tooltip
            </ span >

            < br />
                More details can go here.

        </ div >
    </ body >
</ html >

6. 下面代码利用style的display属性控制折叠功能

<!----> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
     < head >
         < title > Toggle Example </ title >
         < script  type ="text/ecmascript" >
             function  toggle(sDivId)
             {
                 var  oDiv  =  document.getElementById(sDivId);
                oDiv.style.display  =  (oDiv.style.display  ==   " none " )  ?   " block "  :  " none " ;
            }
         </ script >
     </ head >
     < body >
         < div
             style =" background-color:Blue; color:white;font-weight:bold;padding:10px;cursor:pointer"
            onclick ="toggle('divContent1')" >
            Click here.
         </ div >
        
         < div
             id ="divContent1"  
            style ="border:3px solid blue; height:100px; padding:10px" >
            This is some content to show and hide.
         </ div >
        
         < p > &nbsp; </ p >
        
         < div
             style ="background-color:Blue; color:White; font-weight:bold; padding:10px; cursor:pointer"
            onclick ="toggle('divContent2')" >
            Click here
         </ div >
         < div
             id ="divContent2"
            style ="border: 3px solid blue; height:10px; padding:10px" >
            This is some content to show and hide.
         </ div >
     </ body >
</ html >

6. 有些元素通过设置class属性来设置样式，我们可以通过 document.styleSheets 集合拿到当前文档所有的css class。如果修改css class的设置，将影响所有的使用这个css class的元素。
    DOM中可以使用 document.styleSheets[0]. css Rulers ,但是IE中对应的属性叫 document.styleSheets[0].rulers
7. 我们可以为一个element设置style，也可以给它的父Element设置style，还可以设置css class，最后我们在浏览器看到的效果是所有这些设置的合并，IE提供或者最后看到的style的属性是 element.currentStyle ，它是只读的。DOM提供的是一个方法,可以通过 document.defaultView.getComputedStyle( element , hover ) 获得，第一个参数是元素， 第二个参数是伪类：:hover,:first-letter.

(四) 表单(Form)操作

1. 创建表单元素是为了满足用户向服务器发送数据的要求，Web表单使用的Html元素有<form/>,<input/>,<select/>,<textarea/>等
2. <form/>用来向服务器传输数据，它的属性有：
    method   表示浏览器发送GET请求或是发送POST请求。
    action      表示表单所要提交到的地址URL。
    enctype   当向服务器提交数据时，数据应该使用的编码方法，默认是application/x-www-url-encoded,不过，如果要上传文件，可以设置multipart/form-data
    accept    当上传文件时候，列出服务器能正确处理的mime类型。
    accept-charset    当提交数据时，列出服务器接受的字符编码。

3. <input/>元素是Html的主要输入元素。通过type特性来判断是哪种输入控件：
    “text"
    "radio"
    "checkbox"
    "file"
    "password"
    "button"
    "submit"
    "reset"
    "hidden"
    "image"

4. 获取Form使用 document.getElementById() 或者 document.forms["formId"], document.forms[0] .

5. 获取Form上的输入字段 oForm.elements[0], oForm.elements["textbox1"], oForm.textbox1, oForm["textbox1"]

6. Form 上的方法： form.submit(), form.reset()

7. <input/>有一些属性：
    <input type="text" validchars = ”0123456789“/>
    <input type="text" invalidchars = ”0123456789“/>
    控制input可以输入的字符，除了设置上面的属性，还要考虑用户paste，
    在IE里面，可以直接<input text="text" onpaste="return false"/>
    对于其它的浏览器，需要组织菜单paste和Ctrl + V来paste
    <input type="text" invalidchars="0123456789" onpaste="return false" oncontextmenu="return false"
       onkeypress="return blcokchars(this, event, true)/>

<!----> function  blockChars(oTextbox, oEvent, bBlockPaste)
{
     var  sInvalidChars  =  oTextbox.getAttribute( " invalidchars " );
     var  sChar  =  String.fromCharCode(oEvent.charCode);
     var  bIsValidChar  =  sInvalidChars.indexOf(sChar)  ==   - 1 ;
    
     if  (bBlockPaste)
     {
         return  bIsValidChar  &&   ! (oEvent.ctrlKey  &&  sChar  ==   " v " );
    }
     else
     {
         return  bIsValidChar  ||  oEvent.ctrlKey;
    }
}

8. 对于<select/>,我们使用oListbox.options[0]来获得选项。

 

Javascript DOM