JavaScription Dom 编程艺术笔记

DOM

“D”是指网页结构。”O”封装了对结构操作的函数. “M”模型，在javascript模型是树形结构,”html”代表整个文档

DOM方法获取元素
   document.getElementById()
   document.getElementByTagName()
   document.getElementByClassName()
DOM设置和获取属性
   object.getAttribute()
   object.setAttribute("attrName","")
节点属性
   document.getElementById().childNodes
   document.getElementById().firstChild
   document.getElementById().lastChild
   document.getElementById().nodeValue

伪协议

伪协议是指通过链接来调用JavaScript函数

<a href="javascript:popUp("http://localhot.com")">测试</a>
    这种做法非常不好。

平稳退化：就算用户禁用了js依然提供基本功能

  用户禁止了js 依然能打开指定链接
    <a href="http://www.example.com" onclick="popUp(this.href);return false;" >测试</a> 

    function popUp(url){
       window.open(url,"popup","width=320,height=480");
    }

为什么要追求平稳退化：搜索引擎检索数据不能理解JavaScript。

向CSS学习结构样式分离 ###

　　　　不要使用属性onclick设置函数,尽量使用选择器获取绑定函数。

　　　渐进坚强: 分层表示层,行为层,结构层 互不影响

向后兼容

考虑浏览器对某些方法的兼容性,以防出错

判断浏览器是否支持方法
if(!document.getElementById){
     浏览器不支持getElementById
}else{
    code...
}

不要做太多假设,预设有可能不存在Id
if(!document.getElementById("placeholder")) return false 

为什么js文件引入放在前会让页面变的更快？

　　因为大部分浏览器采取阻塞方式加载js文件,js在头部会阻止其他元素并行加载(css,图片,网页),如果js文件过大或者加载失败会导致页面空白,而且放在前面如果里面有操作DOM的js这时候DOM没加载出来就会失效。除非设置js在页面 window.onload后执行

XHTML、HTML5区别

XHTML格式严格,必须小写,不能省略结尾

替代window.onload

window.onload 只能执行最后一个绑定函数

使用addLoadEvent替代追加函数
function addLoadEvent(func){
      var oldonload=window.onload;
    if(typeof window.onload!='function'){
            window.onload=func;
       }else{
            oldonload();
            func();
       }
    }