Javascript_DOM编程艺术(上)

阿里的一个滑块移动的在线测评题，搞了好多天，从添加事件，到setTimeout,setInterval，到css3的animation动画属性，发现自己好多不会的啊！连最基本dom操作都不会。在网上找滑块例子的时候，发现这本书我看过，例子也比着敲过，该错的地方还错着。不行，我要今天中午开始重看。

程序设计语言分为解释型和编译型两大类。

编译型
Java或C++等语言需要一个编译器。编译器是一种程序，能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件
解释型
解释型程序设计语言不需要编译器–它们仅需要解释器。对于JavaScript语言，在互联网环境下，Web浏览器负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。如果浏览器中没有解释器，js代码就无法执行

用编译型语言编写的代码有错误，这些错误在代码编译阶段就能被发现。而解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现

javaScript不需要进行类型声明，它是一种弱类型语言，可以在任何阶段改变变量的数据类型

var age = "thirty three";
age = 33 ;

字符串：包在引号里，单引号双引号都可以，在脚本保持一致即可。
数组：js不要求在声明数组时必须给出元素格式

var beatles = Array() ; 
var names = [ 1,2,3];

关联数组

var lennon = Array();
lennon['name'] = 'John';

对象

var people = Object();
people.name = 'Homn';
var people = {name : 'Homn”,year:1940};

操作
+

var i = "10" + 20 ;//1020 字符串和数字的拼接
var j = 10 + 20 ; //30 算术求和

= 赋值

== 比较两个值是否相等，并不严格相等，会自动经过转换然后比较

=== 全等操作符，执行严格的比较，不仅比较值，而且会比较变量的类型

循环语句
while循环与if语句的唯一区别是：只要给定条件的求值结果是true,包含在花括号里的代码就将反复执行下去
do{ statements ; }while( condition ) ;包含在循环语句内部的代码至少执行一次

对象
自包含的数据集合，点语法进行访问
属性是隶属于某个特定对象的变量，
方法是只有某个特定对象才能调用的函数
1.用户自定义对象
2.内建对象：内建在js语言里的对象，Array,Math
3.宿主对象：运行环境（如浏览器）提供的预定义对象

DOM

DOM把一份文档表示为一棵树，家谱树，节点树
节点：
元素节点 p
文本节点 buy stuff
属性节点 titile = ‘reminder’
CSS
id,class属性就像是一个挂钩，一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式
获取元素
getElementById
getElementsByTagName
getElementsByClassName[只有较新浏览器才支持]

var shopping  = document.getElementById('purchase');
var items = shopping.getElementsByTagName('*');

自己实现getElementsByClassName函数

function getElementsByClassName(node,classname){
    if(node.getElementsByClassName){
        //使用现有方法
        return node.getElementsByClassName(classname);
    }else{
        var results = new Array();
        var elems = node.getElementsByTagName('*');
        for(var i = 0 ; i < elems.length ; i++){
            if(elems[i].className).indexOf(classname) != -1){
                results[results.length] = elems[i];
            }
        }
        return results ;
    }
}

当检查某项数据是否为null值时，其实是在检查它是否存在
if( sth != null) 即 if( sth )

设置和获取属性—只作用于元素节点
getAttribute
setAttribute

var shopping  = document.getElementById('purchase');
shopping.setAttribute("title" , "a list of goods");

若节点的title属性不存在，则先创建这个属性，然后设置它的值；若存在，则覆盖

通过setAttribute对文档做出修改后，在通过浏览器的view source选项去查看文档的源代码事看到的仍是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里
这种‘表里不一’的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行属性却不需要在浏览器里刷新页面

childNodes属性
元素中的空格被视为文本，而文本被视为节点

var body = document.getElementsByTagName('body')[0] ; //返回的数组中的第一个也是唯一一个元素--body

nodeValue属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

<p id='des'>hello,world</p>
var des =document.getElementById('des'); //p标签
var text = des.childNodes[0].nodeValue; //hello,world
//des.childNodes[0] 等价于 des.firstChild

包含在p元素里的文本是p元素的第一个子节点

最佳实践

平稳退化：确保网页在没有javascript的情况下也能正常工作–渐进增强（从内容开始，再逐步加强）
分离javascript:把网页的结构和内容与javascript脚本的动作行为分开：文档加载完成触发 window.onload =function；
向后兼容性：确保老版本的浏览器不会因为你的javascript脚本而死掉：if(!getElementById) return false ; 对象检测
- 性能考虑：确定脚本执行的性能最优
  尽量少访问DOM和尽量减少标记
  合并和放置脚本（减少加载页面时发送的请求数量）

例子：在新窗口打开一个链接（用户点击某个链接时弹出一个新窗口）
1. window.open( url , name , features )

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

“javascript:”伪协议让我们通过一个链接来调用js函数

//不推荐
<a href="javascript:popUp('http://www.example.com/');">Example</a>

内嵌的事件处理函数

//不推荐
<a href="#" onclick="popUp('http://www.example.com/');return false;">Example</a>

为js代码预留出退路：在链接里把href属性设置为真实存在的URL地址，让它成为一个有效的链接

<a href="http://www.example.com/" οnclick="popUp('http://www.example.com/');return false;">Example</a>
//popUp(this.getAttribute('href'))
//popUp(this.href)

事件处理函数的绑定

window.onload = prepareGallery; //文档加载完成后会执行prepareGallery函数
//多个函数绑定到window.onload时，只有最后一个执行
window.onload = function(){ //可以
    f1();
    f2();
}

推荐addLoadEvent函数

function addLoadEvent(func){
    var oldonload = window.onload;
        if( typeof window.onload != 'function')//目前window.onload没有绑定函数
            window.onload = func;
        }else{
            window.onload = function(){  //把func加载到事件队列里面
                oldonload();
                func();
            }
        }
//调用
addLoadEvent(f1);
addLoadEvent(f2);

ellieokokok

发布了52 篇原创文章 · 获赞 3 · 访问量 2万+

私信关注

Javascript_DOM编程艺术(上)

DOM

最佳实践

猜你喜欢