Dom的学习随笔三

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 296 次

一、document方法：1、getElementById方法(非常常用)，根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围之类的问题，因此不建议直接通

一、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 = { "百度"

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。