您的位置：首页 > Web前端 > JavaScript

《JavaScript DOM 编程艺术》（第二版）读书笔记（三）

2015-02-26 12:29 501 查看

第六章案例研究：图片库改进版

这一章将根据第五章提到的内容对图片库进行了改进

首先检查DOM方法是否被游览器支持

if(!document.getElementById)  return false;
if(!document.getElementsByTagName)  return false;
if(!document.getElementById("placeholder"))
//.......类似的测试

接下来讲到了一个重点内容：共享onload事件

JavaScript往往需要在HTML文档加载结束后执行，不然一些dom方法会找不到对象,这就是为什么jquery开头要加$(document).ready()

作者给出了一个有意思的方法，用于加载多个函数，这个方法看起来很简单，但其中思想需要仔细领悟，这本书中以后的几个方法的思路也是类似的

addLoadEvent函数

function addLoadEvent(func) {
var oldonload=window.onload;
if(typeof window.onload != 'function'){
window.onload=func;
} else {
window.onload= function (){
oldonload();
func();
}
}
}

1.把现有的window.onload事件处理函数存入变量oldonload.

2.如果在这个处理函数上还没有绑定任何函数，就向平时一样把函数添加给它.

3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有函数末尾.

三元操作符

variable(变量) = condition(条件) ? if true : if else;

可以看出三元操作符是if/else 的一种变体

nodeName属性

返回元素的标签名，总是返回大写字母比如IMG,P,A等html标签

第七章动态创建标记

document.write()方法可以轻松的把字符串插入文档，但是它不能做到javascript完全与html分离，必须吧<script>放到<html>里。

innerHTML属性

该属性被浏览器广泛支持，既能用于读取，又能用于写入。

利用这个技术无法区分“插入一段html内容”与“写入一段html内容”。一旦使用innerHTML,它的全部内容将被替换。

<div id="test">
<p>this is <em>my</em> content.</p>
</div>
var text= document.getElementById("test").innerHTML
alrert(text) // <p>this is <em>my</em> content.</p>

<div id="test">
</div>
document.getElementById("test").innerHTML = "<p>this is <em>my</em> content.</p>"  //浏览器中会看到相应效果

DOM方法介绍

1.createElement方法

document.createElement(nodename);

创建一个元素节点，只不过属于文档碎片(document fragment),没有成为DOM节点树的一部分，需要被添加进DOM树。

2.appendChild方法

parent.appendChild(child)

把新创建的节点插入某个文档的节点树，让它成为这个文档某个现有节点的子节点。

3.createTextNode方法

document.createNode(text)

创建一个文本节点，注意它与createElement的差别。

现在innerHTML方法就能用上述几个DOM方实现了。

4.insertBefore()方法

parentElement.insertBefore(newElement,targetElement)

把一个新元素插入到一个现有元素的前面，必须告诉它父元素(parentElement)、新元素(newElement)、目标元素(targetElement)。

5.insertAfter()函数(DOM中没有此方法)

function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

parentNode属性：父节点；nextSibling属性：下一个兄弟元素节点；

这个函数十分简单，却效果很好。

Ajax

这是前端必须掌握的技能，现在页面已经离不开Ajax效果了，开发人员一般用jquery来处理这一行为，作者介绍了javasciprt方法

获取XMLHttpRequest对象，作者提供了兼容的方法，记下就好

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;
}
return new XMLHttpRequest();
}

作者提供了一个例子：

function getNewContent(){
var request = getHTTPObject();
if(request){
request.open("GET","example.txt",true);
request.onreadystatechange = function(){
if(request.readyState==4){
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
request.send(null);
} else{
alert('Sorry,your browser doesn\'t support XMLHttpRequest');
}
}
addLoadEvent(getNewContent);

当页面加载完成，以上代码发起一个GET请求，加载exemple.txt文件

request.open()

代码中的onreadystatechange是一个时间处理函数，它会在服务器给XMLHttpRequest对象送回响应时被触发执行

request.onreadystatechange = dosomething

然后就可以发送请求

reequest.send(null)

浏览器会在不同阶段更新readyState属性 0 代表未初始化 1 代表正在加载 2代表加载完毕 3代表正在交互 4表示完成。

在这个例子中readyState=4时，就会从requst里获取requestText内容

这一篇就到这里，Ajax内容在最后一章会有一个更详细的例子

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航