Dom第五天学习总结

1.    控制层的显示
    修改style.display  例子：切换层的显示
        function togglediv(){
            var div1 = document.getElementById('div1');
            if(div1.style.display == ''){
                div1.style.display = 'none';        //不显示
            }else{
                div1.style.display = '';            //显示
            }
        }
    与元素对象enable = true或readonly = true等不一样，
    这里是样式，不是元素的直接属性，不能用true或false
    
    如果是嵌入样式表，即style写在元素内，那么.style.display可以取到这个值
    如果是内联样式表，即<style>div{display:none;}</style>，那么取不到这个值
    应该怎么办？
    dvObj.style.display = (dvObj.style.display.length == 0)?'none':'';
    
    
    案例：按钮、checkbox，一般想到的都是onchange事件
    （使用按钮的click事件，可以避免使用onchange事件）
    
2.    动态设置元素的位置、大小
    通过Dom读取元素的top left width height等取到的值不是数字，而是"10px"这样的字符串；
    为这些属性设值得时候：
    IE可以是80，90这样的数字
    FF Chrome 需要是"80px" "90%"等这样的字符串形式
    为了兼容统一用字符串形式，left/top需要设置为position
    
    易错：不要写成div1.style.width = 80px,
    正确：div1.style.width = '80px';
    
    如果要修改元素的大小（宽度加1），则首先要取出元素的宽度，然后用parseInt将宽度转化为数字，
    （parseInt能够将"20px"这样数字开头的包含其他内容的字符串解析成20）
    之后加上一个值，再加上px赋值回去
    
3.    IE中Body的事件范围
    IE中如果在body上添加onclick onmouseover等事件响应，
    那么如果页面没有满，则”body中最后一个元素以下（横向不限制）”的部分是无法响应事件的，
    必须使用代码在document上监听那些事件，比如document.onmouseover = Movepic
    即 document.body.onmouseover和document.onmouseover
    如果为整个文档注册事件可用：document.onxxxx事件

4.    层的操作
    元素的position样式值：
    static：无定位，显示在默认位置
    absolute：绝对定位
    fixed：相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持
    relative：相对元素默认位置的定位
    如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top和left两个样式值
    left和top都是相对于层的左上角的坐标
    
5.    自定义属性
    外部添加属性的方法--setAttribute
    获取属性--getAttribute
    通过为元素添加属性，可以实现需要信息的跨函数传递
    imObj.setAttribute('keyUser', key);
    把key作为属性值存起来 之后在需要的时候在get出来
    
6.    问题
    易错：
    1）不要写成div1.style.width = 80px; 而是div1.style.width = '80px';
    2）修改元素的样式不能this.style = "background-color:Red"，哪怕可以的话也是把以前所有样式
    都冲掉了。单独修改控件的样式this.style.backgroundColor = 'red';只修改要修改的样式
    
7.    css style中有一个属性 z-index:1000 说明该元素在所有层的最前面
    鼠标进入控件事件-- onmouseover
    鼠标离开控件事件-- onmouseout
    控件获得焦点     -- onfocus
    焦点离开鼠标     -- onblur
    
8.    form对象
    如果把form的onsubmit事件return false，会影响其中submit按钮的onclick事件
    但是不会影响其自身的submit()方法
    （form自身的submit()是提交表单，但是不会触发onsubmit事件）
    
    实现自动autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submit按钮以后才提交
    方法是：当光标离开的时候触发onblur事件，在onblur中调用form的submit方法
    
    在点击submit按钮后form的onsubmit事件被触发，在onsubmit中可以进行数据校验
    如果数据有问题，返回false即可取消提交
    
    <form name = "form1" action = "a.aspx" method = "get"
        onsubmit = "if(document.getElementById('txtname').value.length < 0)
        {alert('姓名必填)；return false;}"
    
9.    不同浏览器的差异
    面试题：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？
    不同浏览器对Dom支持的方法不一样
        IE--innerText  FF--textContent
    不同浏览器对CSS支持不一样
    
    JQuery之类的框架进行了封装，将不同浏览器的差异帮开发人员处理了，
    开发人员只要调用JQuery的方法，JQuery会帮助在不同浏览器中进行翻译。
    用JQuery就可以解决不同浏览器上Dom的不同
    
    CSS的不同的处理是美工的工作