javascript DOM编程艺术笔记4

发表于 | 分类于

第六章

结构化程序设计备忘

结构化程序设计有一个原则：函数只应该有一个入口和一个出口。
而在对象检测时很可能会违背这一原则；作者认为一个函数如果有多个出口，只要这些出口集中出现在函数开头部分（多个if语句并列；而非一层判断嵌套一层判断），就是可以接受的。

共享onload事件

将两个函数逐一绑定到onload事件上，只有最后的那个才会被实际执行。解决方法是：编写并使用addLoadEvent脚本。

注意

在自己编写的函数里，不应该做太多的假设，也就是要对假设能使用的方法做出判断。

优化

有时候if判断可以使用三元操作符来代替；它比较简短但逻辑不如if清晰。

键盘访问

视力残疾人无法看清鼠标指针，更喜欢使用键盘访问；针对键盘访问，可以使用node.onKeyPress事件。

注意

该事件处理函数很容易出问题，按下任意一个按键都会触发它，因此应该（在onclick满足需要时）尽量避免使用它。

第七章（动态创建标记）

传统方法

  • document.write("<P>this is passage.</p>");
    它可以便捷的将字符串插入到文档里；但最大的缺点是它违背了行为与表现分离的原则，需要< script >的引入；且容易导致验证错误。
  • node.innerHTML = "<P>this is passage.</p>"
    innerHTML属性不是W3C DOM标准组成部分，但包含到了HTML5规范中。（几乎所有浏览器都支持innerHTML属性。）innerHTML毫无细节可言，要想获得细节，必须使用DOM方法和属性。（无法区分插入和替换；一旦使用全部替换。）浏览器在呈现正宗xhtml文档是会忽略innerHTML属性。

这两者都是HTML专有属性，不能用于其他任何标记语言。

DOM方法

使用DOM方法改变的是DOM节点树；在节点树上添加内容，就必须插入新的节点。

新节点创建

  • 创建元素节点并赋值var nodeTag = document.createElement("tagname")；
  • 创建文本节点并赋值var txt = document.createTextNode("new text");
  • 将节点插入节点树parent.appendChild(child)
  • 在已有元素前插入一个新元素parentElement.insertBefore(newElement,targetElement);（目标元素父元素/利用targetElement的parentNode属性/；想插入的元素；插入的是目标元素之前）
  • 在已有元素后插入一个新元素(DOM没有该方法)
    1
    2
    3
    4
    5
    6
    7
    8
    function insertAfter(newElement,targetElement){
    	var parent = targetElement.parentNode;
    	if(parent.lastChild == targetElement){
    		parent.appendChild(newElement);
    	}else{
    		parent.insertBefore(newElement,targetElement.nextSibling);
    	}
    }//nextSibling是兄弟元素。

Ajax

异步加载:主要优势就是对页面的请求以异步的方式发送到服务器；而服务器不会以整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并和页面交互。
（适用范围：它依赖于javascript，所以可能会有浏览器不支持它，且搜索引擎的爬虫程序也不会抓取到有关内容。）

核心对象

XMLHttpRequest对象，它充当了浏览器脚本和服务器之间的中间人的角色。它有许多方法，其中最有用的是open方法，它用来指定服务器上将要访问的文件，指定请求类型：GET,POST,SEND；该方法的第三个参数用于只给指定请求是否以异步的方式发送和处理。

  1. 为了解决不同浏览器不兼容问题；给出以下函数：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function getHTTPObject(){
       	if (typeof XMLHttpRequest == "undefined"){
           	XMLHttpRequest = function(){
               	try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}/*不理解*/
               	catch (e){}
               	try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
               	catch (e){}
               	try {return new ActiveXObject("Msxml2.XMLHTTP");}
               	catch (e){}
               	return false;
           	}
       	}else {
           return new XMLHttpRequest();
       	}
    }

  2. 创建XMLHttpRequest对象：var request = getHTTPObject();

  3. 使用XMLHttpRequest对象open方法：request.open("GET","example.txt",true)

  4. onreadystatechange事件处理函数：

    1
    2
    3
    request.onreadystatechange = function(){
    //处理响应
    }；

  5. 发送请求：request.send(null);

readystate属性值：

  • 0；未初始化
  • 1；正在加载
  • 2；加载完毕
  • 3；正在交互
  • 4；完成交互

用于访问服务器发回的数据的两个属性
responseText属性：用于保存文本字符串数据
responseXML属性：用于保存Content-Type头部中指定为“text/xml”的数据

注意

使用Ajax时；千万要注意同源策略，其发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求。

star Huang wechat
my wechat public welcomes to your attention