代码改变世界

DOM 高级编程笔记

2012-06-12 17:05  臭小子1983  阅读(400)  评论(0)  编辑  收藏  举报

第一章  深入了解DOM脚本编程

一、页面加载时浏览器内部操作顺序是：

　　1、HTML被解析

　　2、外部脚本、样式表被加载

　　3、文档解析过程中的内联的脚本被执行

　　4、HTML DOM构造完成

　　5、图像和外部内容被加载

　　6、页面加载完成

 

　　等待页面加载

　　window.onload = function(){

　　　　// 页面加载完成后触发

　　}

　　

一、一些常见的缺陷

　　1、<script>标签出现在文档主体的<body>中.

　　2、依赖于浏览器的嗅探，而不是让浏览器来测试javascript

　　3、在锚元素中的href属性中编写javascript:前缀.

　　4、多于、重复的JS代码

 

二、对象检测

　　1、使用能力检测：也叫对象检测，是指在执行代码之前检测某个代码或者方法是否存在，如果对象方法存在表明浏览器能够使用些方法

if(document.body.getElementsByTagName()){
     // 可以使用document.body.getElementsByTagName()
}

 

三、不要使用javascript来生成内容

　　因为搜索引擎的爬虫和蜘蛛会搜索页面的内容，但不会搜索javascript

 

四、自执行的匿名函数

　　(function(arg){

　　　　alert(arg);

　　})("this is show in alert box");

　

五、javascript语法常见的陷阱

　　1、区分大小写：

　　　　function myFunction(){}　

　　　　function MyFunction(){}

 

　　2、单引和双引号

　　　　var html = '<h1 class="a">aaaaa</h1>';

　　　　var html = "<h1 class=\"a\">aaaaa</h1>";　　// 使用转义符

 

　　3、换行  html = ''code\";代码用\来换行

var html = '<li sdevindex="6">·\
    <a target="_blank" href="http://house.focus.cn/news/2012-06-12/2066802.html" title=""><b>央行发特急文件警告:房贷利率最低仍为7折</b></a>\
    </li>';

document.getElementsByTagName("body")[0].innerHTML = html;

 

　　4、可选的分号和花括号

　　用分号来结束一条或一行代码并不是必需的

　　　　alert(a)　会被解释成  alert(a);

　　　　

　　　　if(a == b)　　不会被解释成 　　if(a == b);　　

　　　　alert(a);　　　　　　　　　　　 alert(a);

　　　　而会按照if语句来解释

　　　　if(a == b){

　　　　　　alert(a);

　　　　}

　　

　　5、匿名函数

　　

 

 

第二章  创建可重用的对象

一、什么是对象

　　对象简单说是一组变量（属性）和函数（方法）的集合的实例，对象都是于类派生而来的，称为OO

 

二、继承

　　当创建自己的对象时，你可以扩展或者继承现有对象的属性和方法，

　　// 创建对象

　　var person = new Object();

　　person.getName = function(){}

　　person.getAge = function(){}

　　

　　// 创建一个employee对象

　　var employee = {};
　　employee.getTitle = function(){ ... }
　　employee.getSalary = function(){ ... }

 

　　// 从person对象中继承方法

　　employee.getName = person.getName

 

 

三、添加静态方法

<script type="text/javascript">
    var myObject = {};
    myObject.nav =  'jeff'; //  添加一个属性
    myObject.alertName = function(){    //  添加一个方法
        alert(this.nav);
    }

    myObject.alertName();   // 执行添加的方法
</script>

 

四、添加公有方法

　 需求修改构造函数的原形prototype，他指的不是Prototype的JS框架,

<script type="text/javascript">
    var myObject = {};
    myObject.nav =  'jeff'; //  添加一个属性
    myObject.alertName = function(){    //  添加一个方法
        alert(this.nav);
    }

    myObject.alertName();   // 执行添加的方法


    // 为对象添加公有方法
    myObject.prototype.clearMessage = function(str){
        alert(str);
    }
    myObject.clearMessage("ssss");
</script>

 

五、this是什么

　　

 

第三章  DOM2核心和DOM2HTML

 

 

 

 

 

第四章  响应用户操作和事件 

 一、事件类型

　　对象事件、鼠标事件、键盘事件、表单事件。

　　

　　对象事件：1、load、unload：载入事件　　　　2、abort、error：　　　　3、resize：改变浏览器窗口触发　　　　4、scroll：滚动条事件

　　鼠标事件：侦听鼠标事件捕获响应用户的操作.   1、mousemove：移动连续　　2、mouseover：移动到对象触发　　3、mouseout：移出对象触发　　4、mousedown：按下时触发　　5、mouseup：释放时触发　　6、click：单击　　7、dbclick：双击

　　键盘事件：1、keydown：键按下时　　2、keyup：键按释放　　3、keypress：表示有一个键被按过

　　表单事件：1、submit：会在用户单击提交按钮，或者按下键盘中的某个键将表单提交到服务器时被调用　　2、reset：表示单重置　　3、blur：当前焦点　　4、focus：离开焦点　　5、change：　　

　　

二、控制事件流和事件注册侦听器

 

var ulnode = document.getElementTagName("li");

for(var i=0; i=ulnode.lenght; i++){

       

}

　　　　

 

第五章  动态修改样式和层叠样式表

 一、CSSStyleSheet对象表示的是所有CSS样式表，包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表。
　　

　　CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之上，

　   而CSSStyleRule对象表示的则样式表中的每条规则。

　　通过document.stylesheets属性可以取得文档中CSSStyleSheet对象的列表，其中每个对象有下列属性
　　type　　　　　　　　始终为text/css
　　disabled　　　　　　相应样式表是应于还是禁用于当前文档
　   href　　　　　　　　样式表相对于当前文档的URL
　　title　　　　　　　　分组样式标签
　　media　　　　　　 样式应用的目标设备类型(screen、print)
　　ownerRule　　　　 只读CSSRule对象，若样式用@import导入，表示其父规则
　　cssRules 　　　　　只读cssRuleList列表对象，包含样式表中所有CSSRule对象
　　==========================================================
　　insertRule(rule,index)　　　　添加新的样式声明
　　deleteRule(index)　　　　　  从样式表中移除规则


二、CSSStyleRule对象
　　每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象。这些对象分别对应着类似下面这样一条规则：
　　boyd{
　 　　font:lucida,verdana,sans-serif;
　　　　background:#c7600f;
　　　　color:#1a3800;
　　}


      CSSStyleRule对象具有下列属性：
　　type　　　　　　　　继承自CSSRule对象的一个属性，以0~6中的一个数字表示规则类型
　　cssText　　　　　　 以字符串形式表示的当前状态下的全部规则
　　parentStyleSheet　　 引用父CSSStyleRule对象
　　parentRule　　　　　 如果规则位于另一规则中，该属性引用另一个CSSRule对象
　　selectorText　　　　 包含规则的选择符
　　style　　　　　　　　与HTMLElement.style相似，是CSSStyleDeclaration对象的一个实例


三、CSSStyleDeclaration对象
　　表示一个元素的style属性，与CSSStyleRule对象类似，CSSStyleDeclaration具有下面属性：
　　cssText　　　　以字符串形式表示的全部规则
　　parentRule　　 将引用CSSStyleRule对象
　　==========================================================
　　getPropertyValue(propertyName)　　　　　　CSS样式属性值
　　removeProperty(propertyName)　　　　　　 从声明中移除属性
　　setProperty(propertyName,value,priority)　　 设置CSS属性值

 

四、把样式置于DOM脚本之外

style属性
　　style属性本身是一个表示特定元素的所有不同CSS样式的CSSStyleDeclaration对象，通过style属性只能访问到在元素的style属性中以嵌入方式声明的CSS属性。换句话说，通过style属性无法访问到由多重样式表层叠而来或者从父元素继承的CSS属性。


element.style.backgroundColor = 'red';　　//background-color被转换为大小写形式，必须的

//设置id为"example"的元素的样式
setStyleById('example',{
　　'background-color' 　　: 　　'red',
　　'border'　　　　　　 :　　'1px solid black',
　　'padding'　　　　　　 :　　'1px',
　　'margin'　　　　　　　:　　'1px'
});

function setStyle(elementid,styles){　
　　var element = document.getElementById(elementid);

　　//循环遍历styles对象并应用每个属性
　　for(property in styles){
　　　　//非styles直接定义的属性
　　　　if(!styles.hasOwnProperty(property)) continue;
　　　　
　　　　if(element.style.setProperty){
　　　　　　element.style.setProperty(uncamlize(property, '-'), styles[property], null);
　　　　} else {
　　　　　　element.style[camelize(property)] = styles[property];
　　　　}
　　}　　
　　return true;
}


//将word-word转换为wordWord
function camelize(s) {
return s.replace(/-(\w)/g, function(math,p1){
　　return p1.toUpperCase();
});
}


//将wordWord转换为word-word
function uncamelize(s, sep) {
　　sep = sep || '-';
　　return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
　　　　return p1 + sep + p2.toLowerCase();
　　});
}


//基于className切换样式
element.className += 'newclass';

 

五、动态加载样式表和移除样式表

增加：

function addStyleSheet(url, meida){
        var link = document.createElement("link");
        link.setAttribute("href",url);
        link.setAttribute("rel","stylesheet");
        link.setAttribute("type","text/css");
        document.getElementsByTagName("head")[0].appendChild(link);
}