——杨中科老.Net师视频笔记
在vs中新建一个名为Dom的解决方案，并在解决方案中添加一个web项目，选择ASP.NET WEB 应用程序，取名：WebApplicationDom1，然后在项目中添加文件即可。
文件结构：
HTMLPageWindow1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript">
//-----------confirm-------------
function confirmdemo() {
if (confirm('是否进入？')) {
alert("进入了？");
}
else {
alert("取消进入");
}
}
//--------定时器-----------------
var intervalId; //全局变量
function startInterval() {
intervalId=setInterval("alert('hello')",3000); //注意被执行的代码是字符串格式，也可以写一个匿名函数
}
setTimeout("alert('这是Timeout！')", 2000);
</script>
</head>
<body>
<p>
(2)confirm 方法，显示 " 确定 " 、 " 取消 " 对话框，如果按了 【 确定 】 按<br />
钮，就返回 true ，否则就 false。</p>
<!-- 重新导航到指定的地址： navigate("http://www.google.com");-->
<p>
(4)setInterval 每隔一段时间执行指定的代码，第一个参数为代码<br />
的字符串，第二个参数为间隔时间（单位毫秒），第二个参数为间隔<br />
时间（单位毫秒），返回值为定时器的标识.<br />
</p>
<input type="button" value="confirmtest" onclick="confirmdemo()" />
<input type="button" value="navigate测试" onclick="navigate('HTMLPageDom1.htm')" /><br />
<input type="button" value="setInterval测试" onclick="startInterval()" /><br />
<input type="button" value="停止Interval" onclick="clearInterval(intervalId)" /><br />
<p>
(5)clearInterval 取消 setInterval 的定时执行，相当于 Timer 中的<br />
Enabled=False 。因为 setInterval 可以设定多个定时，所以clearInterval <br />
要指定清除那个定时器的标识，即 setInterval 的返回值。</p>
</body>
</html>
HTMLPageDom1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript">
function bodymousedown() {
alert("别点击！");
alert("呵呵！");
}
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
</head>
<!--添加事件-->
<!--在body中添加了事件
<body onmousedown="alert('你点击了页面！');alert('哈哈')"> 方法一
<body onmousedown="bodymousedown()"> 方法二
-->
<body>
aaaaa
<br />
<input type="button" onclick="document.ondblclick=f1" value=" 关联事件 1" />
<!--
注意 f1 不要加括号。如果加上括号就变成了执行 f1函数，并且将函数的返回值复制给 document.ondblclick
-->
<input type="button" onclick="document.ondblclick=f2" value=" 关联事件 2" />
</body>
</html>
HTMLPageDlg.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript">
//showModalDialog('Dialog.htm'); //被拦截
//btn.value = "ok"; //报错，因为btn元素还没有被构建
</script>
</head>
<body onload="btn.value='OK'" onberoreunload="window.event.returnValue='文章会被丢失'"> <!--页面加载完成再调用-->
<input type="button" id="btn" value="模态对话框" onclick="ModellessDialog('Dialog.htm')" />
</body>
</html>
HTMLPageevent.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/script">
</script>
</head>
<!--onunload ：网页关闭（或者离开）后触发。-->
<body onload="btn.value='OK';onunload=alert('大爷慢走！')" onbeforeunload="window.event.returnValue='文章会丢失'">
<input type="button" id="btn" value="模态对话框" onclick="showModelDialog('Dialog.htm')" /><br>
输入用户名：<br />
<input type="text" /><br />
<textarea rows="20" cols="20">发帖</textarea><br />
</body>
</html>
HTMLPageProp.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<!--
window.location.href='http://www.itcast.cn' ，重新导向新的地址，和 navigate 方
法效果一样。 window.location.reload() 刷新页面
? window.event 是非常重要的属性，用来获得发生事件时的信息，事件不局限于
window 对象的事件，所有元素的事件都可以通过 event 属性取到相关信息。类似
于 winForm 中的 e(EventArg).
? altKey 属性， bool 类型，表示发生事件时 alt 键是否被按下，类似的还有
ctrlKey 、 shiftKey 属性，例子 <input type="button" value=" 点击 "
onclick="if(event.altKey){alert('Alt 点击 ')}else{alert(' 普通点击 ')}" /> ；
? clientX 、 clientY 发生事件时鼠标在客户区的坐标； screenX 、 screenY 发生
事件时鼠标在屏幕上的坐标； offsetX 、 offsetY 发生事件时鼠标相对于事件
源（比如点击按钮时触发 onclick ）的坐标。
? returnValue 属性，如果将 returnValue 设置为 false ，就会取消默认事件的处
理。在超链接的 onclick 里面禁止访问 href 的页面。在表单校验的时候禁止提
交表单到服务器，防止错误数据提交给服务器、防止页面刷新。
? srcElement ，获得事件源对象。几个事件共享一个事件响应函数用。
? keyCode ，发生事件时的按键值。
? button ，发生事件时鼠标按键， 1 为左键， 2 为右键， 3 为左右键同时按。
<body onmousedown="if(event.button==2){alert(' 禁止复制 ');}">
-->
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='Dialog.htm'" />
<input type="button" value="点击" onclick="if(window.event.ctrlKey){alert('按下了ctrl');}else{alert('普通点击');}" />
<a href="http://baidu.com" onclick="alert('禁止访问！');window.event.returnValue=false">百度</a>
<form action="a.aspx">
<input type="submit" value="提交" / onclick="alert('数据有问题！');window.event.returnValue=false;">
</form>
</body>
</html>
HTMLPageMarquee.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!--
案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔
500ms 向右滚动一下。提示：标题为 document.title 属性。实现代
码参考备注。
-->
<title>欢迎访问本页</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstch = title.charAt(0);
var leftstr = title.substring(1, title.length);
document.title = leftstr + firstch;
}
setInterval("scroll()",500);
</script>
</head>
<body>
</body>
</html>
HTMLPageClipboard.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>clipboardData 对象，对粘贴板的操作。</title>
</head>
<body>
<input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','这是一个很不错的网站，'
+'此部分由维唯为为编写!'+location.href);alert('已经将地址放到粘贴板中，通过QQ粘贴分享给你的好友吧！');" />
</body>
</html>
HTMLPageFuXi.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>维唯为为欢迎你！</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var lastCh = title.charAt(title.length - 1); //容易错
var leftStr = title.substring(0, title.length - 1);
document.title = lastCh + leftStr;
}
//每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像"越来越快"了。
</script>
</head>
<body>
<input type="button" value="滚动" onclick="timerId=setInterval('scroll()',500)" /><br />
<input type="button" value="停止(错误写法)" onclick="clearInterval(setInterval('scroll()',500))" />
<input type="button" value="停止" onclick="clearInterval(timerId)" />
</body>
</html>
前进倒退导航
HTMLPageHis1.htm：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<!--
history 操作历史记录
window.history.back() 后退 ； window.history.forward() 前进。也可以
用 window.history.go(-1) 、 window.history.go(1) 前进
-->
<body>
这是第一页。
<a href="HTMLPageHis2.htm">进入第二页</a>
</body>
</html>
HTMLPageHis2.htm：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
这是第二页。
<a href="javascript:window.history.back()">后退</a>
<input type="button" value="后退" onclick="window.history.back()" />
</body>
</html>
HTMLPagewrite.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript">
document.write("<a href='http://www.google.com.hk'>谷歌</a> ");
document.write("<a href='http://www.baidu.com'>百度网</a>");
</script>
</head>
<!--
document 的方法：
（ 1 ） write ：向文档中写入内容。 writeln ，和 write 差不多，只不过
最后添加一个回车
<input type="button" value=" 点击 " onclick="document.write('<font
color=red> 你好 </font>')" />
在 onclick 等事件中写的代码会冲掉页面中的内容， 只有在页面加载
过程中 write 才会与原有内容融合在一起。
<script type="text/javascript">
document.write('<font color=red> 你好 </font>');
</script>
-->
<body>
<br />
这里是页面的内容。<br />
<script type="text/javascript">
document.write("<font color=red>红色呀</font>");
</script>
<input type="button" value="走一个！" onclick="document.write('hello')" /><br />
哈哈哈哈哈哈。<br/>
---------------------------------------------------
<br />当当网
<script type="text/javascript">
var reffer = "";
var url = "";
if (window.parent != window.self) {
try { reffer = parent.document.referrer; }
catch (err) { reffer = document.referrer; }
try { url = parent.document.location; }
catch (err) { url = document.location; }
} else { reffer = document.referrer; url = document.location; }
document.writeln("<iframe marginwidth='0' marginheight='0' frameborder='0' bordercolor='#000000' scrolling='no' src='http://pv.heima8.com/index.php?p=136279711&b=100002862&itemid1=100046501&reffer=" + escape(reffer) + "&url=" + escape(url) + "' width='540' height='60'></iframe>");
</script><br />
-------------------------------------------------
<script type="text/javascript">
var reffer = "";
var url = "";
if (window.parent != window.self) {
try { reffer = parent.document.referrer; }
catch (err) { reffer = document.referrer; }
try { url = parent.document.location; }
catch (err) { url = document.location; }
} else { reffer = document.referrer; url = document.location; }
document.writeln("<iframe marginwidth='0' marginheight='0' frameborder='0' bordercolor='#000000' scrolling='no' src='http://pv.heima8.com/index.php?p=136279791&b=100002877&itemid1=135640641&reffer=" + escape(reffer) + "&url=" + escape(url) + "' width='760' height='60'></iframe>");
</script><br />
-------------------------------------------------
<script type="text/javascript">
var reffer = "";
var url = "";
if (window.parent != window.self) {
try { reffer = parent.document.referrer; }
catch (err) { reffer = document.referrer; }
try { url = parent.document.location; }
catch (err) { url = document.location; }
} else { reffer = document.referrer; url = document.location; }
document.writeln("<iframe marginwidth='0' marginheight='0' frameborder='0' bordercolor='#000000' scrolling='no' src='http://pv.heima8.com/index.php?p=136279791&b=100002877&itemid1=135640641&reffer=" + escape(reffer) + "&url=" + escape(url) + "' width='760' height='60'></iframe>");
</script><br />
<p>
网易国内新闻
--------------------------------------------------
<iframe frameborder=0 leftmargin=0 marginheight=0 marginwidth=0 scrolling=no src="http://news.163.com/special/m/mynews01.html" topmargin=0 width=100% height=255></iframe>
</p>
<p>
网易国际新闻
--------------------------------------------------
<iframe frameborder=0 leftmargin=0 marginheight=0 marginwidth=0 scrolling=no src="http://news.163.com/special/m/mynews02.html" topmargin=0 width=100% height=255></iframe>
</p>
<p>
网易社会新闻
--------------------------------------------------
<iframe frameborder=0 leftmargin=0 marginheight=0 marginwidth=0 scrolling=no src="http://news.163.com/special/m/mynews03.html" topmargin=0 width=100% height=255></iframe>
</p>
<br />
百度新闻免费代码：http://news.baidu.com/newscode.html
<p>
计算机新闻
--------------------------------------------------
<style type=text/css> div{font-size:12px;font-family:arial}.baidu{font-size:14px;line-height:24px;font-family:arial} a,a:link{color:#0000cc;}
.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>
<script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3A%BC%C6%CB%E3%BB%FA&tn=newsfcu&from=news&cl=2&rn=10&ct=0"></script>
</p>
<p>数据统计：<br />
<script src="http://s140.cnzz.com/stat.php?id=1045968&web_id=1045968&show=pic" language="JavaScript" charset="gb2312"></script>
</p>
<br />
</body>
</html>
HTMLPageGetElementById.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>GetElementById</title>
<script type="text/javascript">
function btnClick1() {
var txt = document.getElementById("textbox1");
alert(txt.value);
//alert(textbox1.value);
}
function btnClick2() {
var txt = document.getElementById("textbox2");
alert(txt.value);
//alert(textbox2.value);
//alert(form1.textbox2.value);
}
</script>
</head>
<!--
getElementById 方法 （非常常用），根据元素的 Id 获得对象，网页中 id 不能
重复。也可以直接通过元素的 id 来引用元素，但是有有效范围、
form1.textbox1 之类的问题，因此 不建议直接通过 id 操作元素，而是通过
getElementById 。
-->
<body>
<input type="text" id="textbox1" />
<input type="button" value="点一下" onclick="btnClick1()" />
<form action="Ok.aspx" id="from1">
<input type="text" id="textbox2" />
<input type="button" value="点一下" onclick="btnClick2()" />
</form>
</body>
</html>
HTMLPageGetElementByName.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>GetElementByName</title>
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
/*//在JS中for(var r in radios)不像C#中的foreach,并不会遍历每个元素，而是遍历key
for(var r int rados){
alert(r.value);
}*/
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
//给所有的 input 控件赋值
function btnClick2() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "hello";
}
}
</script>
</head>
<!--
（ * ） getElementsByName ，根据元素的 name 获得对象，由于页面中元素
的 name 可以重复，比如多个 RadioButton 的 name 一样，因此
getElementsByName 返回值是对象数组。
（ * ） getElementsByTagName ，获得指定标签名称的元素数组，比如
getElementsByTagName("p") 可以获得所有的 <p> 标签。
-->
<body>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="保密" />保密
<input type="button" value="click" onclick="btnClick()" />
<p>
<input type="text" />
<input type="text" /><br />
<input type="text" />
<input type="text" /><br />
给所有的input控件赋值：<input type="button" value="bytagname" onclick="btnClick2()" />
</p>
</body>
</html>
HTMLPageGetElementByTagName.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>getElementsByTagName 案例</title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnClick;
//如果第i个input控件上发生onclick事件，则交由bntClick处理。
}
}
function btnClick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement,取得引发事件的控件
if (input == window.event.srcElement) {
input.value = "呜呜";
}
else {
input.value = "哈哈";
}
}
}
</script>
</head>
<body onload="initEvent()">
<!--onload表示页面加载后，再调用控件事件处理函数 initEvent()。-->
<input type="button" value="哈哈" />
<input type="button" value="哈哈" /><br />
<input type="button" value="哈哈" />
<input type="button" value="哈哈" /><br />
<input type="button" value="哈哈" />
<input type="button" value="哈哈" /><br />
</body>
</html>
HTMLPageGetReg.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!--
案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。
(btn.disabled = true )
-->
<head>
<title>注册协议中同意按钮效果</title>
<script type="text/javascript">
var leftSeconds = 10;
var intervalId;
function CountDown() {
var btnReg = document.getElementById("btnReg");
if (btnReg) {//如果网页速度慢的话，可能定时器运行时候控件还没有加载！
if (leftSeconds <= 0) {
btnReg.value = "同意";
btnReg.disabled = ""; //btnReg.disabled=flase;
clearInterval();
}
else {
btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";
leftSeconds--;
}
}
}
intervalId = setInterval("CountDown()",1000);
</script>
</head>
<body>
<textarea>协议内容</textarea><br /><br />
<input id="btnReg" type="button" value="同意" disabled="disabled" />
</body>
</html>
HTMLPageGetCalc.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>加法计算器</title>
<script type="text/javascript">
function calcClick() {
var value1 = document.getElementById("txt1").value;
var value2 = document.getElementById("txt2").value;
value1 = parseInt(value1, 10); //js是弱类型的
value2 = parseInt(value2, 10);
document.getElementById("txtResult").value=value1+value2;
}
</script>
</head>
<body>
<input type="text" id="txt1" />+<input type="text" id="txt2" />
<input type="button" onclick="calcClick()" value="=" />
<input type="text" id="txtResult" readonly="readonly"/>
</body>
</html>
HTMLPageGetMMClock.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>美女时钟</title>
<script type="text/javascript">
//var now=new Date(); //不要写到这里，否则取得时间不变
function Fill2Len(i) {
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function Refresh() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return;
}
var now = new Date(); //javascript format
//var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds());
var filename = "00_" + Fill2Len(now.getSeconds() + ".jpg");
//filename="D:/mm/00_00.jpg"; //不要这么写<img id="imgMM" src="filename">
//这样写浏览器会去加载一个文件名为filename的图片。
imgMM.src = "mm/" + filename;
}
setInterval("Refresh()", 1000);
</script>
</head>
<body onload="Refresh">
<!--
当前时间是：
<script type="text/javascript">
document.write(Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()));
</script><br/>
-->
<img id="imgMM" src="" />
</body>
</html>
HTMLPageGetDTDom.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!--
document.write 只能在页面加载过程中才能动态创建。
可以调用 document 的 createElement 方法来创建具有指定标签的
DOM 对象，然后通过调用某个元素的
-->
<head>
<title>动态创建元素</title>
<script type="text/javascript">
function btnClick() {
var divMain = document.getElementById("divMain"); //获得层
var input = document.createElement("input");//创建一个标签为 input 的元素(这时没有添加到任何元素上，所以没有显示)
input.type = "button";
input.value="动态按钮";
divMain.appendChild(input); //将动态产生的元素加到divMain层
}
</script>
</head>
<body>
aaaaaaaaaaaaaaaaaaaaaa
<div id="divMain"></div>
<input type="button" value="点击" onclick="btnClick()" />
</body>
</html>
HTMLPageEx1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!--
练习：点击按钮增加一个网站的超链接
-->
<head>
<title>动态添加超链接</title>
<script type="text/javascript">
function createLink() {
var divMain = document.getElementById("divMain");
var link = document.createElement("a");
var br = document.createElement("br");
link.href = "http://www.baidu.com";
link.innerText = "百度网"; //不要写成link.value
divMain.appendChild(link);
divMain.appendChild(br);
}
</script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="产生" onclick="createLink()" />
</body>
</html>
HTMLPageInnerXXX.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!--
几乎所有 DOM 元素都有 innerText 、 innerHTML 属性（注意大小写），分别是元
素标签内内容的文本表示形式和 HTML 源代码，这两个属性是可读可写的。
<a href="http://www.itcast.cn" id="link1"> 传 <font color="Red"> 智 </font> 播
客 </a>
<input type="button" value="inner * "
onclick="alert(document.getElementById('link1').innerText);alert(document.
getElementById('link1').innerHTML);" />
用 innerHTML 也可以替代 createElement ，属于简单、粗放型、后果自负的创建
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<a href='http://www.rupeng.com'> 如鹏网
</a>";
}
<span/> 的 innerHTML 和 <span></span> 的 innerHTML 不一样。
-->
<head>
<title>动态创建元素案例</title>
<script type="text/javascript">
function createInput() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<input type='button' value='按钮'/>";
}
</script>
</head>
<body>
<a href="http://www.baidu.cn" id="link1">维<font color="Red">唯</font>为为</a>
<input type="button" value="inner * " onclick="alert(document.getElementById('link1').innerText);
alert(document.getElementById('link1').innerHTML);" />
<input type="button" value="修改innerText" onclick="document.getElementById('link1').innerText='luowei'" />
<input type="button" value="修改innerText" onclick="document.getElementById('link1').innerHTML='<font color=Yellow>luowei</font>'" />
<br />
<div id="divMain"></div>
<input type="button" value="动态创建" onclick="createInput()" />
</body>
</html>
HTMLPageSiteLink.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!--
练习：点击按钮动态增加网站列表，分两列，第一列为网站的名
字，第二列为带网站超链接的网站名。增加三行常见网站。浏览
器兼容性问题，见备注。
? 动态产生的元素，查看源代码是看不到的。通过
DebugBar → Dom → 文档 → HTML 可以看到。
==============================================================
浏览器兼容性的例子： ie6 ， ie7 对 table.appendChild("tr") 的支持
和 IE8 不一样，用 insertRow 、 insertCell 来代替或者为表格添加
tbody ，然后向 tbody 中添加 tr 。 FF 不支持 InnerText 。
-->
<head>
<title>动态产生超链接</title>
<script type="text/javascript">
function LoadData() {
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "谷歌": "http://www.google.com" };
var tableLinks = document.getElementById("tableLinks");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");//先创建td,放入内容，再加入tr
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
tr.appendChild(td2);
tableLinks.appendChild(tr);
//tableLinks.tBodies[0].appendChild(tr); //解决浏览器兼容问题方法一，在tbody中插入内容,$$$$这里还有问题，无法认别tBodies对象。
}
}
//解决浏览器兼容问题方法二
function LoadData2() {
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "谷歌": "http://www.google.com" };
var tableLinks2 = document.getElementById("tableLinks2");
for (var key in data) {
var value = data[key];
var tr = tableLinks2.insertRow(-1); //在表格最后插入一行，并返回插入行的对象。
//联想winform中的 TreeNode node=treeNode.AddNode("Hello");
var td1 = tr.insertCell(-1); //在tr中增加一个td,并且返回增加的td,然后td放入tr中。
td1.innerText = key; //FireFox下不支持insertText.
var td2 = tr.insertCell(-1);
td2.innerHTML="<a href='"+value+"'>"+value+"</a>";//也可以用createElement
}
}
</script>
</head>
<body>
<table id="tableLinks"></table>
<tbody></tbody>
<table id="tableLinks2"></table>
<input type="button" value="加载数据" onclick="LoadData()" />
<input type="button" value="加载数据2" onclick="LoadData2()" />
</body>
</html>
HTMLPageWSPL.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!--
练习：无刷新评论。
-->
<head>
<title>无刷新评论</title>
<script type="text/javascript">
function AddComment() {
var nickname = document.getElementById("nickname").value;
var comment = document.getElementById("comment").value;
//alert(nickname);
//alert(commont);
var tableName = document.createElement("td");
var tr = document.createElement("tr");
var tdNickName = document.createElement("td");
tdNickName.innerText = nickname;
tr.appendChild(tdNickName);
var tdComment = document.createElement("td");
tdComment.innerText = comment;
tr.appendChild(tdComment);
tableComment.tBodies[0].appendChild(tr);
}
</script>
</head>
<body>
文章区域，贴子区域，维唯为为说，要好好学习，努力工作。认认真真去做好每件事，用心学习，用心工作，用心生活！
<p><font color="green">评论区：</font></p>
<table id="tableComment">
<tbody>
<tr><td>rowin:</td><td>还是沙发耶！</td></tr>
</tbody>
</table><br />
昵称：<input id="nickname" type="text" /><br />
<textarea id="comment" rows="10" cols="40">在此写评论内容.....</textarea><br />
<input type="button" value="评论" onclick="AddComment()"/>
</body>
</html>