《JavaScript DOM 编程艺术》notes

Chapter 2     JavaScript语法

  •     变量

        变量命名:    变量名包含字母、数字、美元符号和下划线(但第一个字符不允许是数字)区分大小写,不允许变量名中包含空格或标点符号($除外)。

        驼峰格式  是函数名、方法名和对象属性名命名的首选格式。

  • 数据类型

    JavaScript 是一种弱类型语言(weakly typed)语言,不需要进行任何类型的声明。

  •     操作

    算术操作符:+  - 

"37"-7   //30 
"37"+7    //377

    可以利用+/- 操作符,规范数据类型:num - 0;   num+"" ;

  • 变量的作用域(scope)

全局变量(global variable): 可以在脚本的任何位置被引用。

局部变量(local variable): 只存在于声明它的那个函数内部。

  • 对象

    对象的数据可以通过两种方式访问:属性(property)和方法(method)

Object.property ;  
Object.method() ; 

    内建对象(native Object):Array对象、 Math对象、 Date对象

    宿组对象(host Object):如 document对象


Chapter 3     DOM

DOM(Document Object Model): 文档对象模型

  • 节点(node)

    DOM tree 是由node构成的集合。三种节点:元素节点、文本节点、属性节点。

  • 获取元素

三种获取元素节点:元素ID、标签名字、类名字

document.getElementById("purchases");  //ID,返回一个对象
document.getElementsByTagName("a");    //标签名字,返回对象数组
getElementsByClassName("sale");    //类名字,返回对象数组
  • 获取和设置属性

getAttribute方法和setAttribute方法不属于document对象,只能通过元素节点对象调用。

var obj = document.getElementById("id");
obj.getAttribute("title");   //获取属性
obj.setAttribute("class","goods");

setAttribute做出的修改不会反映在文档本身的源代码中。

DOM的工作模式:先加载文档的静态内容,再动态更新,动态更新不影响文档的静态内容。

Chapter 4     JavaScript图片库

  •     childNodes属性

    获取任何一个元素的所有子元素,返回一个数组。

document.getElementsByTagName("body")[0]  //文档只有一个body元素,所以它是返回的数组中的第一个(也是唯一一个元素)
  •     nodeType属性
1. 元素节点:nodeType = 12. 属性节点:nodeType = 23. 文本节点:nodeType = 3
  • nodeValue属性

    能够改变文本的值。

    <p>元素的nodeValue的属性值是null,因为真正储存文本的是它的儿子:文本节点。

  • firstChild 和 lastChild属性

    比node.childNodes[0] 和node.childeNodes(node.childNodes.length-1]可读性好。

Chapter 5     最佳实践

  • 平稳退化

    浏览器不支持JavaScript的情况下仍能够顺利浏览网站。这些平稳退化更多是面向网络搜索爬虫,如果不能平稳退化,可能在搜索引擎上的排名就可能下降。

  • 伪协议:这种做法非常不好

可以用来链接JavaScript函数的伪协议: javascript:
用法:  <a href="javascript:function_name(parameter)"></a>

  • 渐进增强

用额外的信息层去包裹原始数据。JavaScript 代码负责关于“行为”的信息。

  • 向后兼容

网页设计需要考虑旧浏览器的解析能力。

  1. 对象检测:检测浏览器对JavaScript的支持程度。
if (!document.getElemnetByid)return false;

    2.浏览器嗅探技术 (browser sniffung)

    通过检索浏览器的品牌和版本来改善JS的向后兼容性。 但是有风险,因为浏览器有时候信息并不标准,而且浏览器的版本迭代更新导致这个实现起来更难。

  • 性能考虑

    为了web的流畅性。

    1.   减少DOM访问和减少标记

        每次DOM查询,都会历遍整个DOM树,所以减少DOM操作非常有必要。 可以用变量存储必要的DOM查询。 另外减少文档中标记数量可以减少DOM tree的规模,减少DOM操作的遍历时间。

    2.  合并和放置脚本

    合并脚本可以减少HTTP请求的次数。

    脚本放置到<head>中会导致浏览器无法并行加载其他文件。(根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。但是下载脚本的期间,浏览器不会下载其他任何文件,即便是不同域名的文件页不会下载。)

    3.  压缩脚本

    JSMin
    YUICompressor
    Closure Compiler

Chapter 6     图片库改进版

1、结构化程序设计要求函数只有一个入口和出口。能够接受出口集中出现在函数的开头部分。
2、每个事件处理函数只能绑定一条指令。
3、nodeName属性总是返回一个大写字母的值,即使元素在HTML文档中是小写字母


  • DOM Core:
var source = whichpic.getAttribute("href");

  • HTML-DOM:
var source = whichpic.href;

Chapter 7     动态创建标记

  • document.write
document.write()可以将字符串插入到文档里。 但是document.write()的兼容性差,最好不要去使用。

  • innerHTML属性

    这个属性不适W3C DOM标准的组成,但是已经包含到HTML5中。 innerHTML属性可以用来读写某给定元素里的HTML内容。 innerHTML属性不会获取元素里面的细节,一旦使用了innerHTML属性,他的全部内容都会被替换。

  • DOM方法

用DOM方法改变DOM节点树上的内容,如setAttribute方法并没有改变文档的物理内容

    1.  createElement 方法

    创建一个JavaScript世界的孤儿:

var para = document.createELement("p");

    2.  appendChild() 方法

    给para 孤儿找个家

var testdiv = document.getELementById("testdiv");
testdiv.appendChild(para);
    3.    createTextNode
      以上已经插入了一个P元素节点,但是需要增加文本的时候,还需要创建一个文本节点。 要使用createTextNode去创建一个文本节点。 例如:
var textnode = document.createTextNode("text");
para.appendChild(textnode);
  • insertBefore()

DOM提供了名为insertBefore()方法,这个方法是将一个新元素插入到现有的元素之前。

  • insertAfter()

自定义的一个函数,DOM没有提供

//节点添加到另一个节点后
function insertAfter(newElement,targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) { //检查是不是新节点最后一个节点,如果是直接插入
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);// 如果不是,则插入目标节点的下一个兄弟节点之前
    }
}

  • Ajax

    1.  XMLHttpRequest对象

  充当浏览器脚本(客户端)与服务器之间的中间人角色。JavaScript可以通过这个对象自己发送请求。IE7+都支持原生的XHR对象了,只有IE5之前的比较麻烦。

// 对象检测通过XMLHttpRequest,如果失败则继续检测其他办法
function getHTTPObject() {
    if (typeof XMLHttpRequest == "undefined") {
        XMLHttpRequest = function() {
            try {return new ActiveObject("Msxml2.XMLHTTP.6.0");}
                catch(e){}
            try {return new ActiveObject("Msxml2.XMLHTTP.3.0");}
                catch(e){}
            try {return new ActiveObject("Msxml2.XMLHTTP");}
                catch(e){}
            return false;
        }
    }
    return new XMLHttpRequest();
}

    该对象的open方法:打开指定服务器上将要访问的文件;  指定请求类型:GET、POST或SEND;  第三个参数用于指定请求是否以异步方式发送。

var request = getHTTPObject();
request.open("GET", "example.html", true);
    2.  request.readyState: 0-4,     其中4表示完成。

    3.  Hijax: 渐进增强的使用Ajax.



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页