1.传统方法
1.1document.write
document对象的write方法可以方便便捷地把字符串插入文档
最大的缺点是违背了“行为与表现分离”的原则
容易导致验证错误
避免使用document.write方法
1.2 innerHTML属性方法
现在包含到HTML5规范中,innerHTML毫无细节而言
DOM像手术刀,innerHTML像大锤
需要把一大段HTML内容插入网页,innerHTML属性更加使用。支持读取和写入
innerHTML属性比document.write更加值得推荐,它是HTML的专有属性,无法用于其他任何标记语言
2. DOM方法
动态方法创建标记:你不是在创建标记,而是在改变节点树
2.1 creatElemlent方法
语法如下
document.creatElement(nodeName)
创建的元素已经存在,只是不是任何DOM节点树的组成部分,游荡在javascript世界的孤儿,称之为文档碎片
2.2 appendChild方法
让创建的元素成为父节点的子节点
语法如下
parent.appendChild(child)
例
var para = document.creatElement("p");
var testdiv = getElementById("testdiv");
testdiv.appendChild(para);
等同于如下代码
document.getElementById("testdiv").appendChild(document.creatElement("p"));
2.3 creatTextNode方法
语法如下
document.creatTextNode(text);
例
window.onload = function(){
var para = document.creatElement("p");
var txt = document.creatTextNode("Hello world");
para.appendChild(txt);
var testdiv = getElementById("testdiv");
testdiv.appendChild(para);
}
2.4更复杂的组合
3. 动态创建HTML内容
有一个图片和一段文字仅仅是为了showPic脚本服务的。既然这些元素存在是为了DOM服务的,用DOM的方法创建是最合适的选择
- 创建img元素节点
- 设置节点的id属性
- 设置节点的src属性
- 设置节点的alt属性
- 创建p元素节点
- 设置p的id属性
- 创建文本节点
- 把文本节点加到p上
- 把p元素和img加入到文档
var placeholder = document.creatElement("img");
placeholder.setAttribute(id", "placeholder");
placeholder.setAttribute("src", "image/placeholder.gif");
placeholder.setAttribute("alt", "my image gallery");
var description = document.creatElement("p");
description.setAttribute("id", "description")
var desctext = document.creatTextNode("Choose an image");
description.appendChild(desctext);
插入文档,很凑巧图片清单刚好是文档最后一个元素
document.getElementByTagName("body")[0].appendChild(placeholder);
document.getElementByTagName("body")[0].appendChild(description);
3.1 在已有元素前插入一个元素
insertBefore()方法
- 新元素:你想插入的元素(newElement)
- 目标元素:要插哪个元素之前(targetElement)
- 父元素:目标元素的父元素(parentElement)
调用语法
parentElement.insertBefore(newElement, targetElement);
在使用中我们不必知道他的父元素是睡,因为targetElement的parentNode属性值就是
var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder, gallery);
3.2 在已有元素后插入一个元素
insertAfter()方法
DOM本身并没有提供insertAfter方法,我们可以用已知DOM方法和属性编写方法
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNoder;
if (parent.lastChilde == targetName){
parent.appendChilde(newElement);
}else {
parent.insertBefore(newElement,targetname.nextSibling);
}
}
最终javascript和html
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder,gallery);
gallery.parentNode.insertBefore(description,gallery);
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
html清单
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="images/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>
</body>
</html>
4. Ajax
Ajax指异步加载页面技术
使用Ajax只更新页面一小部分内容,其他内容不用加载
4.1XMLHttpRequest对象
Ajax的核心技术就是XMLHttpRequest对象,充当着中间人的角色
微软最早在IE5中以ActiveX对象的形式实现一个名叫XMLHTTP的对象,IE创建新的对象要使用以下代码
var request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
其他浏览器基于XMLHttpRequest来创建对象
var request = new XMLHttpRequest();
getHTTPObject函数
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;
}
retuen new XMLHttpRequest();
}
XMLHttpRequest对象有很多中方法。最有用的是open方法,指定服务器上要访问的文件。指定请求类型有GET,POST或SEND。第三个参数用于指定请求是否以异步方式发送和处理。
getNewContent函数
function getNewContent(){
var request = getHTTPObject(){
if (request){
request.open("get", "exeample.txt", true);
request.onreadystatechage = function(){
if(request.readyState == 4)
{
var para = document.creatElement("p");
var txt = document.creatTextNode("request.responseText");
para.appendChild(txt);
document.getElementById('new').appendChild(para)
}
};
request.send(null);
}else {
alert('Sorry, your browser doesn\'t support XMLHttpRequest');
}
}
addLoadEvent(getNewConent);
onreadystatechage是一个事件处理函数。它会在服务区XMLHttpRequest对象送回响应时被触发执行。在这个函数中根据服务器的响应做相应的处理。
也可以引用一个函数
浏览器会在不同阶段更新readyState属性值
- 0表示未初始化
- 1表示正在加载
- 2表示加载完毕
- 3表示正在交互
- 4表示完成
异步请求在发送XMLHttpRequest请求后,仍会继续执行
AJax的一些挑战
- 与浏览器使用惯例冲突
- 每次操作都应得到明确的结果,在响应时要给用户明确的提示
4.2Hijax
指渐进增强地使用Ajax
12章详细介绍如何使用Hijax技术