[经验总结]近期JavaScript编程总结-优快云博客

本文汇总了JavaScript在处理XML、文件操作、DOM操作等方面的实用技巧，包括读取和生成XML文件、弹窗处理、异常处理等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript

转自： http://www.disandu.com/?p=603
============================================================================
1处理XSLT调用带参数的XSLT模板的方法详见 23条
<html>
<body>
<script type="text/javascript">

// Load XML
varxml = newActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")

// Load XSL
varxsl = newActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")

// Transform
document.write(xml.transformNode(xsl))

</script>

</body>
</html>
==========================================================================
2处理XML

一.读入XML文件
<script language="Javascript">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
</script>

二.生成保存XML文件
<script language="javascript">
vardoc = newActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")

//加载文档
//doc.load("b.xml");

//创建文件头
varp = doc.createProcessingInstruction("xml","version=’’1.0’’ encoding=’’gb2312’’");

//添加文件头
doc.appendChild(p);

//用于直接加载时获得根接点
//var root = doc.documentElement;

//两种方式创建根接点
//var root = doc.createElement("students");
varroot = doc.createNode(1,"students","");

//创建子接点
varn = doc.createNode(1,"ttyp","");

//指定子接点文本
//n.text = " this is a test";

//创建孙接点
varo = doc.createElement("sex");
o.text = "男"; //指定其文本

//创建属性
varr = doc.createAttribute("id");
r.value="test";

//添加属性
n.setAttribute Node(r);

//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";

//添加属性
n.setAttributeNode(r1);

//删除第二个属性
n.removeAttribute("class");

//添加孙接点
n.appendChild(o);

//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));

//添加注释
n.appendChild(doc.createComment("this is a comment/n"));

//添加子接点
root.appendChild(n);

//复制接点
varm = n.cloneNode(true);
root.appendChild(m);

//删除接点
root.removeChild(root.childNodes(0));

//创建数据段
varc = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);

//添加根接点
doc.appendChild(root);

//查找接点
vara = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");

//显示改接点的属性
for(var i= 0;i<a.length;i++){
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++){
alert(a[i].attributes[j].name);
}
}

//XML保存（需要在服务端，客户端用FSO）
//doc.save();

//查看根接点XML
if(n){
alert(n.ownerDocument.xml);
}
</script>
==========================================================================
3JavaScript写文件：
varfs=newActiveXObject("Scripting.FileSystemObject");
varfile=fs.CreateTextFile("c://test.txt",true);
file.WriteLine("This is test text.");
file.Close();
==========================================================================
4工具函数，这样您就可以通过一个较短的名字来使用 getElementById()方法
functionid(x){
if(typeofx == "string")returndocument.getElementById(x);
returnx;
}
==========================================================================
5
语法
document.getElementsByName(name)
该方法与 getElementById()方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName()方法返回的是元素的数组，而不是一个元素。
==========================================================================
6
语法
document.getElementById(id)
说明
HTML DOM 定义了多种查找元素的方法，除了 getElementById()之外，还有 getElementsByName()和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。
==========================================================================
7
语法
document.getElementsByTagName(tagname)
说明
getElementsByTagName()方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*"传递给 getElementsByTagName()方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
提示和注释
注释：传递给 getElementsByTagName()方法的字符串可以不区分大小写。

varx=document.getElementsByTagName("p");
for(vari=0;i<x.length;i++)
{
// do something with each paragraph
}
==========================================================================
8Root根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。
==========================================================================
9节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName （节点名称）
nodeValue（节点值）
nodeType （节点类型）
==========================================================================
10nodeName
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
==========================================================================
11获得元素的文本值两种方法
//IE不支持下面这行，Chrome与Firefox通过。
varx = document.getElementById("frame1").contentDocument;

alert(x.getElementById("exam_time").childNodes[0].nodeValue);

alert(x.getElementById("exam_time").innerHTML);

==========================================================================
12iframe
创建： <iframe src="http://www.baidu.com"id="frame1"name="frame1"frameborder="0"height="200"width="200"framespace="0"marginheight="0"marginwidth="0"scrolling="no"></iframe>

1> 滑动边框
2>
==========================================================================
13String对象

http://www.w3school.com.cn/js/jsref_obj_string.asp
==========================================================================
14分析URL中的参数
varparam = newObject();
varurl = document.URL;
varstrData;
varstrStyle;

alert(url);
varbNonePaper = true;
if(url != "")
{
idx = url.indexOf("?");
if(idx != -1)
{
varstr = url.substr(idx+1);//去掉?号
alert(str);
strs = str.split("&");
for(vari = 0; i < strs.length; i++)
{
param[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}

strData = param["totalNum"];
strStyle = param["rightNum"]
alert(strData);
}

==========================================================================
15播放Flash

---------------------------------------
1.5版本用法：
// swfobject 1.5 注意不能用swfobject 2.0+
// http://www.adobe.com/devnet/flashplayer/articles/swfobject.html
varso = newSWFObject("bye.swf", "sotester", "100%", "100%", "8", "#FF6600");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.addParam("scale", "noscale");
so.write("flash");
---------------------------------------
中文文档
1.5版http://www.awflasher.com/flash/articles/swfobj.htm

官方文档 http://code.google.com/p/swfobject/wiki/documentation
----------------
2.2版本用法示例：
<script type="text/javascript">
// file: mp3文件 divName: 待写入div的id
functionplayAudio(file, divName){
try{
arg1 = "res/singlemp3player.swf?file="+file;
// swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0", "singlemp3player.swf");

varflashvars = true;

varparams = {
menu: "true",
wmode: "Transparent",
};

varattributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};

swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0","expressInstall.swf", flashvars, params, attributes);

alert("haha1");
}
catch(error){
alert(error.name);
alert(error.description);

}
}

playAudio("1.mp3", "myContent");
alert("haha");
</script>

----------------
==========================================================================
16弹出窗口
/*
* 打开新窗口
* f:链接地址
* n:窗口的名称
* width:窗口的宽度
* height:窗口的高度
* s:窗口是否有滚动条，1：有滚动条；0：没有滚动条
*/
functionopenWin(f,n,width,height,s){
sb = s == "1"? "1": "0";
l = (screen.width - width)/2;
t = (screen.height - height)/2;
sFeatures = "left="+ l +",top="+ t +",height="+ height +",width="+ width
+ ",center=1,scrollbars="+ sb + ",status=0,directories=0,channelmode=0";
openwin = window.open(f , n , sFeatures );
if(!openwin.opener)
openwin.opener = self;
openwin.focus();
returnopenwin;
}

==========================================================================
17出错处理
1》异常
try

{

alert(parent.document);

}

catch(error){
errMsg = error.name + ": "+ error.message;
alert(errMsg);
// alert(error.name);
// alert(error.message);
}
-------------------------------------
2》错误处理
// Display error messages in a dialog box, but never more than 3
window.onerror = function(msg, url, line){
if(onerror.num++ < onerror.max){
alert("ERROR: "+ msg + "/n"+ url + ":"+ line);
returntrue;
}
}

==========================================================================
18请教如何改变网页背景音乐的曲目

functionplaymusicfile(musicfile)
{
varobjMusic = document.getElementById("bgmusic");
varparEle = objMusic.parentNode;
parEle.removeChild(objMusic);
// objMusic.src= musicfile;

varnewEle = document.createElement("embed");
newEle.setAttribute("id","bgmusic");
newEle.src=musicfile;
newEle.setAttribute("hidden","true");
newEle.setAttribute("autostart","true");
parEle.appendChild(newEle);
}

这样可以解决。
==========================================================================
19正则表达式替换时注意判空，不然会造成 IE8中未知错误。
//正则表达式匹配样式
functionrexCSS()
{
varobjs = document.getElementsByTagName("P");
if(!objs)
{
return;
}
for(i=0; i<objs.length; i++)
{
if(objs[i].innerHTML.indexOf("<img")== -1&&
objs[i].innerHTML.indexOf("<IMG")== -1)
{
varstr = objs[i].innerHTML;

try{
if(str.length != 0)
objs[i].innerHTML = str.replace(/[/u4E00-/u9FA5]+/g, "<span class = 'CNStyle'>$&</span>");
}
catch(eee)
{
alert(eee.message);
alert(objs[i].innerHTML);
}
}
}
}
==========================================================================
20jQuery Mp3播放器
/*********************************************************************
*jMP3 v0.2.1 - 10.10.2006 (w/Eolas fix & jQuery object replacement)
* an MP3 Player jQuery Plugin (http://www.sean-o.com/jquery/jmp3)
* by Sean O
* Download by http://www.jb51.net
* An easy way make any MP3 playable directly on most any web site (to those using Flash & JS),
* using the sleek Flash Single MP3 Player & the fantabulous jQuery.
*********************************************************************/

************************************************************************
应用代码：
// file: mp3文件 divName: 待写入div的id
functionplayAudio(file, divName){
try{
arg1 = "res/singlemp3player.swf?file="+file;
// swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0", "singlemp3player.swf");

varflashvars = true;

varparams = {
menu: "true",
wmode: "Transparent",
};

varattributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};

swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0","expressInstall.swf", flashvars, params, attributes);

alert("haha1");
}
catch(error){
alert(error.name);
alert(error.description);

}
}

playAudio("1.mp3", "myContent");

************************************************************************

http://www.sean-o.com/jquery/jmp3/
==========================================================================
21下面这种情况会导致div写两次
<div id="1">
<script type="text/javascript">
playAudio("1.mp3", "1");
</script>
</div>

==================================================================
22JS处理 XML

一.读入XML文件
<script language="Javascript">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
</script>

二.生成保存XML文件
<script language="javascript">
vardoc = newActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")

//加载文档
//doc.load("b.xml");

//创建文件头
varp = doc.createProcessingInstruction("xml","version=’’1.0’’ encoding=’’gb2312’’");

//添加文件头
doc.appendChild(p);

//用于直接加载时获得根接点
//var root = doc.documentElement;

//两种方式创建根接点
//var root = doc.createElement("students");
varroot = doc.createNode(1,"students","");

//创建子接点
varn = doc.createNode(1,"ttyp","");

//指定子接点文本
//n.text = " this is a test";

//创建孙接点
varo = doc.createElement("sex");
o.text = "男"; //指定其文本

//创建属性
varr = doc.createAttribute("id");
r.value="test";

//添加属性
n.setAttributeNode(r);

//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";

//添加属性
n.setAttributeNode(r1);

//删除第二个属性
n.removeAttribute("class");

//添加孙接点
n.appendChild(o);

//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));

//添加注释
n.appendChild(doc.createComment("this is a comment/n"));

//添加子接点
root.appendChild(n);

//复制接点
varm = n.cloneNode(true);
root.appendChild(m);

//删除接点
root.removeChild(root.childNodes(0));

//创建数据段
varc = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);

//添加根接点
doc.appendChild(root);

//查找接点
vara = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");

//显示改接点的属性
for(var i= 0;i<a.length;i++){
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++){
alert(a[i].attributes[j].name);
}
}

//XML保存（需要在服务端，客户端用FSO）
//doc.save();

//查看根接点XML
if(n){
alert(n.ownerDocument.xml);
}
</script>

=========================================================================
23XML操作xmlHelper.js
http://www.google.cn/codesearch/p?hl=zh-CN#5zTQZzprFTc/trunk/static/media/javascript/xmlHelper.js&q=transformNode%20XsltArg%20lang:javascript&sa=N&cd=1&ct=rc&l=134
functionparseXML(text)
{
varxmlDoc = null;

try//Internet Explorer
{
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try// Firefox, Mozilla, Opera, etc.
{
parser=newDOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
//return;
}
}

returnxmlDoc;
}

functionloadXMLFile(fname)
{
varxmlDoc;

// code for IE
if(window.ActiveXObject)
{
xmlDoc = newActiveXObject("MSXML2.FreeThreadedDomDocument");
//xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
elseif(document.implementation
&& document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot load xml files.');
}
xmlDoc.async = false;
xmlDoc.load(fname);
returnxmlDoc;
}

functiontransformXml(xmlDoc, xlstDoc, outputDivID)
{
//xml=loadXMLDoc("cdcatalog.xml");
//xsl=loadXMLDoc("cdcatalog.xsl");

//var returnText;

// code for IE
if(window.ActiveXObject)
{
varex = xmlDoc.transformNode(xlstDoc);
outputDiv.innerHTML=ex;
//alert(ex);
//returnText = ex;
}
// code for Mozilla, Firefox, Opera, etc.
elseif(document.implementation
&& document.implementation.createDocument)
{
varxsltProcessor=newXSLTProcessor();
xsltProcessor.importStylesheet(xlstDoc);
varresultDocument = xsltProcessor.transformToFragment(xmlDoc,document);
//returnText = resultDocument;
varoutputDiv = document.getElementById(outputDivID);

// Clear current results and add new results
while(outputDiv.childNodes.length >= 1){
outputDiv.removeChild(outputDiv.firstChild);
}
outputDiv.appendChild(resultDocument);
}

//return returnText;
}

// Params:
//- xsltArgs: an array of objects with obj.name and obj.value properties
functiontransformXmlWithArgs(xmlDoc, xsltDoc, xsltArgs, outputDiv)
{
//xml=loadXMLDoc("cdcatalog.xml");
//xsl=loadXMLDoc("cdcatalog.xsl");

//var returnText;

// code for IE
if(window.ActiveXObject)
{
vartemplate = newActiveXObject("MSXML2.XSLTemplate");
template.stylesheet = xsltDoc;
varproc = template.createProcessor();
proc.input = xmlDoc;
if(xsltArgs != null){
for(vari=0;i<xsltArgs.length;i++){
varparam = xsltArgs[i];
proc.addParameter(param.name,param.value,"");
}
}
proc.transform();
varex = proc.output;
//var ex = xmlDoc.transformNode(xsltDoc);
outputDiv.innerHTML=ex;
//alert(ex);
//returnText = ex;
}
// code for Mozilla, Firefox, Opera, etc.
elseif(document.implementation
&& document.implementation.createDocument)
{

varxsltProcessor=newXSLTProcessor();
xsltProcessor.importStylesheet(xsltDoc);

if(xsltArgs != null){
for(vari=0;i<xsltArgs.length;i++){
varparam = xsltArgs[i];
xsltProcessor.setParameter("", param.name, param.value);
}
}
/*
for(xsltArg in xsltArgs)
{
xsltProcessor.setParameter("", xsltArg.name, xsltArg.value);
//xsltProcessor.setParameter("", xsltArg, xsltArgs[xsltArg]);
}*/

resultDocument = xsltProcessor.transformToFragment(xmlDoc,document);
//returnText = resultDocument;
//alert(resultDocument);
outputDiv.appendChild(resultDocument);
}

//return returnText;
}

=========================================================================
24全面介绍javascript异常处理(try…catch…finallywindow.onerror)

http://snap.oncoding.cn/javascript/base/article200907/216.html

=========================================================================
25对象与数组
varxsltParam = newObject();
xsltParam.name = "propertyFile";
xsltParam.value = "Property.XML";

varargArray = newArray();
argArray[0]= xsltParam;
=========================================================================
26一些莫名其妙的脚本错误是文本编码造成的，最好将编码统一改成utf-8