<html>
<head><title>head元素中的js</title>
<script type="text/javascript">
fuction message(){
alert("在<head>中")
}
</script>
</head>
<body onload="message()">
</body>
</html>
2012年4月29日20:33:55
操作web页面
对于创建一个ajax应用所需的知识而言js之占了三分之一，接下来如何通过js来修改web页面内容
隐藏的XML
现代浏览器对每个访问过的页面，都会在内存中以XMl文档的形式保存一个副本，不管你访问的是新型的XTML还是老的HTMl2.o站点（当web页不是良好的XMl时，浏览器将遵从一个内部算法，将HTMl转成XML）对于这种内存中的web页面的XMl表示，js代码可以直接访问，以实现由程序来确定与页面相关的各类信息。
更重要的是，XMl文档能够被修改，而且这些修改能够立即反映到浏览器所呈现出来的页面中。因此要实现动画、动态修改等其他效果，唯一要做的事就是修改web页面底下的XMl文档。如何修改？
修改XMl：DOM API
在主流浏览器中，针对js代码访问XMl文档，都提供了相同的API，即众所周知的DOM API 简单地说，文档对象模型（DOM）就是用来表示内存中的XMl元素、属性以及其他组件对象的。dom api 将内存中的xml文档视为一个document文档对象。
你可以获得对该document对象的引用，而表示当前web页面则可以简单地使用一个名为document的变量来引用它。基于这个实例，可以查询在该web页面中每个XMl元素的引用，他们被视为Element对象。同样，也可以通过Element对象来修改XMl元素的属性。
看例子：下面代码包括一个简单的web页面，它将在按钮按下时修改其自身：
<html >
<head>
<script type="text/javascript">
function modifyPage(){
var htmlElement=document.documentElement
var children=htmlElement.childNodes
var bodyElement
for ( i=0;i<children.length;i++){
if(children[i].nodeName=="BODY"){
bodyElement=children[i]
break;
}
}
children=bodyElement.childNodes
var divElement
for(i=0;i<children.length;i++){
if(children[i].nodeName=="DIV"){
divElement=children[i]
break;
}
}
divElement.replaceChild(document.createTextNode("Goodbye,world!"),divElement.childNodes[0])
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>hello,world.</div>
<button onclick="modifyPage()">click me</button>
</body>
</html>
dom api的使用方法看上去很直观且令人愉快。但实际上并非如此。domapi实际上事相当愚钝。如果你从前从未使用过domapi，可能会希望事物与xml之间的映射是直观的、易于转换的。例如可能希望能够获得web页面中的根元素（即<html>元素）的引用，并且能够通过如下形式来获取其他元素的引用；
htmlElement.getElement("BODY");
可没这么幸运。dom api将xml文件中所有不同类型的内容都视为node节点，但api却不知为什么没有提供一种方法，让你从父元素查询其子元素。这就意味着以xml的形式遍历web页面是十分困难的。应避免使用dom逐字逐句的进行遍历，因为浏览器解析时，会自动产生子元素。
domapi中有一些shortcut。document对象中包括一个名为getElementByTagName（）的成员方法，它在我们的例子中能够用上。这是js函数的另一种写法：
function modifyPage（）{
var divElements=document.getElementByTagName（"DIV"）;
var divElement=divElement[0];
divElement.replaceChild(document.createTextNode("Goodbye,world!"),divElement.childNodes[0])
}
这看起来合乎人意多了。当然还存在顺序依赖问题，div元素相对于其他div位置而言是不变的。但是在真实的应用中是不现实的。
这里存在一种简单便利的机制，易于引用web页面中特定元素。如果为某个元素指定了属性id，那么就可以用document对象中的成员方法getelementById（）来检索这个元素。
function modifyPage（）{
var divElement=document.getElementByIdx_x("toReplace")
divElement.replaceChild（document.createTextNode("Goodbye,world"),divElement.childNodes[0]）
}
第二行代码采用了一种清晰的方法，用于获取所寻找的div元素的引用。
官方domapi需要开发人手动的维护所有元素的节点，增加一个新的节点，以便修改其内容，
function modifyPage（）{
var divElement=document.getElementByIdx_x（"toReplace"）
divElement.innerHTML="goodbye,world"
}
事实标准中的innerHTML属性可以通过传入一个字符串，以修改元素中的内容，这个字符串将通过XMl进行解析并替换当前的内容。