javascript dom编程艺术学习笔记之动态创建标记

---

目录

• 1.传统方法
  • 1.1document.write
  • 1.2 innerHTML属性方法
• 2. DOM方法
  • 2.1 creatElemlent方法
  • 2.2 appendChild方法
  • 2.3 creatTextNode方法
  • 2.4更复杂的组合
• 3. 动态创建HTML内容
  • 3.1 在已有元素前插入一个元素
• 4. Ajax
  • 4.1XMLHttpRequest对象
  • 4.2Hijax

---

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技术