Dom第四天学习总结

1.    innerText和innerHTML区别
    几乎所有的Dom元素都有innerText innerHTML属性（注意大小写）
    innerText是元素标签内内容的文本表现形式
    innerHTML是元素标签内内容的HTML源代码
    这两个属性是可读可写的
    
    FireFox不支持innerText，使用textContent属性
    能力检测
    if(typeof(tdObj1.innerText)=='string'){    //IE支持innerText属性
        tdObj1.innerText = key;
    }else{
        tdObj1.textContent = key;
    }
    
2.    动态创建表格的方法    

        var tbObj = document.getElementById('tb');
        //创建行
        var trObj = document.createElement('tr');
        //创建列
        var tdObj1 = document.createElement('td');
        var tdObj2 = document.createElement('td');
        //填写内容
        tdObj1.innerText = txt1;
        tdObj2.innerText = txt2;
        //列添加到行
        trObj.appendChild(tdObj1);
        trObj.appendChild(tdObj2);
        //行添加到table
        tbObj.appendChild(trObj);
    
3.    浏览器兼容性的问题 -- 另一种动态创建表格的方法
    浏览器兼容性的例子：IE6，IE7对table.appendChild("tr")的支持和IE8不一样，
    用insertRow、insertCell来代替
        var tbObj = document.createElement('table');
        //创建行
        var trObj = tbObj.insertRow(-1);
        //创建列
        var tdObj1 = trObj.insertCell(-1);
        var tdObj2 = trObj.insertCell(-1);
        //表格添加到body
        document.body.appendChild(tbObj);
    或者为表格添加tbody，然后向tbody中添加tr
    
4.    操作页面元素的时候是用innerHTML的方式？
    还是createElement(),appendChild()与removeChild()的方式？
    1）对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的Dom操作
    （有专门用C或C++写的html解析器）
    先将页面的HTML代码写好，然后调用一次innerHTML，而不用反复调用innerHTML
    2）对于使用innerHTML=''的方式来删除节点，在某些情况下会存在内存问题。
    比如：div下面有很多其他元素，每个元素都绑定有事件处理程序。
    此时，innerHTML只是把当前元素从节点树上移除了，但是那些事件处理程序仍然占用内存
    
5.    代码是否需要放置到onload中？
    如果js代码需要操作页面上的元素，则将该代码放到onload里面
    因为只有当页面加载完毕之后页面上才会有相关的元素
    
    如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中
    
    放在body底部中的js代码，由于已经是页面的底部，在执行该代码时，页面的元素都已经加载完毕
    所以可以不放到onload里面也可以操作页面上的元素
    
6.    js操作页面样式
    易错：修改元素的样式不是设置class属性，而是className属性
    （class是JavaScript的一个保留字）案例：网页开关灯的效果
    
    修改元素的样式不能 this.style = "background-color:Red"
    应该this.style.backgroundColor = Red;
    
    易错：单独修改样式的属性使用“style.属性名”。
    注意在css中属性名在JavaScript中操作的时候属性名可能不一样，
    主要集中在那些属性名中含有-的属性。
    
    单独修改控件的样式<input type = "button" value = "AAA" onclick = "this.style.color='red'" />
    技巧：没有文档的情况下的值的属性名，随便给一个元素设定id，然后在JS中就能id.style出来能用的属性
    
    操作float样式的时候，IE与其他浏览器不太一样。
    IE:         obj.style.stylefloat = 'right';
    其他浏览器：obj.style.cssfloat = 'right';