Dom的学习随笔三

一、document方法：
1、getElementById方法(非常常用)，根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围之类的问题，因此不建议直接通过id操作元素，而是通过getElementById
2、getElementByName根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementByName返回值是对象数组。
3、getElementByTagName，获得指定标签名称的元素数组，比如getElementByTagName("p")可以获得所有的<p>标签。
var now=new.Date();//网上搜有模仿C#的format函数实现“yyy-MM-dd”的效果（搜：javascript format）
案例：美女时钟（新建一个页面：BeautyClock.htm，再添加一个MMClock文件夹，把需要用到的图片都copy进去）

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>美女时钟</title>
 5     <script type="text/javascript">
 6 //var now = new Date();不能放在这，否则取得时间不变
 7 function Fill2Len(i) {
 8 if (i < 10) {
 9 return "0" + i;
10             }
11 else {
12 return i;
13             }
14         }
15 function Refresh() {
16 var imgMM = document.getElementById("imgMM");
17 if (!imgMM) {
18 return;//没加载就直接return
19             }
20 var now = new Date();//每次刷新时取得时间
21 var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds())+ ".jpg";
22             imgMM.src = "MMClock/" + filename;
23         }
24         setInterval("Refresh()",1000);
25 </script>
26 </head>
27 <body onload="Refresh()">
28 <img id="imgMM" src="" />
29 </body>
30 </html>

二、DOM的动态创建
1、document.write只能在页面加载过程中才能动态创建。
2、可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下：

View Code

<!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 showit() {
            var divMain = document.getElementById("divMain");//获得层
var btn = document.createElement("input");//创建一个标签名为input的元素（这时还没添加到任何元素上，所以没有显示）
            btn.type = "button";
            btn.value = "我是动态的";
            divMain.appendChild(btn);//将动态产生的元素添加到divMain层
        }
    </script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="OK" onclick="showit()" />
</body>
</html>

3、innerText与innerHTML的用法

View Code

<!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 createInput() {
            var divMain = document.getElementById('divMain');
            //将<div id="divMain"></div>设置为<div id="divMain"><input type='button' value='按钮'/></div>
            divMain.innerHTML = "<input type='button' value='按钮'/>";
        } 
    </script>
</head>
<body>
<a href="http://blog.sina.com.cn/" id="link1">新<font color="red"/>浪</font>博客</a>
<input type="button" value="innerXXX" onclick="alert(document.getElementById('link1').innerText);
alert(document.getElementById('link1').innerHTML);" />
<input type="button" value="修改innerText" onclick="document.getElementById('link1').innerText='新浪'" />
<input type="button" value="修改innerHTML" onclick="document.getElementById('link1').innerHTML='<font color=Yellow>新浪</font>'" />
<div id="divMain"></div>
<input type="button" value="动态创建" onclick="createInput()" />
</body>
</html>

a、几乎所有DOM元素都有innerText与innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="http://blog.sina.com.cn/" id="link1">新<font color="red"/>浪</font>博客</a>
<input type="button" value="innerXXX" onclick="alert(document.getElementById('link1').innerText);
alert(document.getElementById('link1').innerHTML);" />
b、用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建。
function createInput() {
var divMain = document.getElementById('divMain');
divMain.innerHTML="<a href='http://www.51aspx.com/'>ASP.Net源码之家</a>";
}
案例：1）点击按钮增加一个网站的超链接

View Code

<!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");
            link.href="http://www.taobao.com";
            link.innerText = "淘宝网";
            divMain.appendChild(link);
        }
    </script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="创建超链接" onclick="createLink()" />
</body>
</html>

2）点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的网站名。增加三行常见网站。（动态创建表格，两种方法）
浏览器兼容性问题：（解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法，可参考ITeye相关论坛：http://www.iteye.com/topic/474322）
浏览器兼容性的例子：IE6、IE7对table.appendChlid("tr")的支持和IE8不一样，用insertRow、 insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。火狐浏览器(FF)不支持innerText。
所以动态加载网站列表的程序修改为：
var tr=tableLinks.insertRow(-1);//FF必须加-1这个参数
var td1=tr.insertCell(-1);
td1.innerText=key;
var td2=tr.insertCell(-1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
或者：<table id="tableLinks">
<tbody></tbody></talbe>,然后tableLinks.tBodies[0].appendChild(tr);

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>动态创建表格（代码不兼容IE6）</title>
 5     <script type="text/javascript">
 6 function LoadData() {//方法一
 7 var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "淘宝": "http://www.taobao.com" };
 8 var tableLinks = document.getElementById("tableLinks");
 9 for (var key in data) {
10 var value = data[key];
11 var tr = document.createElement("tr");                
12 var td1 = document.createElement("td");//先创建td,在td中放入内容，再加入tr
13                 td1.innerText = key;
14                 tr.appendChild(td1);
15 var td2 = document.createElement("td");
16                 td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
17                 tr.appendChild(td2);
18 //tableLinks.appendChild(tr);
19                 tableLinks.tBodies[0].appendChild(tr);//并且在<table>标签里要加上<tbody></tbody>
20             }
21         } //动态产生的元素，查看源代码是看不到的。但可以通过DebugBar->Dom->Document->HTML可以看到
22 function LoadData2() {//方法二
23 var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "淘宝": "http://www.taobao.com" };
24 var tableLinks2 = document.getElementById("tableLinks2");
25 for (var key in data) {
26 var value = data[key];
27 var tr = tableLinks2.insertRow(-1);//在表格最后插入一行，并且返回插入行的对象。联想Winform中TreeNode node=treeNode.AddNode("hello")
28                 
29 var td1 = tr.insertCell(-1);//在tr中增加一个td，并且返回增加的td，然后td中放入内容
30                 td1.innerText = key; //FF不支持innerText
31 var td2 = tr.insertCell(-1);
32                 td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";//也可以用createElement
33             }
34         }
35 </script>
36 </head>
37 <body>
38 <table id="tableLinks">
39 <tbody></tbody></table>
40 <table id="tableLinks2"></table>
41 <input type="button" value="加载数据" onclick="LoadData()" />
42 <input type="button" value="加载数据2" onclick="LoadData2()" />
43 </body>
44 </html>

笔记还在完善中，待续……

posted on 2011-12-27 13:50 Gelivable【IT随笔】阅读(325) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Dom的学习随笔三

导航

公告